节点和元素属性样式_(7)createtextnode():创建文本节点对象-CSDN博客

本文链接：https://blog.csdn.net/langmanboy/article/details/124156765

本文详细介绍了DOM中的节点操作，包括创建、内容、管理等方面，并讲解了如何设置和获取元素属性及样式，如innerHTML、classList、行内样式等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

节点和元素属性样式

1. 创建节点

1-1 creatTextNode

document.createTextNode(data)

创建一个新的文本节点，data 是一个字符串为文本节点的内容

<div class="container"></div>

<script>
    // creattextNode 文本节点
    let elem = document.querySelector('.container');
    let text = document.createTextNode('hello js');
    elem.append(text);
    // <div class="container">hello js</div>
</script>

1-2 createElement

document.creaetElement(tagName)

创建一个由标签名称 tagName 指定的 HTML 元素节点对象

创建元素之前会将tagName 转化成小写

<div class="container"></div>

<script>
    // createElement 创建元素节点
    let elem = document.querySelector('.container');
    let create = document.createElement('div');
    console.log(create)
    create.innerText = 'Hello JSX'
    elem.append(create)
    // <div class="container"><div>Hello JSX</div></div>
</script>

1-3 cloneNode

node.cloneNode(deep)

deep 是否采用深度克隆，如果为 true，则该节点的所有后代节点也都会被克隆，如果为false，则只克隆该节点本身

复制调用该方法的节点对象，node 节点对象方法

<div class="container">
    <div class="row">
        <p>hello world</p>
    </div>
</div>

<script>
    let elem = document.querySelector('.row');
    // 克隆节点
    let clone = elem.cloneNode(true);
    console.log(clone)
    // 参数为true 深度克隆
    // <div class="row">
    //     <p>hello world</p>
    // </div>
</script>

1-4 importNode

document.importNode(externalNode, deep)

externalNode：将要从外部文档导入的节点
deep：是否要导入节点的后代节点，是一个布尔类型

复制调用该方法的节点对象，documet 对象方法

<div class="container">
    <div class="row">
        <p>hello world</p>
    </div>
</div>
    
<script>
    // document对象方法
    // 克隆节点并插入到当前文档
    let elem = document.querySelector('.row');
    // 克隆节点
    let clone = document.importNode(elem, true);
    console.log(clone);
    // 插入新元素
    elem.append(clone)
</script>

1-5 creatDocumentFragment

document.createDocumentFragment()

创建一个新的空白的文档片段，指向 DocumentFragment 对象的引用

文档片段处于内存中，将元素插入到文档片段时不会引起回流，使用代码片段能提升性能

<ul class="panel"></ul>

<script>
    let panel = document.querySelector('.panel');
    // 空文档片段
    let fragment = document.createDocumentFragment();
    console.log(fragment)
    let arr = ['Firefox', 'Chrome', 'Opera',
        'Safari', 'Internet Explorer']
    arr.forEach((item) => {
        let list = document.createElement('li');
        list.textContent = item;
        fragment.appendChild(list);
    })
    panel.appendChild(fragment);
</script>

2. 节点内容

2-1 innerHTML

inneHTML 用于向标签中添加 html 标签内容，将元素中的 HTML 标签以字符串形式获取，并解析 HTML 标签语法

innerHTML 会触发浏览器的解析器重绘 DOM

innerHTML += 会发生重绘，它会先移除旧的内容，然后写入新的

<div class="main">hello world</div>

<script>
    //  innerHTML在添加内容时会发生重绘
    let main = document.querySelector('.main');
    console.log(main.innerHTML); // hello world

    // 解析HTML标签，也可以获取HTML标签
    main.innerHTML = '<div>hello jsx</div>';
    console.log(main.innerHTML);
    // <div>hello jsx</div>

    // innerHTML+= 会进行重绘
    // 导致main元素节点事件无法响应
    main.addEventListener('click', function(e) {
        console.log(this.innerHTML);
        this.parentElement.innerHTML += '<h3>jsx</h3>'
    })
</script>

2-2 outerHTML

outerHTML 获取元素内容的 HTML 表示形式或替换元素的内容

