精华内容
下载资源
问答
  • js节点操作
    2021-08-10 18:31:09

    删除节点

    node.removeChild(child) node是父节点,删除某一个父节点中的子节点。

    <!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>
    </head>
    
    <body>
        <button>按钮</button>
        <ul>
            <li>老大</li>
            <li>老二</li>
            <li>老三</li>
        </ul>
        <script>
            //点击按钮依次删除里面的孩子
            var ul = document.querySelector('ul')
            var btn = document.querySelector('button')
            btn.onclick = function() {
                if (ul.children.length == 0) {
                    this.disabled = true
                } else {
                    ul.removeChild(ul.children[0])
                }
            }
        </script>
    </body>
    
    </html>
    

    复制节点

    node.cloneNode()
    如果括号里面的参数为空或者为false,则是浅拷贝,即只克隆节点标签,不克隆里面的内容。

    <!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>
    </head>
    
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <script>
            var ul = document.querySelector('ul')
            var li1 = ul.children[0].cloneNode()
            ul.appendChild(li1)
                //括号里面为true,则复制标签也复制内容
            var li2 = ul.children[0].cloneNode(true)
            ul.appendChild(li2)
        </script>
    </body>
    
    </html>
    

    在这里插入图片描述

    更多相关内容
  • JS节点操作

    2022-01-13 11:21:14
    节点概述 1.在JS中节点可分为父节点、子节点、兄弟节点。...节点操作节点操作 以往获取节点只能通过一次一次的输入,利用节点进行操作可以一步获取。获取方法为node.parentNode 具体例子如下 <body>

    节点概述

    1.在JS中节点可分为父节点、子节点、兄弟节点。 又可分为元素节点、属性节点、文本节点
    2.节点至少拥有三个基本属性,nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)

    • 元素节点的节点类型为1 (在对节点进行操作时,通常对元素节点进行操作)
    • 属性节点的节点类型为2
    • 文本节点的节点类型为3

    节点操作

    父节点操作

    以往获取节点只能通过一次一次的输入,利用节点进行操作可以一步获取。获取方法为node.parentNode
    具体例子如下

    <body>
        <div class="grandfather">
            <div class="father">
                <span class="son">×</span>
            </div>
        </div>
    
        <script>
            // 1. 以往获取节点方法
            var son= document.querySelector('.son');
            var father = document.querySelector('.father');
            var grandfather = document.querySelector('.grandfather');
            // 1. 利用节点操作获取父节点方法
            console.log(son.parentNode);
            //得到的是离元素最近的父级节点 注意:如果找不到父节点就返回为 null
        </script>
    </body>
    

    运行结果如下
    在这里插入图片描述

    子节点操作

    记录八个子节点获取方法

    • node.childNodes (获取所有的子节点 包含 元素节点 文本节点等等)
    • node.childNode[i] (获取第i-1个子节点)
    • node.children (获取所有的子元素节点)(常用)
    • node.children[i] (获取第i-1个子元素节点)(常用,没有兼用性问题)
    • node.firstChild(第一个子节点 不管是文本节点还是元素节点)
    • node.lastChild(最后一个子节点 不管是文本节点还是元素节点)
    • node.firstElementChild(第一个子元素节点,ie9才支持)
    • node.lastElementChild(最后一个子元素节点,ie9才支持)

    实例如下所示

    <body>
        <ul>
            <li>son1</li>
            <li>son2</li>
            <li>son3</li>
        </ul>
        <script>
            // 以往获取节点的方法
            var ul = document.querySelector('ul');
            var lis = ul.querySelectorAll('li');
            // 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
            console.log(ul.childNodes);
            // 2. 子节点  childNodes[i] 获取第i-1个子节点                
            console.log(ul.childNodes[0].nodeType);
            console.log(ul.childNodes[1].nodeType);
            console.log(ul.childNodes[2].nodeType);
            // 3. children 获取所有的子元素节点(常用)
            console.log(ul.children);
            // 4. children[i] 获取第i-1个子元素节点(常用)
            console.log(ul.children[0]);
            // 5. node.firstChild 获取第一个子节点 不管是文本节点还是元素节点
            console.log(ul.firstChild.nodeType);
            // 6. node.lastChild 获取最后一个子节点 不管是文本节点还是元素节点
            console.log(ul.lastChild.nodeType);
            // 7. node.firstElementChild 获取第一个子元素节点,ie9才支持
            console.log(ul.firstElementChild);
            // 8. cnode.lastElementChild 获取最后一个子元素节点,ie9才支持
            console.log(ul.lastElementChild);
        </script>
    </body>
    

    运行结果如下
    在这里插入图片描述

    兄弟节点操作

    记录四个兄弟节点获取方法

    • node.nextSibling (下一个兄弟节点 包含元素节点或者 文本节点等等)
    • node.previousSibling (上一个兄弟节点 包含元素节点或者 文本节点等等)
    • node.nextElementSibling (得到下一个兄弟元素节点)
    • node.previousElementSibling (得到上一个兄弟元素节点,如果不存在,则返回null)

    实例如下所示

    <body>
        <div>brother1</div>
        <span>brother2</span>
        <script>
            var div = document.querySelector('div');
            // 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
            console.log(div.nextSibling);
            // 2.previousSibling 上一个兄弟节点 包含元素节点或者 文本节点等等
            console.log(div.previousSibling);
            // 3. nextElementSibling 得到下一个兄弟元素节点,如果不存在,则返回null
            console.log(div.nextElementSibling);
            // 4. previousElementSibling 得到上一个兄弟元素节点,如果不存在,则返回null
            console.log(div.previousElementSibling);
        </script>
    </body>
    

    运行结果如下
    在这里插入图片描述

    创建与添加节点操作

    创建节点:document.createElement(‘tagName’)
    添加节点:
    1.node.appendChild(child) 其中node 父级 child 是子级 后面追加元素,此操作类似数组中的push
    2.node.insertBefore(child, 指定元素) 该方法是将节点添加到指定元素的前面
    具体实例如下所示

    <body>
        <ul>
            <li>添加节点</li>
        </ul>
        <script>
            // 1. 创建节点元素节点
            var li = document.createElement('li');
            // 2. 添加节点方法1 node.appendChild(child)  node 父级  child 是子级 后面追加元素  类似于数组中的push
            var ul = document.querySelector('ul');
            ul.appendChild(li);
            // 3. 添加节点方法2 node.insertBefore(child, 指定元素);该方法是将节点添加到指定元素的前面
            var lili = document.createElement('li');
            ul.insertBefore(lili, ul.children[0]);
            // 4. 我们想要页面添加一个新的元素 : 1. 创建元素 2. 添加元素
        </script>
    </body>
    

    运行结果如下
    在这里插入图片描述

    删除节点操作

    删除节点:node.removeChild(child)
    具体实例如下图所示

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <script>
            // 1.获取元素
            var ul = document.querySelector('ul');
            // 2. 删除元素  node.removeChild(child)
            ul.removeChild(ul.children[1]);
            console.log(ul);
        </script>
    </body>
    

    运行结果如下
    在这里插入图片描述在这里插入图片描述

    复制节点操作

    浅拷贝:node.cloneNode() 浅拷贝的意思是只复制标签不复制里面的内容
    深拷贝:node.cloneNode(true) 深拷贝的意思是复制标签以及里面的内容
    具体实例如下图所示

    <body>
        <ul>
            <li>1</li>
        </ul>
        <script>
            var ul = document.querySelector('ul');
            // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
            // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容 
            var li1 = ul.children[0].cloneNode();
            var li2 = ul.children[0].cloneNode(true);
            ul.appendChild(li1);
            ul.appendChild(li2);
            console.log(ul);
        </script>
    </body>
    

    运行结果如下
    在这里插入图片描述在这里插入图片描述

    展开全文
  • js节点操作

    2014-05-03 19:51:40
    js节点操作
  • 获取元素通常使用两种方式: 利用DOM提供的方法获取元素 document.querySelector() document.getElementsByClassName() ...网页中的所有内容都是节点(标签,属性,文本,注释等),在DOM中,节点用node表示...

    🍓.获取元素通常使用两种方式:

    🐇.利用DOM提供的方法获取元素

    document.querySelector()

    document.getElementsByClassName()

     document.getElementsByTagName()

     document.getElementById()

    🐇.利用节点层级关系获取元素

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

    逻辑性强,但兼容性较差


    网页中的所有内容都是节点(标签,属性,文本,注释等),在DOM中,节点用node表示

    HTML DOM树中的所有节点都可通过JavaScript进行访问,所有html元素(节点)都可以被修改,也可以创建或删除

     

     节点至少拥有nodeType(节点类型),nodeName(节点名称)和nodeValue(节点值)这三个基本属性

    🍓DOM的节点

    常用的三种节点类型有

    🐇.元素节点 元素节点返回值为1

    🐇.属性节点 属性节点返回值为2

    🐇.文本节点 文本节点返回值为3(文本节点包含文字,空格,换行)

    在实际开发中,节点操作主要操作的是元素节点

        <div id="box">hello</div>
    </body>
    <script>
        var oDiv=document.getElementById("box");//div元素对象
        console.log(oDiv.nodeName)//节点名称 div
        console.log(oDiv.tagName)//标签名称div
        console.log(oDiv.nodeType)//1   节点类型
        console.log(oDiv.nodeValue);//null  节点值
        var attr=oDiv.getAttribute("id");
        console.log(attr.nodeName)//节点名称 属性名
        console.log(attr.nodeType)//2   节点类型
        console.log(attr.nodeValue);//  节点值   属性值
    
       var ch= oDiv.firstChild;//第一个字节点
       alert(ch)//[object Text]文本对象节点
       console.log(ch.nodeName)//节点名称 文本
        console.log(ch.nodeType)//3   节点类型
        console.log(ch.nodeValue);//  节点值   文本值

    🍓DOM的更删改查

    🐇.查找元素节点

    🐇.父节点查找子节点

      1. 通过父节点对象查找子节点对象(可能会有文本节点)   兼容性好
       1.1 父节点对象.firstChild              查找父元素下的第一个节点  可能会有文本节点  换行
       1.2父节点对象.lastChild               查找父元素下的最后一个节点
       1.3父节点对象.childNodes           多个   查找父元素下的所有个节点

        2.通过父节点对象查找子节点对象     ie9以上支持
            2.1父节点对象.firstElementChild    查找父元素下的第一个子元素节点
            2.2父节点对象.lastElementChild    查找元素的最后一个子元素节点
            2.3父节点对象.children                  多个   查找父元素下的所有的子元素节点对象

    父元素节点.children[索引]  返回第索引个子元素,没有兼容性问题

    举个栗子:

    父元素节点.children[0]        返回第一个子节点

    父元素节点.children[父元素节点.children.length-1]        返回最后一个子节点

        <ul id="box">
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </ul>
    </body>
    <script>
        var oUl=document.getElementById('box');
        console.log(oUl.firstChild);   //第一个字节点  可能会有文本节点  换行
        console.log(oUl.firstElementChild);  //第一个元素节点
        console.log(oUl.firstChild.nodeType);//3
        console.log(oUl.firstChild.nodeValue);//
        console.log(oUl.firstChild.length);//7   空格和li  把空格去掉就没有,长度为3   换行也属于空格
        //判断childNodes[i].nodeType
        var elArr=[];
        for(var i=0;i<oUl.childNodes.length;i++){
            if(oUl.childNodes[i].nodeType===1){
                elArr.push(oUl.childNodes[i])
            }
        }
        console.log(elArr)

    🐇.通过子节点查找父节点

    1. 子节点.parentNode               查找离元素最近的父节点,如果找不到父节点就返回为空
    2. 子节点.parentElement          查找父元素
        <ul id="box">
            <li id="list">列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </ul>
    </body>
    <script>
        var oLi=document.getElementById('list');
    
    
        consol.log(oLi.parentNode)  //查找父节点
        consol.log(oLi.parentElement)  //查找父元素

    🐇.兄弟节点的操作

    • node.nextSibling   查找 下一个兄弟节点  找不到返回null,包含所有的节点  可能为文本节点或元素节点
    • node.previousSibling        查找上一个兄弟节点 找不到返回null,包含所有的节点  可能为文本节点或元素节点
    • ie9以上支持
    •     node.nextElementSibling              查找下一个元素兄弟节点
    •    node.previousElementSibling        查找上一个元素兄弟节点
        <ul id="box">
            <li >列表1</li>
            <li id="list">列表2</li>
            <li>列表3</li>
        </ul>
    </body>
    <script>
        var oLi=document.getElementById('list');
    
        // oLi.nextSibling
    
        console.log(oLi.nextSibling)  //查找 下一个兄弟节点  可能为文本
        console.log(oLi.nextElementSibling)  //查找下一个元素兄弟节点
    
        // oLi.previousSibling
    
        console.log(oLi.previousSibling)        //查找上一个兄弟节点  可能为文本
        console.log(oLi.previousElementSibling) //查找上一个元素兄弟节点

    🍓页面中想要添加一个新的元素

    1.创建元素

    2.添加元素

    🐇创建元素节点对象

    document.createElement("属性名")    创建元素节点对象

        <div id="box">
            hello world
           
        </div>
        <button id="btn"></button>
    </body>
    <script>
        var oDiv=document.getElementById('box');
        var oBtn=document.getElementById('btn');
        var oSpan=document.createElement("span") //创建一个元素
        // console.log(oSpan);//元素对象  <span></span>
        oSpan.innerHTML="我是span"
        console.log(oSpan);//元素对象

    1. document.createAttribute("属性名") 创建属性节点对象
    2. document.createTextNode("文本内容") 创建文本节点创建

    🐇添加节点

    父节点.appendChild(元素对象) 追加元素对象到父元素的内部末尾 直接用父元素调用

        <div id="box">
            hello world
           
        </div>
        <button id="btn"></button>
    </body>
    <script>
        var oDiv=document.getElementById('box');
        var oBtn=document.getElementById('btn');
        var oSpan=document.createElement("span") //创建一个元素
        // console.log(oSpan);//元素对象  <span></span>
        oSpan.innerHTML="我是span"
        //追加
        oDiv.appendChild(oSpan);

     🐇将一个节点添加到父节点的指定子节点前面

    父节点对象.insertBefore(参数1,参数2) 把参数1节点对象插入到参数2节点对象之前

    参数1 必须 要插入的节点对象

    参数2 必须 参照物节点对象

    放在谁的内部,谁调用insertBefore()

    父节点.append("shuxing") 追加节点括号中只可以写块或者字符串

    		<div class="box">
    			<span id="con">
    				hello
    			</span>
    		</div>
    	</body>
    	<script type="text/javascript">
    		var oDiv = document.getElementsByClassName("box")[0]
    		var oSpan = oDiv.firstElementChild;
    		var p=document.createElement("p")
    		oDiv.insertBefore(p, oSpan);

    🍓节点的删除和替换节点

     🐇删除

    父节点.removeChild(要删除的节点) 删除节点

    要删除的节点.remove() 删除节点 兼容性没有上一个好

    		<div id="box">
    			hello world
    			<span>hello</span>
    		</div>
    		<button type="button" id="btn">删除</button>
    	</body>
    	<script type="text/javascript">
    		var oBtn=document.getElementById("btn")
    		var oDiv=document.getElementById("box")
    		var oSpan=oDiv.firstElementChild;
    		oBtn.onclick=function(){
    			// oDiv.removeChild(oSpan);
    			oSpan.remove();
    		}

     🐇替换

    父节点.replaceChild(参数1,参数2)      替换节点对象 用参数1 替换参数2

    参数1 必须 用来替换的节点

    参数2 必须 被替换的节点


    🍓获取元素节点对象

    1. 元素节点对象.getAttributeNode("属性节点名称")    获取属性节点 得到的是属性对象
    2. 元素节点对象.tagName                                           获取标签名称 另一种获取元素节点的方法
    3. 属性节点对象.nodeName                                        获取属性节点节点名称
    4. 属性节点对象.nodeType                                          返回属性节点节点类型 返回值为2
    5. 属性节点对象.nodeValue                                         获取属性节点节点的内容/值
    6. 属性节点.firstChild                                                   获取第一个子节点.
    7. 文本节点对象.nodeName                                        获取属性节点节点名称 返回值为#text
    8. 文本节点对象.nodeType                                          返回属性节点节点类型 返回值为3
    9. 文本节点对象.nodeValue                                         获取属性节点节点的内容/值

     


    🍓设置属性节点对象

     

     🐇节点对象.getAttribute("属性名") 根据节点对象获取属性名

     🐇节点对象.setAttribute("属性名","属性值") 设置属性值 只可以设置能直接在标签上的属性

     🐇节点对象.removeAttribute("属性名") 删除括号中的属性

    🍓节点的拷贝与添加 


    🐇节点对象.cloneNode(参数) 克隆节点对象

    如果括号里面参数为空,或者是false

    参数 可选 布尔值 浅拷贝/深拷贝 默认false 浅拷贝 不克隆子节点 深拷贝为克隆次节点对象的所有属性即所有节点

    CSDN话题挑战赛第1期
    活动详情地址:CSDN

    展开全文
  • JS节点操作(1) - 父节点,子节点,兄弟节点 节点操作的作用 获取元素通常使用的两种方式: 1. 利用DOM提供的方法获取元素 逻辑性不强,繁琐 2. 利用节点层级关系获取元素 利用父子兄弟节点关系获取元素 逻辑性墙,...

    节点操作的作用

    获取元素通常使用的两种方式:

    1. 利用DOM提供的方法获取元素

    • document.getElementById()
    • document.getElementsByTagName()
    • document.querySelector() 等等
    • 逻辑性不强,繁琐

    2. 利用节点层级关系获取元素

    • 利用父子兄弟节点关系获取元素
    • 逻辑性墙,但是兼容性稍差

    这两种方法都可以获取元素,但是节点操作更简单。

    获取节点

    1. 父节点 

    1.1 node.parentNode 返回的是距离最近的父节点

    <body>
        <div class="parent">
            <em class="child">JavaScript</em>
        </div>
        <script>
            var child = document.querySelector('.child');
            // 返回的是距离最近的父节点
            // 如果没有父节点则返回null
            var parent = child.parentNode;
            console.log(parent);
        </script>
    </body>

    以上代码输出结果为:

     返回了距离child最近的父节点。

    2. 子节点

    2.1 node.childNode 返回所有的子节点,包括所有的文本节点和元素节点

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <script>
            var parent = document.querySelector('ul');
            // 返回所有的子节点 包括所有的文本节点和元素节点
            var lis = parent.childNodes;
            console.log(lis);
        </script>
    </body>

    以上代码输出结果为:

    返回了包含文本节点在内的9个子节点。那么如果我们只想要元素节点怎么办呢?

    2.2 node.children 返回所有子元素节点

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <script>
            var parent = document.querySelector('ul');
            // children获取所有的子元素节点
            var lis = parent.children;
            console.log(lis);
        </script>
    </body>

     以上代码输出结果为:

    只返回了4个元素节点。

    2.3 node.firstChildnode.lastChild 返回第一个和最后一个子节点,包括所有节点

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <script>
            var parent = document.querySelector('ul');
            // 获取第一个/最后一个子节点 包括所有的文本节点和元素节点
            console.log(parent.firstChild);
            console.log(parent.lastChild);
        </script>
    </body>

    以上代码输出结果为:

    返回了两个文本节点。那么如果我们只想要元素节点怎么办呢?

    2.3 node.firstElementChildnode.lastElementChild 返回第一个和最后一个子元素节点,有兼容性问题

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <script>
            var parent = document.querySelector('ul');
            // 获取第一个/最后一个子元素节点 有兼容性问题,IE9以上才支持
            console.log(parent.firstElementChild);
            console.log(parent.lastElementChild);
        </script>
    </body>

    以上代码输出结果为:

    返回了第一个和最后一个子元素节点。然而这个方法有兼容性问题,IE9以上才支持。那么我们在日常开发中既想获取第一个和最后一个子元素节点又想兼顾兼容性,我们还有什么好办法呢?

    2.4 开发中常用方法获取第一个和最后一个子元素节点

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <script>
            var parent = document.querySelector('ul');
            // 实际开发中 利用children
            console.log(parent.children[0]);
            console.log(parent.children[parent.children.length - 1]);
        </script>
    </body>

    在实际开发中,我们可以运用children方法来返回第一个和最后一个子节点。

    3. 兄弟节点

    3.1 node.previousSibling 和 node.nextSibling 获取前一个和后一个兄弟节点,包括所有节点

    <body>
        <p>p</p>
        <div class="div">div</div>
        <span>span</span>
        <script>
            var div = document.querySelector('div');
            // 获取兄弟节点-前一个/后一个节点 包含所有子节点
            // 找不到则返回null
            console.log(div.nextSibling);
            console.log(div.previousSibling);
        </script>
    </body>

    以上代码输出结果为:

    返回了div的前一个和后一个文本节点。那么如果我们只想要获取元素节点怎么办呢?

    3.2 node.previousElementSibling 和 node.nextElementSibling 获取前一个和后一个兄弟元素节点,有兼容性问题

    <body>
        <p>p</p>
        <div class="div">div</div>
        <span>span</span>
        <script>
            var div = document.querySelector('div');
            // 获取兄弟节点-前一个/后一个元素节点 有兼容性问题
            // 找不到则返回null
            console.log(div.nextElementSibling);
            console.log(div.previousElementSibling);
        </script>
    </body>

    以上代码输出结果为:

    返回了前一个和后一个元素节点。然而这个方法有兼容性问题,IE9以上才支持。那么我们在日常开发中既想获取前一个和后一个兄弟元素节点又想兼顾兼容性,我们还有什么好办法呢?

    3.3 封装兼容性函数获取兄弟元素节点

    以获取下一个元素节点为例: 

    <body>
        <p>p</p>
        <div class="div">div</div>
        <span>span</span>
        <script>
            var div = document.querySelector('div');
            // 封装兼容性函数
            function getNextElementSibling(ele) {
                while (ele = ele.nextSibling) {
                    if (ele.nodeType === 1) {
                        return ele;
                    }
                }
                return null;
            }
            console.log(getNextElementSibling(div));
        </script>
    </body>
    展开全文
  • 利用方法 添加一个ul 然后再ul里面添加10个li 并且里面li显示的值为1-10 再写个按钮 点击删除ul里面的单数的li 再将最后一个li替换成a标签 <body> ...button onclick="fn()">... //创建10使用for...
  • DOM操作JS中可以说是非常常见了吧,很多网页的小功能的实现,比如一些元素的增删操作等都可以用JS来实现。那么在DOM中我们需要知道些什么才能完成一些功能的实现呢?今天这篇文章就先简单的带大家入一下JS中DOM...
  • 最近发现DOMDocument对象很重要,还有XMLHTTP也很重要 注意大小写一定不能弄错.
  • 本文实例总结了JavaScript节点及列表操作的方法。分享给大家供大家参考。具体如下: (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建...
  • js节点操作

    2022-01-11 21:08:47
    节点操作 5.1获取节点操作 5.2节点概述 网页中的所有内容都是节点(标签、属性、文本、注释等) , 在DOM中,节点使用node来表示。 HTML DOM树中的所有节点均可通过JavaScript进行访问,所有HTML元素(节点)均可被...
  • 流星雨 Squel 节点包的 Meteor 智能包。 用于处理 SQL 语句的实用程序。 版本 3.10.0 包安装 meteor add bulldogDevLabs:meteor-squel
  • 本文实例讲述了JS实现的DOM插入节点操作。分享给大家供大家参考,具体如下: 一 介绍 插入节点通过使用insertBefore()方法来实现。 insertBefore()方法将在另一个子节点前插入新的子节点。 obj.insertBefore(new,ref...
  • 本文实例讲述了JS常见DOM节点操作。分享给大家供大家参考,具体如下: DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准。其赋予了JS操作节点的能力。当网页...
  • javascript节点操作

    2011-08-25 15:02:00
    1Attributes 存储节点的属性列表(只读) 2childNodes 存储节点的子节点列表(只读)
  • JavaScript-节点操作

    千次阅读 2022-03-22 11:04:45
    目录 ​ 1. 节点概述 2. 节点层次 1)父级节点 2)子节点 ...HTML DOM树中的所有节点均可通过JavaScript进行访问,所有HTML元素(节点)均可被修改,也可以创建或删除。 一般的,节点至少拥有n...
  • 本文实例讲述了JS实现DOM节点插入操作之子节点与兄弟节点插入操作。分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS...
  • JS节点操作(2)- 创建节点,添加节点,删除节点,复制节点 node.appendChild(child) 添加到子元素数组的末尾 node.insertBefore(child, 指定元素) 添加到指定子元素的前面 node.removeChild(child) 删除指定子节点...
  • 节点操作~JS

    千次阅读 2022-04-24 12:50:29
    节点操作: 1、element.innerHTML将内容写入某个dom节点,不会导致页面重绘 2、element.appendChild(),将节点添加到指定父节点的子节点的末尾 3、element.insertBefore(节点,指定预插入的位置) 4、element....
  • JS自定义属性和节点操作 1.节点是什么? 所谓的节点操作指的是:网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM 中,节点使用 node 来表示。所有 HTML 元素(节点)均可被修改,也可以创建或删除。 ...
  • 利用节点层级关系获取元素 利用父子兄节点关系获取元素 逻辑性强,但是兼容性稍差 一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性
  • javaScript节点操作

    2011-06-26 14:14:28
    javaScript节点操作.txt 没分了 给点分吧~~~~~~
  • 节点操作 创建节点 document.createElement('tagName') document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在,是根据我们的需求动态生成的,所以我们也成为动态创建元素节点。 添加...
  • JavaScript节点操作

    千次阅读 2020-10-11 08:42:19
    JavaScript节点操作 // 父级节点 var par = li.parentNode // 所有儿子节点 var all_child = li.children // 第一个(最后一个子节点) var fir = li.firstChild var las = li.lastChild // 第一个子元素...
  • JS DOM节点操作详解

    千次阅读 2022-04-16 08:27:22
    利用层级关系获取元素二、节点概述三、节点层级1.父级节点2.子节点3.第一个子元素和最后一个子元素4.小案例(新浪下拉菜单)5.兄弟节点6.创建添加节点7.删除节点8.复制节点 一、获取元素的两种方式 我们获取元素通常...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 249,339
精华内容 99,735
关键字:

js节点操作

友情链接: cdetst.rar