笔记节点操作

最新推荐文章于 2022-09-18 16:01:50 发布

nekops

最新推荐文章于 2022-09-18 16:01:50 发布

阅读量87

点赞数

本文链接：https://blog.csdn.net/qq_45441981/article/details/118880966

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 节点的属性 -->
    <!-- <script>
        //元素节点,属性节点,文本节点
        //每个节点又有三个属性nodeName,nodeType,nodeValue
        nodeType  ------- 节点类型：返回值“1” —— 标签；返回值“2” —— 属性；返回值“3” —— 文本
        nodeValue  ------- 节点的值：null —— 标签；属性的值 —— 属性；文本内容 —— 文本
        nodeName  ------- 节点名字：大写的标签名 —— 标签；小写的属性名 —— 属性；#text —— 文本

        var odiv = document.getElementById("div1");
        odiv.childNodes;//获取当前元素节点的所有子节点:p和em

        odiv.childNodes[0].nodeName;//获取第一个子节点的元素名
        odiv.childNodes[0].nodeType;//获取第一个子节点的属性
        odiv.childNodes[0].nodeValue;//获取第一个子节点的值

        odiv.firstChild;//快速获取第一个子节点
        odiv.lastChild;//快速获取最后一个子节点

    </script> -->


    <!-- 删除空白节点 -->
    <!-- /^\s+$/.test(),正则表达式,判断是否有空白 -->
    <!-- <script>
        window.onload = function () {
            var odiv = document.getElementById("div1");
            //alert(/^\s+$/.test(" "));//里面是空格,则返回true
            parentNode//返回该节点的父节点
            previousSibling//返回该节点的前一个同级节点
            nextSibling//返回该节点的后一个同级节点

        }
        //删除空白节点
        function removespacenode(node) {
            var result = [];//用来存放不是空白节点的
            for(var i = 0;i < node.length;i++){
                //判断是否为空节点
                if(node[i].nodeType == 3 && /^\s+$/.test(node[i].nodeValue)){
                    continue;
                }
                else{
                    result.push(node[i]);
                }
            }
            return result;
        }//创建了个新的数组来存放节点,而没有彻底删除原来的节点
        //方法二
        //从父节点中删除原来的节点
        function removespacenode2(parent) {
            var nodes = parent.childNodes;
            for(var i = nodes.length;i >= 0;i++){//倒着遍历,因为顺着删,后面的元素会顶到被删的那个元素下标那里去,从而被跳过.
                if(nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)){
                    parent.removeChild(nodes[i]);//删除该空白节点
                }
            }
        }
    </script> -->


    <!-- 节点获取 -->
    <!-- <script>
        var odiv = document.getElementById("div1");
        odiv.attributes;//获取该节点的属性节点[集合]
        //集合特点:不重复 和 无序
        //attributes.length节点个数
        odiv.attributes.getNamedItem("id");//获取特定的属性节点
        odiv.attributes["id"];//也能获取,方法二

        odiv.attributes["id"].nodeName;//获取属性节点的属性值
    </script> -->


    <!-- 节点操作 -->
    <!-- <script>
        window.onload = function () {
            var obtn = document.getElementById("btn");
            var odiv = document.getElementById("div1");
            obtn.onclick = function () {
                //创建span节点，createElement(标签名)
                var node = document.createElement("span");
                //给span节点中添加文本
                var otext = document.createTextNode("文本内容");
                //将文本插入到节点中
                node.appendChild(otext);
                //插入div1中，插在所有标签的末尾
                odiv.appendChild(node);
            }
        }
    </script> -->
    <!-- <script>
        var odiv = document.getElementById("div1");
        var node = document.createElement("strong");

        odiv.parentNode.replaceChild(node, odiv); //(newnode,oldnode)新节点替换掉旧节点

        odiv.cloneNode() //克隆
    </script> -->

    <!-- 创建带文本的元素节点 -->
    <!-- <script>
        function createelementwidthtxt(tagename,txt) {
            var node = document.createElement(tagname);
            var otxt = document.createTextNode(txt);
            node.appendChild(otxt);
            return node;
        }
    </script> -->

    <!-- 插入节点 -->
    <!-- <script>
        //在选定节点前插入一个节点
        var node = createelementwidthtxt("strong", "strong文本"); //创建节点
        var odiv = document.getElementById("div1");
        var pem = document.getElementsByTagName("em");
        odiv.insertBefore(node, em); //(插入的节点,插入位置的后一个子节点)


        //封装函数:在选定节点后插入一个节点
        function insertafter(newnode, oldnode) {
            //判断oldnode是否为最后后一个
            var parent = oldnode.parentNode; //定义父节点
            if (oldnode == parent.lastChild) {
                //最后一个节点,直接插入到子节点末尾
                parent.appendChild(newNode);
            } else {
                parent.insertBefore(newnode, oldnode.nextSibling); //插入到oldnode的下一个节点之前
            }
        }
    </script> -->


</head>

<body>
    <div id="div1">
        <p>p</p>
        <em>斜体</em>
    </div>
    <button id="btn">按钮</button>
</body>

</html>

nekops

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
笔记节点操作

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>节点.
复制链接

扫一扫