outerHTML 不会删除原来的旧的内容
只是用新的内容替换旧的内容，旧的内容依然存在

<div class="main">hello outer</div>
<div class="all">hello jsx</div>
    
<script>
    // outerHTML
    let main = document.querySelector('.main');
    let all = document.querySelector('.all')
    console.log(main.outerHTML);
    console.log(all.innerHTML);
    // 不会删除旧内容,新的内容替换旧的内容
    main.outerHTML = `<h3>hello outer</h3>`
    console.log(main.outerHTML)
    
    // innerHTML 添加HTML内容 会先删除旧内容然后删除新内容
    all.innerHTML = `<h3>innerHTML</h3>`
    console.log(all.innerHTML);
    // <div class="main"><h3>innerHTML</h3></div>
</script>

2-3 textContent & innerText

textContent：表示存文本内容

innerText：表示一个元素中已被渲染的内容

获取时忽略所有标签，只获取文本内容
设置时将内容中的标签当文本对待不进行标签解析

<div class="container">Hello jsx</div>

<script>
    // textContent 和 innerText 都是忽略标签返回存文本
    let elem = document.querySelector('.container');
    console.log(elem.textContent); // Hello jsx
    console.log(elem.innerText); // Hello jsx

    // 设置文本是不会对标签解析
    elem.textContent = '<h3>JSX LJJ</h3>'
    console.log(elem.textContent); // '<h3>JSX LJJ</h3>'

    elem.innerText = '<h3>JSX - LJJ</h3>';
    console.log(elem.textContent); // '<h3>JSX - LJJ</h3>'
</script>

2-4 outerText

outerText 返回的值与 innerText 一致，它将删除当前节点并将其替换为给定的文本

<div class="box">
    <h3>hello Jsx</h3>
</div>
<script>
    // 获取 box 节点下的子节点
    let box = document.querySelector('.box');
    console.log(box.children);; // [h3]

    let elem = document.querySelector('h3');
    console.log(elem)
    elem.outerText = 'hello';
    // 删除了自身节点并替换文本
    console.log(box.children);; // []
</script>

2-5 insertAdjacentText

element.insertAdjacentText(position, element)

将一个给定的文本节点插入在相对于被调用的元素给定的位置，不会对文本中的标签进行解析

beforebegin — 将 text 文本插入到 elem 元素前
afterbegin — 将 text 文本插入到 elem 元素内部开头
beforeend — 将 text 文本插入到 elem 元素内部末尾
afterend — 将 text 文本插入到 elem 元素后

<div class="main">
    <div class="box">Hello jsx</div>
</div>

<script>
    // insertAdJacentText 
    // 将给定的文本插入到指定元素给定的位置，不会对标签解析
    let box = document.querySelector('.box');
    // 在box元素前插入
    box.insertAdjacentText('beforebegin', '元素前')
    // 插入box元素后
    box.insertAdjacentText('afterend', '元素后');
    // 插入 box 元素内开头
    box.insertAdjacentText('afterbegin', '元素内部前');
    // 插入box元素内结尾
    box.insertAdjacentText('beforeend', '元素内部后');
</script>

3. 节点管理

3-1 推荐方法

插入、移除和替换节点的方法：

node.append(nodes|strings) —— 节点内部结尾添加新节点或字符串
node.prepend(nodes|strings) —— 节点内部开始添加新节点或字符串
node.before(nodes|strings) —— 节点前面添加新节点或字符串
node.after(nodes|strings) —— 节点后面添加新节点或字符
node.replaceWith(nodes|strings) —— 将节点替换为新节点或字符串
node.remove() — 将节点移除

<div class="container">
    <div class="box">我是box</div>
    <div class="box-header">hello</div>
    <div class="box-body"></div>
</div>

