这个章节主要是再深入介绍下 Element 的一些常用操作。

$$tip

Element 所拥有的属性与方法太多了,不可能完全讲完。如果有更多需要可以详查 Element - MDN

$$

创建一个元素

如果想要创建一个元素则需要使用 document.createElement(tag) 方法。

$$jsdemo$$
$$edit$$
let title = document.createElement("h1") // 创建一个 h1 元素
title.innerText = "三眼鸭的编程教室" // 设置其文本内容

执行以上代码并不会发生什么,因为我们还没将其插入页面之中,

document.createTextNode(text) 则可以创建一个纯文本节点,一般用得比较少。

$$jsdemo$$
$$edit$$
let textNode = document.createTextNode('三眼鸭')

插入元素

以下代码调用了 document.body.append 将创建的元素作为一个子元素插入到了 body 当中。

$$jsdemo$$
$$edit$$
let title = document.createElement("h1") // 创建一个 h1 元素
title.innerText = "三眼鸭的编程教室" // 设置其文本内容

document.body.append(title) // 插入到 body 中

包括 append 在内还有以下的插入元素的方法:

  • append:在元素末尾插入元素或字符串。
  • prepend:在元素开头插入元素或字符串。
  • before:在元素之前插入元素或字符串。
  • after:在元素后面插入元素或字符串。
  • replaceWith:替换元素为给定的元素或字符串。
$$jsdemo$$
$$edit$$
<div id="box">快来替换我呀~</div>
<button onclick="replace()">点击替换</button>
<script>
    function replace() {
        let box2 = document.createElement("h1")
        box2.textContent = "替换完成"

        box.replaceWith(box2)
    }
</script>

插入 HTML 代码

insertAdjacentHTML(where, html) 可以让我们插入 HTML 代码, where 参数有以下取值:

  • “beforebegin”:元素之前插入。
  • “afterbegin”:元素开头插入。
  • “beforeend”:元素末尾插入。
  • “afterend”:元素之后插入。
$$jsdemo$$
$$edit$$
<div id="box">box-inside</div>
<script>
    box.insertAdjacentHTML("beforebegin", "<p>beforebegin</p>")
    box.insertAdjacentHTML("afterbegin", "<p>afterbegin</p>")
    box.insertAdjacentHTML("beforeend", "<p>beforeend</p>")
    box.insertAdjacentHTML("afterend", "<h3>afterend</h3>")
</script>
<style>
    #box {
        border: 2px solid teal;
    }
</style>

删除元素

调用元素的 remove() 方法可以直接将元素从页面上删除。

$$jsdemo$$
$$edit$$
<div id="box">快来删除我呀~</div>
<button onclick="remove()">点击删除</button>
<script>
    function remove() {
        box.remove()
    }
</script>

元素属性

如果是标准的属性,可以通过点操作符直接获取,否则的话要用 getAttribute 获取。

$$tip

可以在 Element - MDN 页面看查看哪些是标准的属性。

$$

$$jsdemo$$
$$edit$$
<div id="box" class="box" name="小三眼">三眼鸭</div>
<script>
    alert(box.id) // box,id 是标准属性
    alert(box.name) // undefined, name 不是标准属性
    alert(box.getAttribute("name")) // 小三眼, 可以通过 getAttribute 获取
</script>

包括 getAttribute 有以下相关的属性方法。

  • getAttribute: 获取属性值。
  • hasAttribute: 检查属性是否存在。
  • setAttribute: 设置属性值。
  • removeAttribute:删除属性。

隐藏元素

当元素的 hidden 元素为 true 时可以隐藏元素。

$$jsdemo$$
$$edit$$
<div id="box">快来隐藏我呀~</div>
<button onclick="toggle()">点击切换</button>
<script>
    function toggle() {
        box.hidden = !box.hidden
    }
</script>

类属性

className 属性代表元素的 class , 我们可以通过操作它完成对 class 的修改。

$$jsdemo$$
$$edit$$
<div id="box" class="title header">三眼鸭的编程教室</div>
<button onclick="change()">点击修改</button>
<script>
    console.log(box.className) // title header
    function change() {
        box.className = "red"
    }
</script>
<style>
    .title {
        font-size: 24px;
    }
    .red {
        color: red;
    }
</style>

但是对于整个 class 字符串的修改总是不方便,因此提供了 classList 这个神属性来方便我们操作。

