什么是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()

    1
    2
    // 创建一个新的<option>元素
    var optionElement = document.createElement("option")

  • 创建文本节点

    1
    2
    // 创建文本节点
    var textNode = document.createTextNode("保定")

  • 创建属性节点

    1
    var attrNode = document.createAttribute('value')

    该属性只有一个参数为属性名称，没有属性值。属性值需要使用nodeValue属性完成。

    1
    attrNode.nodeValue = 'baoding'

    由于属性节点不是元素节点的子节点，不能使用添加子节点的方式操作属性。想要添加属性节点需通过setAttributeNode()完成

    1
    optionElement.setAttributeNode(attrNode)

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

  • 第一种

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    // 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
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // 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)