什么是Document对象

  • document对象在DOM中代表了HTML页面

  • document也是DOM解析HTML页面的入口。

定位页面元素

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

方法名参数传入作用返回类型示例
getElementById()ID名通过页面元素的id属性值定位元素单个节点,既是Node也是Element类型getElementById('p1')
getElementsByName()name通过页面元素的name属性值定位元素NodeListgetElementsByName("pElement")
getElementsByClassName()class通过页面元素的class属性定位元素HTMLCollectiongetElementsByClassName("pElements")
getElementsByTagName()元素名通过元素的元素名定位元素HTMLCollectiongetElementsByTagName("p")
querySelector()css选择器通过css选择器定位第一个匹配的元素单个节点,既是Node也是Element类型querySelector('.pElement')
querySelectorAll()css选择器通过css选择器定位所有匹配的元素NodeListquerySelectorAll('.pElement')

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

属性作用
documentElement获取HTML页面中的<html>元素
head获取HTML页面中的<head>元素
title获取HTML页面中的<title>元素
body获取HTML页面中的<body>元素
links获取HTML页面中的<a>元素
images获取HTML页面中的<img>元素

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)