DOM的基本操作

DOM基础

、

一：操作元素属性

二：childNode 和nodeType和children

childNode是用来获取该元素下所有的子节点

nodeType是用来判断节点类型的，如果是文本节点则返回3，元素节点返回1

children功能和childNode类似，但children不包括文本节点，只包括元素节点，相比于childrenNode更好用

parentNode:可以找到该节点的父亲节点

offsetparent：如果父级没有相对定位是，则它一直向上找父级，如果伏父级有相对定位，则父级就是该元素

firstchild：获得该元素下的第一个子元素，但是不兼容，只兼容ie6-8，而高级浏览器则需要用，firstElementChild，如果，连个都需要用，则用if语句进行判断

改变元素的属性的三种方法

1：通过：“.”来改变

2：通过：[ ‘value’]加方括号进行设置

3：通过：setAttribute（‘属性’，‘想设置的值’）进行设置

三：dom元素灵活查找

js 获取元素的三种方法是

1：通过getElementById（‘’）

2：通过getElementsByTagName（‘’）

3：通过className

通过className进行元素的获取

四：创建元素：分为两步

1:通过creatElement（‘+想要创建的元素名称’）；就可以创建一个元素，但并不会主动显示在页面上，需要用下面的方法

2：创建完成后，需要用appendChild（oLi）将创建的元素显示在页面上

3：在一个元素之前新建一个元素：通过：insertBefore（显示位置的元素名，在该元素中的第一个显示）

4：appendChild（）和innsertBefore（）的比较

注意：以上两中方法在火狐和谷歌浏览器中不报错，但ie不行，（因为，在第一次插入时，html中并没有li，所以此时aLi【0】就会报错）

想要全部兼容的话就要这样：

5:通过innerHTML可以实现，将文本框中输入的内容，添加到新创建的元素中

6：删除元素

五：文档碎片（了解即可）