DOM文档操作

鸣鲷有柒

已于 2022-11-03 13:43:13 修改

阅读量251

点赞数

文章标签： css html 前端

于 2022-11-03 13:39:11 首次发布

本文链接：https://blog.csdn.net/m0_74343097/article/details/127666091

版权

文档对象代表网页，如果希望访问 HTML 页面中的任何元素，那么总是从访问 document 对象开始。

一、查找 HTML 元素

1. 方法介绍

document.getElementById('id') 通过元素 id 来查找元素。
document.getElementsByTagName('name') 通过标签名来查找元素。
document.getElementsByClassName('name') 通过类名来查找元素。
document.querySelector('CSS选择器') 通过CSS选择器选择一个元素。
document.querySelectorAll('CSS选择器') 通过CSS选择器选择多个元素。

2. 方法演示

<body>
    <button id="btn">我是按钮</button>
    <button>我是按钮</button>
    <button class="btn2">我是按钮</button>
    <button class="btn3">我是按钮</button>

    <ul class="list">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
    </ul>

    <script>
        var btn = document.getElementById("btn");
        console.log(btn);//创建一个按钮，通过id获取按钮节点对象

        var btn1 = document.getElementsByTagName("button");
        console.log(btn1);//创建一个按钮，通过标签名获取按钮节点对象数组

        var btn2 = document.getElementsByClassName("btn2");
        console.log(btn2);//创建一个按钮，通过类名获取按钮节点对象数组

        var btn3 = document.querySelector(".btn3");
        console.log(btn3);//创建一个按钮，通过类名获取按钮节点对象数组

        var list = document.querySelectorAll(".list li");
        console.log(list);//创建一个按钮，通过类名获取按钮节点对象数组
    </script>
</body>

二、获取 HTML 的值

1. 方法介绍

元素节点.innerText 获取 HTML 元素的 inner Text。
元素节点.innerHTML 获取 HTML 元素的 inner HTML。
元素节点.属性获取 HTML 元素的属性值。
元素节点.getAttribute('attribute') 获取 HTML 元素的属性值。
元素节点.style.样式获取 HTML 元素的行内样式值。

2. 方法演示

  <body>
    <button id="btn">我是按钮</button>

    <div id="box">
        <h1>我是Box中的大标题</h1>
    </div>

    <a id="a" href="https://www.baidu.com">打开百度，你就知道！</a>
   
    <div style="width: 100px;height: 100px;background: red;" id="box2"></div>

    <script>
        //创建一个按钮，然后获取按钮的文本内容
        var btn = document.getElementById("btn");
        console.log(btn.innerText);

        //创建一个div，然后在div中插入一个h1标题，获取div中的html代码
        var box = document.getElementById("box");
        console.log(box.innerHTML);

        //创建一个超链接，默认为空，设置href属性为https://www.baidu.com ，使用JavaScript代码读取href属性
        var a = document.getElementById("a");
        console.log(a.href);
        //创建一个超链接，默认为空，设置href属性为https://www.baidu.com ，使用JavaScript代码读取href属性
        console.log(a.getAttribute("href"));

        //创建一个正方形div，默认颜色为红色，使用JavaScript代码获取div的宽度
        var box = document.getElementById("box2");
        console.log(box.style.width);
    </script>
</body>

拓展练习：编写一段兼容性代码，用来获取任意标签的文本内容

<body>
    <a href="https://www.baidu.com" id="a">打开百度，你就知道！</a>

    <script>
        var a = document.getElementById("a");
        console.log(getInnerText(a));

        /*获取任意标签的内容*/
        function getInnerText(element) {
            // 判断浏览器是否支持textContent,如果支持，则使用textContent获取内容，否则使用innerText获取内容。
            if (typeof element.textContent == "undefined") {
                return element.innerText;
            } else {
                return element.textContent;
            }
        }
    </script>
</body>

三、改变 HTML 的值

