JavaScript DOM总结（文档操作）

鹿蹊zz

已于 2022-07-11 14:56:12 修改

阅读量242

点赞数 7

分类专栏： JavaScript 文章标签： javascript 前端 vscode html DOM

于 2022-07-09 17:04:01 首次发布

本文链接：https://blog.csdn.net/m0_46461853/article/details/125693128

版权

JavaScript 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

1、查找 HTML 元素

（1）方法

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

（2）案例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 创建一个按钮-->
    <button id="btn1">我是按钮1</button>

    <button class="btn2">我是按钮2</button>

    <!-- 创建一个无序列表 -->
    <ul class="list">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
    </ul>

    <script>
        // 1 通过id获取按钮节点对象 
        var btn = document.getElementById("btn1");
        console.log(btn);

        // 2 通过标签名获取按钮节点对象数组
        var btn = document.getElementsByTagName("button");
        console.log(btn);

        // 3 通过类名获取按钮节点对象数组
        var btn = document.getElementsByClassName(".btn2");
        console.log(btn);

        // 4  通过CSS选择器选择该按钮
        var btn = document.querySelector(".btn2");
        console.log(btn);

        // 5 通过CSS选择器选择该列表的所有li
        var list = document.querySelectorAll(".list li");
        console.log(list);
    </script>
</body>

</html>

2、获取 HTML 的值

（1）方法

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

（2）案例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 创建一个按钮，然后获取按钮的文本内容 -->
    <button id="btn">我是按钮</button>

    <script>
        var btn = document.getElementById("btn");
        console.log(btn.innerText);
    </script>


    <!-- 创建一个div，然后在div中插入一个h6标题，获取div中的html代码 -->
    <div id="title">
        <h6>我是小标题</h6>
    </div>

    <script>
        var title = document.getElementById("title");
        console.log(title.innerHTML);
    </script>


    <!-- 创建一个超链接，默认为空，设置href属性为https://www.baidu.com ，
         使用JavaScript代码读取href属性 -->
    <a id="a" href="https://www.baidu.com">打开百度，你就知道！</a>

    <script>
        var a = document.getElementById("a");
        console.log(a.href);
        console.log(a.getAttribute("href"));
    </script>


    <!-- 创建一个正方形div，默认颜色为红色，使用JavaScript代码获取div的宽度 -->
    <div style="width: 100px;height: 100px;background: red;" id="box"></div>
    <script>
        var box = document.getElementById("box");
        console.log(box.style.width);
    </script>

    <!-- 编写一段兼容性代码，用来获取任意标签的文本内容 -->
    <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>

3、改变 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）案例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 创建一个按钮，然后改变按钮的文本内容 -->
    <button id="btn">我是按钮</button>

    <script>
        var btn = document.getElementById("btn");
        btn.innerText = "我是JavaScript的按钮";
        console.log(btn);
    </script>


    <!-- 创建一个div，然后在div中插入一个h1标题 -->
    <div id="title">小标题</div>

    <script>
        var title = document.getElementById("title");
        title.innerHTML = "<h1>大标题</h1>";
        console.log(title);
    </script>

    <!-- 创建一个超链接，默认为空，使用JavaScript代码设置href属性为https://www.baidu.com -->
    <a id="a" href="">打开百度，你就知道！</a>

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

        a.href = "https://www.baidu.com";
        // a.setAttribute("href", "https://www.baidu.com");//两种方法均可

        console.log(a);
    </script>

    
    <!-- 创建一个正方形div，默认颜色为红色，使用JavaScript代码改变为绿色 -->
    <div style="width: 100px;height: 100px;background: red;" id="box"></div>

    <script>
        var box = document.getElementById("box");
        box.style.background = "green";
        console.log(box);
    </script>

</body>

</html>

4、修改 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）案例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 01 创建一个ul列表，然后在该列表中追加4个li标签 -->
    <script>

        // 	创建 HTML 元素节点
        var ul = document.createElement("ul");

        var li1 = document.createElement("li");
        // 方法一： 
        var text1 = document.createTextNode("列表项1"); //  创建 HTML 文本节点
        li1.appendChild(text1);
        ul.appendChild(li1);

        //  方法二：
        // li1.innerHTML = "列表项1";
        // ul.appendChild(li1);

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

        var li3 = document.createElement("li");
        var text3 = document.createTextNode("列表项3");
        li3.appendChild(text3);
        ul.appendChild(li3);

        var li4 = document.createElement("li");
        var text4 = document.createTextNode("列表项4");
        li4.appendChild(text4);
        ul.appendChild(li4);

        document.getElementsByTagName("body")[0].appendChild(ul);


        // 方法三：
        var ul = document.createElement("ul");

        var li1 = "<li>列表项1</li>";
        var li2 = "<li>列表项2</li>";
        var li3 = "<li>列表项3</li>";
        var li4 = "<li>列表项4</li>";
        ul.innerHTML = li1 + li2 + li3 + li4;
        document.getElementsByTagName("body")[0].appendChild(ul);

    </script>


    <!-- 02  创建一个ul列表，里边有四个li子元素，删除第一个li，替换最后一个li -->
    <ul id="ul1">
        <li id="first1">列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li id="last">列表项4</li>
    </ul>

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

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

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

    <!-- 03  创建一个ul列表，里边有四个li子元素，在第一个li前边插入一个id为zero的li -->
    <ul id="ul2">
        <li id="first2">列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
    </ul>
    <script>
        var ul = document.getElementById("ul2");
        var first = document.getElementById("first2");
        var zero = document.createElement("li");
        zero.innerHTML = "列表1前的新增";
        ul.insertBefore(zero, first);
    </script>
    
</body>

</html>

5、查找 HTML 父子

（1）方法

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

（2）案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<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");

    // 返回元素的父节点 parentNode
    console.log(ul.parentNode);
    // 返回元素的父元素 parentElement
    console.log(ul.parentElement);

    console.log("===============");
    
    // 返回元素的一个子节点的数组（包含空白文本Text节点）
    console.log(box.childNodes);
    // 返回元素的一个子元素的集合（不包含空白文本Text节点）
    console.log(box.children);

    console.log("===============");

    // 返回元素的第一个子节点（包含空白文本Text节点）
    console.log(ul.firstChild);
    // 返回元素的第一个子元素（不包含空白文本Text节点）
    console.log(ul.firstElementChild);

    // 返回元素的最后一个子节点（包含空白文本Text节点）
    console.log(ul.lastChild);
    // 返回元素的最后一个子节点（不包含空白文本Text节点）
    console.log(ul.lastElementChild);

    console.log("===============");

    // 返回某个元素紧接之前节点（包含空白文本Text节点）
    console.log(two.previousSibling);
    // 返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）
    console.log(two.previousElementSibling);
    // 返回某个元素紧接之后节点（包含空白文本Text节点）
    console.log(two.nextSibling);
    // 返回指定元素的后一个兄弟元素（相同节点树层中的下一个元素节点）
    console.log(two.nextElementSibling);
</script>
</body>
</html>

鹿蹊zz

关注

7
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM总结（文档操作）

目录DOM文档操作1、查找 HTML 元素2、获取 HTML 的值3、改变 HTML 的值4、修改 HTML 元素5、查找 HTML 父子（1）方法通过CSS选择器选择多个元素。（2）案例：（1）方法（2）案例：（1）方法（2）案例（1）方法（2）案例（1）方法（2）案例...
复制链接

扫一扫