classList 返回的是类的集合:

$$jsdemo$$
$$edit$$
<div id="box" class="title header">三眼鸭的编程教室</div>
<script>
    console.log(box.classList) // DOMTokenList(2) ['title', 'header', value: 'title header']
</script>
<style>
    .title {
        font-size: 24px;
    }
    .red {
        color: red;
    }
</style>

classList 有以下方法来操作类属性:

  • add(class):增加类名。
  • remove(class):删除类名。
  • toggle(class):类名不存在就添加,存在就删除。
  • contains(class):判断是否包含类名。
$$edit$$
$$jsdemo$$
<p id="box" class="title red">快来切换我呀~</p>
<button onclick="toggle()">点击切换</button>
<script>
    function toggle() {
        box.classList.toggle("red")
    }
</script>
<style>
    .title {
        font-size: 24px;
    }
    .red {
        color: red;
    }
</style>

样式属性

style 是一个映射了元素样式的对象,可以通过修改它操作样式。

$$tip

style 对象的所有设置操作都会被映射成元素上 style 属性的值。

$$

$$tip

style 属性名要采用驼峰命名法代替连字符。

$$

$$jsdemo$$
$$edit$$
<button onclick="increase()">点击喂饭</button>
<p id="box">我要长大长大长大~</p>
<script>
    let fontSize = 16
    function increase() {
        box.style.fontSize = fontSize + "px"
        fontSize += 2
    }
</script>

$$tip

如果想直接设置元素上 style 属性的字符串的值则是设置 cssText 属性。

$$

获取样式的值

style 对象只能获取设置在元素 style 属性中的样式值,对于定义在类中或继承来的样式值是获取不到的。

$$jsdemo$$
$$edit$$
<p id="box" style="color: teal">三眼鸭的编程教室~</p>
<button onclick="getColor()">点击获取</button>
<script>
    function getColor() {
        alert(box.style.color) // teal
        alert(box.style.backgroundColor) // 空字符串
    }
</script>

<style>
    #box {
        background-color: pink;
    }
</style>

getComputedStyle 方法则可以帮助我们获取样式的值。

$$jsdemo$$
$$edit$$
<p id="box" style="color: teal">三眼鸭的编程教室~</p>
<button onclick="getColor()">点击获取</button>
<script>
    function getColor() {
        alert(box.style.color) // teal
        alert(getComputedStyle(box).backgroundColor) // rgb(255, 192, 203)
    }
</script>

<style>
    #box {
        background-color: pink;
    }
</style>

练习

  1. 存在以下 h1 元素,每次点击删除最后一个。
<h1>三眼鸭</h1>
<h1>三眼牛</h1>
<h1>三眼鸡</h1>
<h1>三眼猫</h1>
<h1>三眼狗</h1>

$$demo <h1>三眼鸭</h1> <h1>三眼牛</h1> <h1>三眼鸡</h1> <h1>三眼猫</h1> <h1>三眼狗</h1> <button onclick="removeLast()">删除最后一个元素</button> <script> function removeLast() { let h1List = document.getElementsByTagName("h1")

    // 删除最后一个元素
    if (h1List.length > 0) h1List[h1List.length - 1].remove()
}

</script> $$

$$answer

$$jsdemo$$
$$edit$$
<h1>三眼鸭</h1>
<h1>三眼牛</h1>
<h1>三眼鸡</h1>
<h1>三眼猫</h1>
<h1>三眼狗</h1>
<button onclick="removeLast()">删除最后一个元素</button>
<script>
    function removeLast() {
        let h1List = document.getElementsByTagName("h1")

        // 删除最后一个元素
        if (h1List.length > 0) h1List[h1List.length - 1].remove()
    }
</script>

$$

  1. 实现以下的点击切换颜色效果。 $$demo <h1 class="title">三眼鸭的编程教室</h1> <button onclick="toggle()">点击切换颜色</button> <style> .teal { color: teal; } </style> <script> let title = document.querySelector(".title")

    function toggle() { title.classList.toggle("teal") } </script> $$

$$answer

$$jsdemo$$
$$edit$$
<h1 class="title">三眼鸭的编程教室</h1>
<button onclick="toggle()">点击切换颜色</button>
<style>
    .teal {
        color: teal;
    }
</style>
<script>
    let title = document.querySelector(".title")

    function toggle() {
        title.classList.toggle("teal")
    }
</script>

$$