09Document对象

什么是Document对象

• document对象在DOM中代表了HTML页面
• document也是DOM解析HTML页面的入口。

定位页面元素

定位页面元素常用的方法：

Document对象也提供了一些属性：

NodeList与HTMLCollection的区别

二者都是集合

• NodeList又称静态NodeList，就是就是对文档对象模型的任何改动都不会影响集合的内容。
• HTMLCollection又成动态NodeList，所谓动态的 Nodelist集合，就是如果文档中的节点树发生变化，则已经存在的 Nodelist对象也可能会变化。

创建页面元素

• 创建元素节点createElement() // 创建一个新的<option>元素 var optionElement = document.createElement("option")
• 创建文本节点 // 创建文本节点 var textNode = document.createTextNode("保定")
• 创建属性节点 var attrNode = document.createAttribute('value') 该属性只有一个参数为属性名称，没有属性值。属性值需要使用nodeValue属性完成。 attrNode.nodeValue = 'baoding' 由于属性节点不是元素节点的子节点，不能使用添加子节点的方式操作属性。想要添加属性节点需通过setAttributeNode()完成 optionElement.setAttributeNode(attrNode)

向一个页面中添加<option>元素方式的两种方案：

• 第一种 // 1. 创建元素节点 var optionElement = document.createElement('option') // 2. 创建文本节点 var textNode = document.createTextNode('保定') // 3. 创建属性节点 var attrNode = document.createAttribute('value') // 通过nodeValue属性为属性节点设置值 attrNode.nodeValue = 'baoding' // 4. 如何添加属性节点(既不是父节点也不是子节点) optionElement.setAttributeNode(attrNode) // 5. 将文本节点作为元素节点的子节点添加 optionElement.appendChild(textNode) // 6. 获取页面的元素 var select = document.getElementById('menu') // 7. 将创建的元素节点添加到页面中去 select.appendChild(optionElement)
• 第二种 // 1. 创建元素节点 var optionElement = document.createElement('option') // 2. 创建文本节点 var textNode = document.createTextNode('保定') // 3. 通过setAttribute()方法创建属性，同时赋值 optionElement.setAttribute('value', 'baoding') // 4. 将文本节点作为元素节点的子节点添加 optionElement.appendChild(textNode) var select = document.getElementById('menu') select.appendChild(optionElement)