<script>
    // 不解析标签
    let box = document.querySelector('.box');
    let boxHeader = document.querySelector('.box-header')
    let boxBody = document.querySelector('.box-body')
    // append 节点内部尾部添加
    box.append('<h3>节点内部尾部添加</h3>');

    // prepend 节点内部开始添加
    box.prepend('<h3>节点内部开始添加</h3>');

    // before 节点前面添加
    box.before('<h3>节点前面添加</h3>');

    // after 结尾后面添加
    box.after('<h3>结尾后面添加</h3>');

    // replaceWith 节点替换
    boxHeader.replaceWith('<h3>结尾后面添加</h3>');

    // remove 节点移除
    boxBody.remove();
</script>

3-2 古老方法

下面列举过去使用的操作节点的方法，现在不建议使用了（旧式方法）

parent.appendChild(node) —— 在当前节点内部结尾添加指定的子节点
- 如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将它从原先的位置移动到新的位置
parent.insertBefore(node, nextSibling) —— 在当前节点内部将一个指定的节点插入到另一个指定的节点
- 如果给定的子节点是对文档中现有节点的引用，insertBefore() 会将其从当前位置移动到新位置
parent.removeChild(node) —— 删除当前节点中指定的子节点
parent.replaceChild(newElem, node) —— 将指定的节点来替换当前节点指定的子节点

<div class="container">
    <div class="box">hello jsx</div>
    <div class="box-header">hello</div>
    <div class="box-body"></div>
</div>
    
<script>
    //  旧式方法，参数必须是一个节点类型
    // 在当前节点内部结尾添加指定的子节点
    let box = document.querySelector('.box');
    let boxBody = document.querySelector('.box-body')
    let container = document.querySelector('.container')
    let boxHeader = document.querySelector('.box-header')
    // 创建节点
    let child = document.createElement('div');
    child.innerHTML = '新创建节点';

    // 如果给定的节点是文档中现有的节点，则会改变新的位置
    box.appendChild(child);
    // 在当前节点内部将一个指定的节点插入到另一个指定的节点
    box.insertBefore(child, box.firstChild);

    // 删除当前节点中指定的子节点
    container.removeChild(boxBody);

    // 将指定的节点来替换当前节点指定的子节点
    container.replaceChild(child, boxHeader);
</script>

3-3 insertAdjacentHTML

element.insertAdjacentHTML(position, text)

将指定的 html 文本解析为 Element 元素，并将结果节点插入到 DOM 树中的指定位置，浏览器会对文本进行标签解析

beforebegin：元素自身的前面
afterbegin：插入元素内部的第一个子节点之前
beforeend：插入元素内部的最后一个子节点之后
afterend：元素自身的后面

<div class="parent">
    <div class="child">HELLO jsx</div>
    <div class="box"></div>
</div>
<script>
    // insertAdjacentHTML 会将HTML解析并插入到指定位置
    let elem = document.querySelector('.child');

    // 插入元素内部的第一个子节点之前
    elem.insertAdjacentHTML('afterbegin', '<h3>元素内部开始插入</h3>')
    // 插入元素内部的最后一个子节点之后
    elem.insertAdjacentHTML('beforeend', '<h3>元素内部结尾插入</h3>')
    // 元素自身的前面
    elem.insertAdjacentHTML('beforebegin', '<h3>元素自身前插入</h3>')
    // 元素自身的后面
    elem.insertAdjacentHTML('afterend', '<h3>元素自身后插入</h3>')
</script>

3-4 insertAdjacentElement

element.insertAdjacentElement(position, text)

将一个给定的元素节点插入到相对于被调用的元素的给定的一个位置

如果将被插入的元素节点已经存在于当前文档的文档树中，那么 insertAdjacentElement() 只会将它从原先的位置移动到新的位置

beforebegin：在该元素本身的前面
afterbegin：只在该元素当中, 在该元素第一个子节点前面
beforeend：只在该元素当中, 在该元素最后一个子节点后面
afterend：在该元素本身的后面

<div class="parent">
    <div class="child">HELLO jsx</div>
    <div class="box"></div>
</div>

<script>
    // insertAdjacentElement 将给定的元素插入到指定的位置
    let elem = document.querySelector('.child');
    // 新创建元素
    let creatElem = document.createElement('div');
    creatElem.innerHTML = 'Hello world'

    // 插入元素内部的第一个子节点之前
    elem.insertAdjacentElement('afterbegin', creatElem)
    // 插入元素内部的最后一个子节点之后
    elem.insertAdjacentElement('beforeend', creatElem)
    // 元素自身的前面
    elem.insertAdjacentElement('beforebegin', creatElem)
    // 元素自身的后面
    elem.insertAdjacentElement('afterend', creatElem)
