DOM增删改查

DOM 查询

---

1. 节点的属性
2. 获取元素节点
3. 获取元素节点的子节点
4. 获取父节点和兄弟节点
5. DOM查询的其他方法
6. DOM增删改
7. Window常用对象方法

---

节点的属性

	nodeName	nodeType	nodeValue
文档节点	#document	9	null
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容

---

获取元素节点

• 通过document对象调用

1. getElementById()
   • 通过 id 属性获取一个元素节点对象
2. getElementsByTagName
   • 通过标签名获取一组元素节点对象
   • 这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
         即使查询到的元素只有一个，也会封装到数组中返回
3. getElementsByName
   • 通过 name 属性获取一组元素节点对象

---

获取元素节点的子节点

• 通过具体的元素节点调用

1. getElementsByTagName()
   • 方法，返回当前节点的指定标签名后代节点
2. childNodes
   • 属性，表示当前节点的所有子节点 (包括空白文本节点)
   • firstElementChild 获取当前元素的第一个子元素 (不支持IE8及以下)
3. firstChild
   • 属性，表示当前节点的第一个子节点
4. lastChild
   • 属性，表示当前节点的最后一个子节点

---

获取父节点和兄弟节点

• 通过具体的节点调用

1. parentNode
   • 属性，表示当前节点的父节点
2. previousSibling
   • 属性，表示当前节点的前一个兄弟节点
   • 返回#android的前一个兄弟节点(也可能获取到空白的文本)
   • previousElementSibling 获取前一个兄弟元素，IE8及以下不支持
3. nextSibling
   • 属性，表示当前节点的后一个兄弟节点

---

DOM查询的其他方法

1. 获取body标签
   • var body = document.getElementsByTagName("body")[0]
   • 在document中有一个属性body，它保存的是body的引用
2. html根标签
   • document.documentElement保存的是html根标签
3. document.all()
   • 代表页面中所有的元素
     var all = document.getElementsByTagName("*");
4. 根据元素的class属性值查询一组元素节点对象
   • var box1 = document.getElementsByClassName("box1");
   • getElementsByClassName() 可以根据class属性值获取一组元素节点对象，但是该方法不支持IE8及以下的浏览器
5. document.querySelector()
   • 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
     var div = document.querySelector(".box1 div")
var div = document.querySelector(".box1")
   • IE8中没有getElementsByClassName() 但是可以使用querySelector()
   • 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
6. document.querySelectorAll()
   • 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装
   • 即使符合条件的元素只有一个，它也会返回数组

---

DOM增删改

1. document.createElement()
   • 可以用于创建一个元素节点对象
   • 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回
2. document.createTextNode()
   • 可以用来创建一个文本节点对象
   • 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
3. appendChild()
   • 向一个父节点中添加一个新的子节点
   • 用法： 父节点.appendChild(子节点);
4. insertBefore()
   • 可以在指定的子节点前插入新的子节点
   • 语法： 父节点.insertBefore(新节点, 旧节点);
5. replaceChild()
   • 可以使用指定的子节点替换已有的子节点
   • 语法：父节点.replaceChild(新节点, 旧节点);
6. removeChild()
   • 删除一个子节点
   • 语法：父节点.removeChild(子节点);
子节点.parentNode.removeChild(子节点);

---

Window常用对象方法

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框
prompt()	显示可提示用户输入的对话框
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框