原生js常用操作dom总结

美好的周末居然没有出去溜达～～～那就对上半年使用原生js开发项目时常用的操作DOM方法做个总结、记录

DOM，我们可以理解为JavaScript访问、操作（新增元素、删除元素、修改元素、）HTML的一个接口。

常用的DOM方法有：

1、getElementById(id)，参数是string，获取带有制定id的元素；

2、appendChild(node)，参数是对象，插入新的子节点；

3、removeChild(node)，参数是对象，移除子节点；

常用DOM属性有：

1、innerHTML，元素的文本值；

2、parentNode，元素的父节点；

3、childNodes，元素的子节点集合（空字符、换行字符、文本）；

下面代码里罗列了一些自己用的较多的方法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>原生js操作DOM方法</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #header, #content {
            width: 50vw;
            height: 40vh;
            border: 1px solid red;
            margin: 10vh auto;
        }
    </style>
</head>
<body>
    <header id="header">
        <div id="content" class="divContent">
            这是content
            <span id="span">这是span</span>
            <div id="div02">这是div02</div>
        </div>
        <div id="content2">这是content2</div>11
    </header>
</body>
</html>

    <script>
        let header = document.getElementById("header");
        let content = document.getElementById("content");
        let span = document.getElementById("span");
        let div02 = document.getElementById("div02");
        let content2 = document.getElementById("content2");

        // 获取全部子元素
        let headerChilds = header.children;
        // console.info(headerChilds);

        // 获取第一个子节点，包括文本（空字符、换行字符、文本）、元素
        let firstChild = header.firstChild;
        // console.info(firstChild)

        // 获取子节点的集合，集合包括元素和文本（空字符、换行字符、文本）
        let firstChild1 = header.childNodes;
        // console.info(firstChild1)
        
        // 获取元素的属性，如ID、class
        let attributes = content.attributes;
        // console.info(attributes)

        // 获取直接父节点(元素)
        let parent = span.parentElement;
        // console.info(parent);

        let parentNode = span.parentNode;
        // console.info(parentNode);

        // console.info(parent == parentNode);     // true

        // 获取兄弟节点（包含元素下一个节点为文本的节点）
        let content2Text = content.nextSibling;
        // console.info (content2Text);        // text

        // 获取下一个兄弟元素(非空文本及换行符)
        let nextElementSibling = content.nextElementSibling;
        // console.info(nextElementSibling);

        // 获取上一个兄弟元素（非空文本及换行符）
        let previousElementSibling = content2.previousElementSibling;
        console.info(previousElementSibling);






    </script>

原生js常用操作dom总结

猜你喜欢