JavaScript（DOM节点操作）

最新推荐文章于 2023-03-06 14:43:51 发布

Bugxiu_fu

最新推荐文章于 2023-03-06 14:43:51 发布

阅读量510

点赞数

文章标签： javascript webview elementui

本文链接：https://blog.csdn.net/Bugxiu_fu/article/details/123374379

版权

DOM节点方式：利用节点层级关系获取元素

利用父子兄节点关系获取元素。

节点：网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示。

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

元素节点 nodeType --> 1 

属性节点 nodeType --> 2 

文本节点 nodeType --> 3（文本节点包含文字、空格、换行等）

通过属性去获取元素：

<ul id="oUl">
    <li><li>
    <li><li>
    <li><li>
    </ul>
var oUl=document.getElementById("oUl");
var li3=oUl.childen[2];

console.dir();//显示所有属性

获取父子级标签:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <ul id="myDemo">
            <li><a href="">111</a></li>
            <li>item1</li>
            <li>item2</li>
            <p>ajdhfkjsa</p>
            <li>item3</li>
            <div>akjshdkjas</div>
            <li>item4</li>
            <ol>
                <li>sb1</li>
                <li>sb2</li>
                <li>sb3</li>
                <p>akjdshkjsa</p>
                <li>sb4</li>
            </ol>
            <li>item5</li>
        </ul>
        <script type="text/javascript">
            //获取父标签
            var myDemo = document.getTrackById("myDemo");
            /*获取指定标签下的第一个节点(包含文本节点，空格，属性，标签)    parentNode.firstChild*/
            // firstChild 根据指定的节点获取改节点下的第一个子节点(标准格式)
            // console.log(myDemo.firstChild);
            //根据指定的节点获取改节点下的第一个元素子节点(不包含文本节点)
            console.log(myDemo.firstElementChild);


            /*获取指定标签下的第一个节点(包含文本节点，空格，属性，标签)    parentNode.lastChild*/
            // lastChild 获取指定节点下的最后一个子节点的内容
            // console.log(myDemo.lastChild);
            // innerHTML  获取非表单元素中的文本内容
            //获取指定节点下的最后一个子节点的内容(不包含文本节点)
            console.log(myDemo.lastElementChild.innerHTML);


            /*根据子标签获取父标签    node.parentNode*/
            //获取父标签内容
            var first = myDemo.firstElementChild;
            //根据 first 节点获取父节点
            // console.log(first.parentNode);
            console.log(first.parentElement);

            //获取指定节点下的所有子节点(包含文本节点)
            // console.log(myDemo.childNodes);
            //获取指定节点下的所有子节点(不包含文本节点)
            console.log(myDemo.children);
            //获取第三个子节点
            Console.log(myDemo.children[3]);

            //nextElementSibling 获取指定节点的后面的一个兄弟节点
            console.log(myDemo.children[5].nextElementSibling.innerHTML);
            //nextElementSibling 获取指定节点的前面的一个兄弟节点
            console.log(myDemo.children.previousElementSibling.innerHTML);
        </script>
    </body>
</html>

节点操作之节点创建：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>节点操作之节点创建</title>
        <style type="text/css">
            .oUl {
                border: 1px solid red;
                width: 100%;
                height: 100px;
                ;
            }
        </style>
        <script type="text/javascript">
            var oBtn = document.getElementById("oBtn");
            oBtn.onclick = function() {
                //创建元素节点 
                var newli = document.createElement("li");
                console.log(newli);

                //创建一个文本节点
                var newli = document.createTextNode("文本内容");
                newli.appendChild(Text);
                //创建属性
                var myId = document.createAttribute("id");
                //在li标签上设置属性
                newlo.setAttributeNode(myId);

                //指定标签中添加标签 appendChild(向指定的末尾追加)
                var oUl = document.querySelector(".oUl")
                oUl.appendChild(newli);

                //insertBefore  在指定的节点之前添加一个新的节点
                // node.insertBefore(newNode,指定的节点)
                var oBtn3 = document.getElementById('oBtn3');
                oBtn3.onclick = function() {
                    //需求：在ul之前追加一个p段落标签
                    var oUl = document.querySelector('.oUl');
                    var lis = oUl.firstElementChild;

                    //创建一个p段落标签
                    var newP = document.createElement('p');
                    var textP = document.createTextNode('我是P段落');
                    newP.appendChild(textP);
                    
                    //inserBefore();新增
                    co  nsole.log(oUl.insertBefore(newP, lis));
                };
            }


            var oBtn3 = document.getElementById('oBtn3');
            oBtn3.onclick = function() {
                //需求：在ul之前追加一个p段落标签
                var oUl = document.querySelector('.oUl');
                var lis = oUl.firstElementChild;

                //创建一个p段落标签
                var newP = document.createElement('p');
                var textP = document.createTextNode('我是P段落');
                newP.appendChild(textP);

                //insertBefore  在指定的节点之前添加一个新的节点
                // node.insertBefore(newNode,指定的节点)
                console.log(oUl.insertBefore(newP, lis));
            };
        </script>
    </head>
    <body>
        <ul class="oUl">

        </ul>
        <button type="button" id="oBtn">点击按钮创建li添加到ul列表中</button>
        <button id="oBtn3">insertBefore</button>
    </body>
</html>

我的留言：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h3>我的留言</h3>
        <hr>
        <textarea id="cc" rows="" cols="">

        </textarea>
        <button id="obtn1">发表</button>
        <hr>
        <ul id="content">
        </ul>
        <script type="text/javascript">
            var obtn1 = document.getElementById('obtn1');
            obtn1.onclick = function() {
                //获取文本域的内容
                var cc = document.getElementById('cc');
                // console.log(cc.value);
                //获取oUl
                var oUl = document.getElementById('content');
                //创建一个li标签
                var newLi = document.createElement('li');
                var textLi = document.createTextNode(cc.value);

                //删除按钮
                var btn = document.createElement("button");
                var btncontent = document.createTextNode("删除");
                btn.appendChild(btncontent);
                newli.append(btn);

                //给每一个按钮添加一个点击事件
                btn.setAttribute("onclick", "delLY('" + obj + "')")

                // newLi.appendChild(textLi);
                //将li追加到ul
                oUl.appendChild(newLi);
            }

            // 删除节点   removeChild();
            function delLY(obj) {
                // alert(obj.parentNode.innerHTML);
                //获取oUl
                var flag = confirm("你确定要删除吗？");
                if (flag == true) {
                    var oUl = document.getElementById('content');
                    oUl.removeChild(obj.parentNode);
                }
            }

            //替换节点  replaceChild(新节点,旧节点);
            function myf() {
                var oUl = document.getElementById("oUl");
                var li2 = oUl.lastElementChild;
                //创建p段落
                var newP = document.createElement("p");
                var textP = document.createTextNode("这是p段落的内容")
                newP.appendChild(textP);

                oUl.replaceChild(newP, li2);
            }

            // 克隆节点 cloneNode
            function myb() {
                var oUl = document.getElementById('oUl');
                //获取第一个子节点进行克隆
                var first = oUl.firstElementChild;
                //克隆节点
                // cloneNode()  如果没有参数就是浅拷贝（只复制结构，没有内容）
                // cloneNode(true); 深拷贝
                var newFirst = first.cloneNode(true);
                // 将克隆的节点追加到末尾
                oUl.appendChild(newFirst);
            }
        </script>
    </body>
</html>