11-DOM相关

获取元素

closest()方法可以沿着DOM树向上遍历，直到找到匹配的选择器的第一个祖先元素（包括它自己）。然后你可以从这个祖先元素中选择你想要的子元素。

// 从按钮开始，找到最近的.item容器
let itemContainer = document.getElementById('myId').closest('.item');

// 在.item容器内查找img元素
let imgElement = itemContainer.querySelector('.item-img img');

监听DOM

MutationObserver 可以实现对dom的监听，包括子节点，属性等等，很好用

html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="xx" style="height: 100px;border: 1px solid #000"></div>
<div>
    <button onclick="add()">新增子节点</button>
    <button onclick="del()">删除子节点</button>
    <button onclick="add2()">新增孙子节点</button>
    <button onclick="destroyObserver()">销毁监听</button>
</div>
</body>
<script>
    //监听的dom元素
    let targetNode = document.querySelector(`#xx`);
    function add(){
        let div = document.createElement("div");
        div.innerText = 'hh'
        targetNode.append(div);
    }
    function add2(){
        let div = document.createElement("div");
        div.innerText = 'ss'
        targetNode.firstChild?.append(div);
    }
    function del(){
        let child = targetNode.childNodes
        if (child && child.length > 0){
            targetNode.removeChild(child[0]);
        }
    }

    // 监听的配置，也就是要监听哪些东西
    let config = {
        attributes: true,
        childList: true,
        //布尔值，表示是否将该观察器应用于该节点的所有后代节点
        subtree: true
    };

    // dom变化之后的回调函数
    const mutationCallback = (mutationsList) => {
        for(let mutation of mutationsList) {
            let type = mutation.type;
            switch (type) {
                case "childList":
                    console.log("A child node has been added or removed.");
                    break;
                case "attributes":
                    console.log(`The ${mutation.attributeName} attribute was modified.`);
                    break;
                case "subtree":
                    console.log(`The subtree was modified.`);
                    break;
                default:
                    break;
            }
        }
    };
    // 创建一个链接到回调函数的观察者实例
    let observer = new MutationObserver(mutationCallback);
    // 然后监听DOM 元素
    observer.observe(targetNode, config);


    // 取消监听
    function destroyObserver() {
        observer.disconnect();
        console.log("监听已销毁");
    }
</script>
</html>

DOM插入子元素

使用 innerHTML

这是最简单的方法之一，但需要注意这会替换元素中的所有内容。

const element = document.getElementById('myElement');
element.innerHTML += '<div>这是一个新的片段</div>';

使用insertAdjacentHTML

这个方法允许你更灵活地插入 HTML 片段而不替换元素中已有的内容。

const element = document.getElementById('myElement');
element.insertAdjacentHTML('beforeend', '<div>这是一个新的片段</div>');

在 insertAdjacentHTML 方法中，第二个参数指定了如何插入新内容。可用的选项包括：

beforebegin: 在元素之前
afterbegin: 在元素内部的最开始
beforeend: 在元素内部的最后
afterend: 在元素之后

html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 示例</title>
</head>
<body>
    <div id="myElement">
        <p>原始内容</p >
    </div>
    <button id="addContent">添加内容</button>

    <script>
        document.getElementById('addContent').addEventListener('click', () => {
            // 使用 insertAdjacentHTML 添加内容
            const element = document.getElementById('myElement');
            element.insertAdjacentHTML('beforeend', '<div>这是一个新的片段</div>');
        });
    </script>
</body>
</html>

使用appendChild

如果你想创建元素并添加事件，也可以使用 appendChild 方法：

const element = document.getElementById('myElement');
const newDiv = document.createElement('div');
newDiv.textContent = '这是一个新的片段';
element.appendChild(newDiv);

字符串转DOM

function parseHTML(htmlString) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(htmlString, 'text/html');
    return doc.body.firstChild; // 返回第一个子元素
}

const htmlString = '<div><p>Hello, World!</p ></div>';
const domElement = parseHTML(htmlString);
console.log(domElement); // 输出: <div><p>Hello, World!</p ></div>

11-DOM相关 ​

获取元素 ​

监听DOM ​

DOM插入子元素 ​

使用 innerHTML ​

使用insertAdjacentHTML ​

使用appendChild ​

字符串转DOM ​