</script>

3-5 DocumentFragment

DocumentFragment 不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会导致性能等问题

DocumentFragment 没有父节点
createDocumentFragment 创建的是文档碎片，节点类型 nodeType 为 11
继承自 node ，可以使用 node 的属性和方法
DocumentFragment 插入到 DOM 节点后则不可再操作
DocumentFragment 是一个构造函数，返回一个空的 DocumentFragment 对象

<div class="container"></div>

<script>
    // DocumentFragment 不是 dom 节点，它的变化不会触发树重新渲染
    function Fragment() {
        // let box = document.querySelector('.container');
        let fragment = new DocumentFragment();
        console.log(fragment);
       for (let i = 0; i < 100000; i++) {
           let divs = document.createElement('div');
           divs.append(i);
           fragment.append(divs);
        //    box.append(divs)
       }
        return fragment;
    }
    // Fragment();
    let box = document.querySelector('.container');
    box.append(Fragment())

    // 节点类型 nodeType 为 11
    let result = document.createDocumentFragment();
    console.log(result.nodeType); // 11
</script>

4. 获取 DOM 元素

4-1 `getElementById`

document.getElementById(id)

返回一个匹配特定 ID 的元素节点 Element 对象，若在当前 document 下没有找到，则返回 null

<div id="overview"></div>
<div id="description"></div>

<script>
    // 返回一个匹配的元素节点对象
    let elem = document.getElementById('overview');
    console.log(elem); // <div id="overview"></div>

    // 批量id获取
    function getElementByIds(id) {
        return id.map(item => document.getElementById(item))
    }
    let arr = getElementByIds(['overview', 'description'])
    for (const item of arr) {
        console.log(item)
        // <div id="overview"></div>
        // <div id="description"></div>
    }
</script>

4-2 `getElementsByName`

document.getElementsByName(name)

根据给定的 name 属性，返回一个包括所有给定 name 属性的元素节点集合

NodeList 节点列表集合会实时更新

<div name="overview">Hello HTML</div>
<div name="overview">Hello JavaScript</div>
    
<script>
    // 通过元素name属性获取
    let names = document.getElementsByName('overview');
    console.log(names);
    // NodeList(2) [div, div]
</script>

4-3 `getElementsByTagName`

document.getelementsByTagName(tag)

返回一个包括所有给定标签名称的元素的集合 HTMLCollent

HTMLCollent 集合会实时更新
* 通配符，特殊字符代表了所有元素

<div name="overview">Hello HTML</div>
<div name="overview">Hello JavaScript</div>

<script>
    // 通过元素标签获取元素集合HTMLCollent
    let names = document.getElementsByTagName('div');
    console.log(names);
    // HTMLCollection(2) [div, div, overview: div]
    
    // 返回document下所有的元素节点
    let all = document.getElementsByTagName('*');
    console.log(all);
    // HTMLCollection(10) [html, head, meta, meta, meta, title, body, div, div, script, viewport: meta, overview: div]
</script>

4-4 `getElementsByClassName`

document.getElementsByClassName(class1 class2 ...)

返回一个包含了所有指定类名的元素组成的集合 HTMLCollent

HTMLCollent 集合会实时更新
设置多个值时顺序无关，指包含这些 class 属性的元素

<div class="overview">Hello HTML</div>
<div class="overview">Hello JavaScript</div>
<!-- 元素包含多个值 -->
<div class="overview panel"></div>

<script>
    // getElementsByClassName 通过class属性获取元素
    let elem = document.getElementsByClassName('overview');
    console.log(elem);
    // HTMLCollection(2) [div.overview, div.overview]

    // 获取多个class属性值得元素
    let elem1 = document.getElementsByClassName('overview panel');
    console.log(elem1);
    // HTMLCollection [div.overview.panel]
