什么是Element对象

DOM的标准规范中提供了 Elementi对象，该对象提供了HTML页面中所有元素所具有的属性和方法。
DOM标准规范中提供了Node对象，主要是依靠DOM节点树结构访问和更新HTML页面的内容。
而DOM标准规范中提供了 Element对象，主要是依靠DOM元素树结构访问和更新HTML页面的内容。

定位元素

1
2
3
4
5
6
7
<div class='container'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

  1. getElementsByTagName

    1
    2
    3
    var container = document.getElementsByClassName("container")[0]
    var elements = container.getElementsByTagName("div");
    console.log(elements)

  2. getElementsByClassName

    1
    var container = document.getElementsByClassName("container")[0]

    通过此方法获取不存在空白节点问题

  3. querySelector

    1
    2
    var container = document.body
    var css1 = container.querySelector('.container')

    可以包含一个或多个，但只返回第一个

    image-20200421192155251

  4. querySelectorAll

    与上一个类似，返回全部

遍历元素

1
2
3
4
5
6
7
<div id="d">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

  1. 获取指定节点的所有子元素

  2. 获取指定元素的所有子元素的个数

  3. 获取指定节点的第一个子元素

    存在空白节点问题。，如果没有子元素，则返回null

  4. 获取指定节点的最后一个子元素

1
2
3
4
5
6
7
8
9
10
var d = document.getElementById('d')
d.firstChild.nextSibling.textContent = '666'
// 获取指定节点的所有子元素
console.log('children:', d.children)
// 获取指定元素的所有子元素的个数
console.log("childElementCount", d.childElementCount)
// 获取指定节点的第一个子元素
console.log("firstChild", d.firstChild)
// 获取指定节点的最后一个子元素
console.log("lastElementChild", d.lastElementChild)

image-20200421192850453

image-20200421192859851

  1. 获取指定元素的前面相邻兄弟元素
  2. 获取指定元素的后面相邻兄弟元素
1
2
3
4
5
6
7
var d = document.getElementById('d')
// 获取下一个兄弟元素（获取到空白节点）
console.log(d.nextSibling)
// 获取到script脚本
console.log(d.nextSibling.nextSibling)
console.log(d.previousSibling)
console.log(d.previousSibling.previousSibling)

属性操作

1
<p id="p1" class="text">12312321</p>

  1. 获取

    1
    2
    var pElement = document.getElementById('p1')
    console.log(pElement.getAttribute("class")) //返回text

  2. 设置

    1
    2
    pElement.setAttribute("name", 'name_test')
    console.log(pElement.getAttribute('name'))

  3. 删除

    1
    2
    3
    pElement.setAttribute("name", 'name_test')
    pElement.removeAttribute('name')
    console.log(pElement.getAttribute('name'))

    如果删除的属性不存在的话，不会引发任何异常

  4. 判断是否含有指定属性（是否含有指定属性，布尔值）

    1
    console.log(pElement.hasAttribute("class"))

  5. 用于判断是否存在属性(存在属性即返回true)

    1
    console.log(pElement.hasAttributes())

InnerHTML

可以直接添加HTML代码

1
2
var pElement = document.getElementById('p1')
pElement.innerHTML = '<span>test<span>'