1. 方法介绍

元素节点.innerText = new text content 改变元素的 inner Text。
元素节点.innerHTML = new html content 改变元素的 inner HTML。
元素节点.属性 = new value 改变 HTML 元素的属性值。
元素节点.setAttribute(attribute, value) 改变 HTML 元素的属性值。
元素节点.style.样式 = new style 改变 HTML 元素的行内样式值。

2. 方法演示

<body>
    <button id="btn">我是按钮</button>
    <div id="box"></div>
    <a id="a" href="">打开百度，你就知道！</a>
    <div style="width: 100px;height: 100px;background: red;" id="box"></div>

    <script>
        //创建一个按钮，然后改变按钮的文本内容
        var btn = document.getElementById("btn");
        btn.innerText = "我是JavaScript的按钮";
        console.log(btn);

        //创建一个div，然后在div中插入一个h1标题
        var box = document.getElementById("box");
        box.innerHTML = "<h1>我是Box中的大标题</h1>";
        console.log(box);

        //创建一个超链接，默认为空，使用JavaScript代码设置href属性为https://www.baidu.com **
        var a = document.getElementById("a");
        a.href = "https://www.baidu.com";
        console.log(a);

        var a = document.getElementById("a");
        a.setAttribute("href", "https://www.baidu.com");
        console.log(a);

        //创建一个正方形div，默认颜色为红色，使用JavaScript代码改变为绿色
        var box = document.getElementById("box");
        box.style.background = "green";
        console.log(box);
    </script>
</body>

注意：如果CSS的样式名中含有-，这种名称在JS中是不合法的比如background-color，需要将这种样式名修改为驼峰命名法，去掉-，然后将-后的字母大写，我们通过style属性设置的样式都是行内样式，同样的获取也是行内样式，而行内样式有较高的优先级，所以通过JS修改的样式往往会立即显示，但是如果在样式中写了!important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要为样式添加!important

拓展练习：编写一段兼容性代码，用来设置任意标签的文本内容

<body>
    <a href="https://www.baidu.com" id="a">打开百度，你就知道！</a>

    <script>
        var a = document.getElementById("a");
        setInnerText(a, "你要打开百度吗？");
        console.log(getInnerText(a));

        /*获取任意标签的内容*/
        function getInnerText(element) {
            // 判断浏览器是否支持textContent,如果支持，则使用textContent获取内容，否则使用innerText获取内容。
            if (typeof element.textContent == "undefined") {
                return element.innerText;
            } else {
                return element.textContent;
            }
        }

        /*设置任意标签的内容*/
        function setInnerText(element, text) {
            // 判断浏览器是否支持textContent,如果支持，则使用textContent设置内容，否则使用innerText设置内容。
            if (typeof element.textContent == "undefined") {
                return element.innerText = text;
            } else {
                return element.textContent = text;
            }
        }
    </script>
</body>

四、修改 HTML 元素

1. 方法介绍

document.createElement(element) 创建 HTML 元素节点。
document.createAttribute(attribute) 创建 HTML 属性节点。
document.createTextNode(text) 创建 HTML 文本节点。
元素节点.removeChild(element) 删除 HTML 元素。
元素节点.appendChild(element) 添加 HTML 元素。
元素节点.replaceChild(element) 替换 HTML 元素。
元素节点.insertBefore(element) 在指定的子节点前面插入新的子节点。

2. 方法演示

（1）案例演示：创建一个空的ul列表，然后在该列表中追加2个li标签

方法1:

<body>
    <script>
        var ul = document.createElement("ul");

        var li1 = document.createElement("li");
        var text1 = document.createTextNode("列表项1");
        li1.appendChild(text1);
        ul.appendChild(li1);

        var li2 = document.createElement("li");
        var text2 = document.createTextNode("列表项2");
        li2.appendChild(text2);
        ul.appendChild(li2);

        document.getElementsByTagName("body")[0].appendChild(ul)
    </script>