</script>

4-5 `querySelector`

document.querySelector(css)

方法返回文档中与指定 css 选择器或 css 选择器组匹配的第一个Element元素节点对象

querySelector 只会匹配第一个匹配到的元素

<div class="overview">Hello HTML</div>
<div class="overview">Hello JavaScript</div>
<!-- 元素包含多个值 -->
<div class="overview panel"></div>
    
<script>
    // 通过css选择器获取元素，只会获取匹配到的第一个元素
    let query = document.querySelector('.overview');
    console.log(query);
    // <div class="overview">Hello HTML</div>
</script>

4-6 `querySelectorAll`

document.querySelectorAll(css)

返回与指定的 css 选择器组匹配的文档中的元素列表集合 NodeList，没有匹配的情况下为空 NodeList

获取的 NodeList 节点列表是静态的，添加或删除元素后不变
querySelectorAll 和 querySelector 支持任何 css 选择器，并且支持使用伪类

<div class="overview">Hello HTML</div>
<div class="overview">Hello JavaScript</div>
<div class="parent">
    <div id="main">
        <div class="sibling1">Hello Vue</div>
        <div class="sibling1">Hello WebPack</div>
    </div>
    <div class="box" name="fight">Hello CSS</div>
</div>
    
<script>
    // querySelectorAll通过css选择器匹配获取元素列表集合 NodeList
    let elems = document.querySelectorAll('.overview');
    console.log(elems); // NodeList(2) [div.overview, div.overview]

    // 可以通过任何选择器获取元素
    let id = document.querySelectorAll('#main');
    console.log(id);
    // NodeList [div#main]

    // 后代选择器
    let after = document.querySelectorAll('#main .sibling1');
    console.log(after);
    // NodeList(2) [div.sibling1, div.sibling1]

    // :nth-child()
    let nthChild = document.querySelectorAll('.sibling1:nth-child(1)');
    console.log(nthChild);
    // NodeList [div.sibling1]

    // 属性选择器
    let attr = document.querySelectorAll('.box[name="fight"]');
    console.log(attr)
    // NodeList [div.box]
</script>

4-7 `matches`

element.matches(selectorString)

用于检测元素是否是指定的 css 样式选择器匹配，如果匹配返回 true，否则返回 false

<div class="overview">Hello HTML</div>
<div class="overview" name="js">Hello JavaScript</div>
<div id="panel"></div>

<script>
    // 用于检测元素是否是指定css选择器匹配
    let elem = document.querySelectorAll('div');
    let result = [...elem].filter(item => {
        return item.matches('[name]') 
    })
    console.log(result[0]); 
    // <div class="overview" name="js">Hello JavaScript</div>
</script>

4-8 `closest`

targetElement.closest(selectors)

匹配特定选择器且离当前元素最近的祖先元素（也可以是当前元素本身），如果匹配不到，则返回 null

<div class="overview">Hello HTML</div>
<div class="overview" name="js">Hello JavaScript</div>
<div id="panel">
    <div class="sibling1">Hello Vue</div>
</div>
<script>
    // 用于匹配离指定选择器最近的祖先元素
    // 匹配不到返回 Null
    let elem = document.querySelector('.sibling1');
    console.log(elem.closest('.overview'))
    // <div class="overview" name="js">Hello JavaScript</div>
</script>

5. DOM 元素属性与特性

当浏览器加载页面时，它会解析 HTML 并从中生成 DOM 对象

对于元素节点，大多数标准的 HTML 特性（attributes）会自动变成 DOM 对象的属性（properties）

5-1 DOM 属性

大多数标准的 HTML 特性（attributes）会自动变成 DOM 对象的属性（properties）

操作 DOM 对象属性区分大小写，多单词属性常用驼峰式命名规则
DOM 属性是多类型不总是字符串类型的，也可能是布尔类型、对象类型等
style 属性为 CSSStyleDeclaration 对象
DOM 对象不同生成的属性也不同

<div class="container" style="color: #3496db">hello dom</div>
<input type="checkbox" name="check" id="check" checked>
<a href="http://www.baidu.com"></a>

