这个章节主要是再深入介绍下 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", "<p>afterend</p>")
</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>

练习

存在以下 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>

实现以下的点击切换颜色效果。 $$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>