</body>

方法2：

<body>
<script>
    var ul = document.createElement("ul");

    var li1 = document.createElement("li");
    li1.innerHTML = "列表项1";
    ul.appendChild(li1);

    var li2 = document.createElement("li");
    li2.innerHTML = "列表项2";
    ul.appendChild(li2);

    document.getElementsByTagName("body")[0].appendChild(ul);
</script>
</body>

方法3：

<body>
    <script>
        var ul = document.createElement("ul");

        var li1 = "<li>列表项1</li>";
        var li2 = "<li>列表项2</li>";
        ul.innerHTML = li1 + li2;

        document.getElementsByTagName("body")[0].appendChild(ul);
    </script>
</body>

（2）案例演示：创建一个ul列表，里边有四个li子元素，删除第一个li，替换最后一个li

<body>
    <ul id="ul">
        <li id="first">列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li id="last">列表项4</li>
    </ul>

    <script>
        var ul = document.getElementById("ul");
        var first = document.getElementById("first");
        var last = document.getElementById("last");

        /*删除第一个*/
        ul.removeChild(first);

        /*替换最后一个*/
        var replaceLi = document.createElement("li");
        replaceLi.innerHTML = "列表4的替换";
        ul.replaceChild(replaceLi, last);
    </script>
</body>

（3）案例演示：创建一个ul列表，里边有四个li子元素，在第一个li前边插入一个id为zero的li

<body>
    <ul id="ul">
        <li id="first">列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
    </ul>

    <script>
        var ul = document.getElementById("ul");
        var first = document.getElementById("first");

        var zero = document.createElement("li");
        zero.innerHTML = "列表0的新增";

        ul.insertBefore(zero, first);
    </script>
</body>

五、查找 HTML 父子

1. 方法介绍

元素节点.parentNode 返回元素的父节点。
元素节点.parentElement 返回元素的父元素。
元素节点.childNodes 返回元素的一个子节点的数组（包含空白文本Text节点）。
元素节点.children 返回元素的一个子元素的集合（不包含空白文本Text节点）。
元素节点.firstChild 返回元素的第一个子节点（包含空白文本Text节点）。
元素节点.firstElementChild 返回元素的第一个子元素（不包含空白文本Text节点）。
元素节点.lastChild 返回元素的最后一个子节点（包含空白文本Text节点）。
元素节点.lastElementChild 返回元素的最后一个子元素（不包含空白文本Text节点）。
元素节点.previousSibling 返回某个元素紧接之前节点（包含空白文本Text节点）。
元素节点.previousElementSibling 返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）。
元素节点.nextSibling 返回某个元素紧接之后节点（包含空白文本Text节点）。
元素节点.nextElementSibling 返回指定元素的后一个兄弟元素（相同节点树层中的下一个元素节点）。

2. 方法演示

<body>
    <div id="box">
        <ul id="ul">
            <li><a href="https://www.baidu.com">我是超链接1</a></li>
            <li id="two"><a href="https://www.baidu.com">我是超链接2</a></li>
            <li><a href="https://www.baidu.com">我是超链接3</a></li>
            <li><a href="https://www.baidu.com">我是超链接4</a></li>
        </ul>
    </div>

    <script>
        var box = document.getElementById("box");
        var ul = document.getElementById("ul");
        var two = document.getElementById("two");

        console.log(ul.parentNode);
        console.log(ul.parentElement);
        console.log("===============");

        console.log(box.childNodes);
        console.log(box.children);
        console.log("===============");

        console.log(ul.firstChild);
        console.log(ul.firstElementChild);
        console.log(ul.lastChild);
        console.log(ul.lastElementChild);
        console.log("===============");

        console.log(two.previousSibling);
        console.log(two.previousElementSibling);
        console.log(two.nextSibling);
        console.log(two.nextElementSibling);
    </script>
</body>