<script>
    // DOM属性：通过标准的HTML特性转换为DOM对象属性
    // 获取class属性
    let elem = document.querySelector('.container');
    console.log(elem.className)

    // 给元素对象添加属性
    elem.tool = {
        name: 'jsx'
    }
    console.log(elem.tool.name); // jsx

    // DOM属性多类型
    let check = document.querySelector('[name="check"]');
    // 布尔类型
    console.log(check.checked); // true
    // 对象类型
    console.log(elem.style); // CSSStyleDeclaration 对象
    // href属性是一个完整的url
    // 当HTML特性里的url为相对路径则会是返回一个完整路径
    // 当HTML特性中是一个网路路径，则返回网络路径
    let url = document.querySelector('a');
    console.log(url.href); //
</script>

5-2 HTML 特性

在 HTML 中，标签可能拥有特性（attributes）

一个元素的标准的特性对于另一个元素可能是未知的（别的元素可能没有此特性）

当浏览器解析 HTML 文本，并根据标签创建 DOM 对象时，浏览器会辨别标准的特性并以此创建 DOM 属性

对于标准的属性可以使用 DOM 属性的方式进行操作，但对于标签的非标准的定制属性则不可以

所有特性都可以通过使用以下方法进行访问：

elem.hasAttribute(name) — 检查特性是否存在
elem.getAttribute(name) — 获取这个特性值
elem.setAttribute(name, value) — 设置这个特性值
elem.removeAttribute(name) — 移除这个特性
elem.attributes(name, value) — 读取所有特性

<div class="container" id="container" color="blue" content="jsx">hello dom</div>
<div class="box">hello world</div>

<script>
    // attributes 是可迭代对象
    let elem = document.querySelector('.container');
    let box = document.querySelector('.box');
    for (const { name, value } of elem.attributes) {
        console.log(name, value)
        // class container
        // id container
        // color blue
        // content jsx
    }
    // getAttribute 获取属性值
    console.log(elem.getAttribute('id')); // container
    // hasAttribute 检查是否有此特性
    console.log(elem.hasAttribute('class')); //true
    // setAttribute 设置特性
    box.setAttribute('id', 'box');
    console.log(box);
    // <div class="box" id="box">hello world</div>
    // 移除属性
    box.removeAttribute('id');
    console.log(box);
    // <div class="box">hello world</div>
</script>

attributes 集合是可迭代对象，该对象将所有元素的特性，作为 name 和 value 属性存储在对象中

5-3 自定义 HTML 特性

定义特征并使用 getAttribute 等方法管理，但很容易造成与标签的现在或未来属性重名，为了避免冲突，存在 data-* 特性

所有以 data- 开头的特性均被保留供开发者使用
元素中以 data- 为前缀的属性会添加到属性集中
使用元素的 dataset 可获取属性集中的属性
改变 dataset 的值也会影响到元素上

<div class="container" data-content="jsx"></div>
<div class="box" data-content-title="hello"></div>

<script>
    //  自定义特性 date-
    let elem = document.querySelector('.container');
    // 通过dateset访问
    let dataset = elem.dataset.content
    console.log(dataset); // jsx

    // 多单词访问 用驼峰命名方式
    let elem1 = document.querySelector('.box');
    let dataset1 = elem1.dataset.contentTitle;
    console.log(dataset1); // hello

    // 值会影响元素
    elem1.dataset.contentTitle = 'hello data';
    console.log(elem1)
    // <div class="box" data-content-title="hello data"></div>
</script>

5-4 特性与属性同步

当一个标准的特性被改变，对应的属性也会自动更新，大部分更改会进行同步操作

input.value 改变特性值 value 会更新属性，但是属性的更改不会影响特性

<div class="container" name="box"></div>
<input type="text" value="hello">

<script>
    //  属性同步
    let elem = document.querySelector('.container');
    elem.setAttribute('name', 'box1')
    console.log(elem);
    // 改变属性name,同步到HTML特性
    // <div class="container" name="box1"></div>
    
    // 大部分同步，也有特殊不同步
    let input = document.querySelector('input');
    // 改变特性会更新属性
    input.setAttribute('value', 'jsx');
    console.log(input);
    // <input type="text" value="jsx">

    // 改变属性不会更新特性
    input.value = 'ljj';
    console.log(input);
    // <input type="text" value="jsx">
