【前端学习】前端学习第十四天：JavaScript中DOM元素的操作

一、DOM元素的获取

1、getElementById（）：通过id获取元素，得到的是一个元素对象；

2、getElementByTagName（）：通过标签名获取元素，返回的是一个集合；

3、getElementByClassName（）：通过类名获取元素，返回的是一个集合；

4、querySelector（）：返回指定选择器的第一个元素，里面的选择器需要加符号，如querySelector（‘.box1’）；

5、querySelectorAll（）：返回指定选择器的所有元素；

两个特殊的获取元素的方法：

1、获取body元素：document.body;

2、获取html元素：document.html;

二、访问和操作属性节点的DOM方法

1、getAttribute（name）方法：获取元素节点的指定属性的值；

2、setAttribute（name，newValue）方法：用于设置元素节点的指定属性值；

3、removeAttribute（name）方法：用于从元素节点中移除给定的属性。

三、创建节点

1、创建文本节点：document.createTextNode（）；

2、创建属性节点：document.createAttribute（）；

3、创建元素节点：document.createElement（）；

4、复制节点：object.cloneNode（）；

四、插入节点

1、在父节点的末尾插入新的节点：

object.appendChild（）；

2、在指定元素前插入新节点：

object.insertBefore（child，指定元素）；

五、替换节点和删除节点

替换节点：object.replaceChild（新节点，被替换的节点）；

删除节点：object.removeChild（节点）；注意：要移除的节点必须是父节点的直接子节点；

六、样式属性操作

1、element.style：行内样式操作，适用于样式较少时；

2、element.className=新类名：这样操作会直接覆盖掉原来的类名。