js *** 作节点的DOM方法

js *** 作节点的DOM方法

一、创建节点

createElement

createTextNode

二、添加、删除、替换、克隆元素

1、appendChild

2、insertBefore

3、如果appendChild、insertBefore追加的是已经存在的子元素，实际上就会将子元素位置移动

4、删除节点removeremoveChild

remove()

removeChild

5.替换节点

replaceChild

6、克隆节点

cloneNode()

三、 *** 作元素属性的方法

1.获取属性 元素.属性名

2.设置属性 元素.属性名 = 属性值

1、2方法只能获取和设置元素自带的属性

3. *** 作属性的万能方法

getAttribute()

setAttribute()

1）一共12个节点类型

2）dom *** 作就是对节点进行 *** 作

3）节点的类型的获取方法notetype

4）ie9以上及chrome safari firefox 会将换行符当成节点

（1）静态获取

（2）返回带有指定ID的元素

var box1=document.getElementById('box')

（1）根据标签名获取

（2）得到的是个数组

var div1=document.getElementsByTagName('div')[0]

（1）根据类名获取元素

（2）动态获取

（3）得到的是一个数组

var box=document.getElementsByClassName('box')[0]

（1）返回符合要求第一个元素

（2）通过css选择器来获取指定标签

（3）静态获取

（1）返回所有匹配元素

（2）根据css选择器来获取所有标签

（3）得到的是一个数组

获取兄弟节点

获取下一个兄弟标签

获取上一个兄弟节点

获取上一个兄弟标签

获取最后一个子节点

获取最后一个子标签

获取所有非标签类型的子节点

获取所有子标签节点

获取父节点

增加节点

var div=document.createElement('div')

在父元素的末尾，插入节点

在添加元素前，需要将元素先创建好

div.appendChild(div)

修改指定子节点

删除指定子节点

在删除前需要先获取到被删除元素

div.removeChild(box)

删除当前节点

需要先获取到被删除的节点

div.remove()

（1）设置ID

div.id='box'

（2）设置class

div.className='box'

（3）设置style

div.style.width='10px'

（4）设置图片路径

img.src='../'

（5）.自定义属性

---