</script>

6. 设置样式

CSS 修改样式可以通过两种方式来实现：

通过更改元素的 class 属性，首选通过 CSS 类的方式来添加样式
通过 style 属性设置行样式

6-1 className

获取或设置指定元素的 class 属性的值

<div class="container"></div>

<script>
    // 获取指定元素的class
    // 通过class属性来修改样式
    let elem = document.querySelector('.container');
    console.log(elem.className); //container

    // 设置样式
    elem.className = 'container blue';
    elem.className = 'container puple'
</script>

6-2 classList

返回一个 class 属性的 DOMTokenList 集合，也可以通过 classList 属性操作

方法	说明
`node.classList.add`	添加类名
`node.classList.remove`	删除类名
`node.classList.toggle`	切换类名
`node.classList.contains`	类名检测

<div class="container"></div>

<script>
    // classList 返回一个 DOMTokenList 集合
    let elem = document.querySelector('.container');
    elem.className = 'container blue';
    elem.className = 'container puple'
    console.log(elem.classList);
    // DOMTokenList(2) ['container', 'puple', value: 'container puple']

    // 添加类名
    elem.classList.add('blue'); // container puple blue

    // 删除类名
    elem.classList.remove('puple'); // container blue

    // 切换类名
    elem.classList.toggle('puple'); // container blue puple

    // 类名检测
    console.log(elem.classList.contains('puple')); // true
</script>

6-3 设置行内样式

elem.style 属性是一个对象，可以通过 style 对象来设置行内元素的样式特性

多个单词的属性使用驼峰进行命名
书写时需要添加 CSS 单位
像 -moz-border-radius 和 -webkit-border-radius 这样的浏览器前缀属性，也遵循同样的规则：连字符 - 表示大写

<div class="container"></div>

<script>
    // 获取元素
    let elem = document.querySelector('.container');
    // 需要添加单位
    elem.style.width = "100px";
    elem.style.height = "100px";

    // 多单词驼峰式书写
    elem.style.backgroundColor = "#ff0000";

    // 浏览器前缀写法
    elem.style.WebkitBorderRadius = '20px';
</script>

重置样式，直接将其赋值为空

elem.style.backgroundColor = "";

使用 cssText 属性可以批量设置行样式，属性名和写 CSS 一样不需要考虑驼峰命名

<div class="box"></div>

<script>
    // cssText多行批量设置，不需要驼峰式
    let box = document.querySelector('.box');
    box.style.cssText = `
        width: 100px;
        height: 100px;
        background-color: rgb(239 127 102);
        -webkit-border-radius: 20px;
        `
</script>

通过 setAttribute 改变元素 style 特征来批量设置样式

// 通过setAttribute 设置样式
<div class="wrapper"></div>

<script>
    let wrapper = document.querySelector('.wrapper');
wrapper.setAttribute('style', 'background-color: rgb(147 52 219);width: 100px;height: 100px; -webkit-border-radius: 20px;')
</script>

6-4 获取所有样式

style 对象只能获取元素行内定义的样式

getComputedStyle 可获取所有应用在元素上的样式属性，返回的是计算后的样式属性，所以取得的单位和定义时的可能会有不同

window.getComputedStyle(element, pseudoElt)

element：获取样式属性的元素
pseudoElt：指定匹配的伪元素，普通元素可以省略或者为 null

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: rgb(239 127 102);
        -webkit-border-radius: 20px;
    }
    .box::after {
        background-color: rgb(139, 104, 234);
        width: 200px;
    }
</style>

<div class="box"></div>

<script>
    // getComputedStyle 获取元素所有样式
    let box = document.querySelector('.box');
    let elemStyle = window.getComputedStyle(box);
    console.log(elemStyle.width); // 100px

    // 获取伪元素的样式
    let elemHover = window.getComputedStyle(box, '::after');
    console.log(elemHover.width); // 200px
</script>