JS day31 节点操作

最新推荐文章于 2024-02-02 09:30:00 发布

肝JOJO

最新推荐文章于 2024-02-02 09:30:00 发布

阅读量84

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_34620296/article/details/101481451

版权

JavaScript 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

一.节点概述:

①网页中的所有内容都是节点(标签.属性.文本.注释等),在DOM中,节点使用node来
表示.HTML DOM树中的所有节点均可通过JS来访问,所有HTML元素(节点)均可被修改,
也可以被创建或删除.实际开发中,节点主要操作元素
②一般的,节点至少拥有nodeTyle(类型) nodeName(名称)和nodeValue(值)
这三个基本属性
*元素节点 nodeTyle 为 1
*属性节点 nodeTyle 为 2
*文本节点 nodeTyle 为 3 (包含文字空格换行等)

二.父子节点:

利用父子兄弟节点关系获取元素,逻辑性强,操作简单,但兼容性较差.
1.获取父级节点
node.parentNode
2.获取子节点
parentNode.childNodes(标准,还会得到文本节点)
parentNode.children (非标准,只得到元素节点)
parentNode.firstChild 获取子节点的第一个节点
parentNode.lastChild 获取子节点的最后一个节点
parentNode.firstElementChild; 获取子节点的第一个元素节点 IE9以上支持
parentNode.lastElementChild; 获取子节点的最后一个元素节点 IE9以上支持
parentNode.children[i]; 实际开发中获取子节点的某一个元素节点

3.代码示例如下:

<script type="text/javascript">
    window.onload=function(){
        var erweima=document.querySelector('.erweima');
        console.log(erweima.parentNode); //erweima的父级节点(离他最近的父级,无父节点返回null)
        var ul=document.querySelector('ul');
        console.log(ul.childNodes);  //ul所有子节点的集合(还包括文本节点)

        //子节点只获取元素节点方法1: nodeTyle 为1      
        for(i=0;i<ul.childNodes.length;i++){
            if(ul.childNodes[i].nodeType===1){
                console.log(ul.childNodes[i]);                
            }
        }
        //子节点只获取元素节点方法2:
        console.log(ul.children);

        //获取子节点的第一个和最后一个节点
        console.log(ul.firstChild);  //第一个是换行 是文本节点
        console.log(ul.lastChild);  //最后一个也是换行 是文本节点

        //获取子节点的第一个和最后一个元素节点 IE9以上支持
        console.log(ul.firstElementChild);
        console.log(ul.lastElementChild);

        //实际开发中获取子节点的某个元素节点
        console.log(ul.children[0]);  //第一个元素节点
        console.log(ul.children[ul.children.length-1]); //最后一个元素节点
        
    }

    </script>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>        
    </ul>

    <div class="box">
        <span class="erweima"></span>
    </div>
</body>

三.兄弟节点:

1.得到包含元素节点和文本节点等的兄弟节点 (无兼容性问题)
div.nextSibling; //下一个
div.previousSibling; //上一个
2.得到元素兄弟节点 (只支持IE9以上)
div.nextElementSibling; //下一个
div.previousElementSibling; //上一个
3.代码示例如下:

            var div=document.querySelector('div');
            div.nextSibling;  //下一个兄弟节点,包含元素节点和文本节点等 (无兼容问题)
            div.previousSibling;  //上一个兄弟节点

            div.nextElementSibling;  //下一个兄弟元素节点 IE9以上
            div.previousElementSibling; //上一个兄弟元素节点 

        *自己封装一个无兼容性问题的获取下一个元素兄弟节点的函数
            function getNextEle(element){
                var e=element;
                while(e=e.nextSibling){
                    if(e.nodeType===1){
                        return e;
                    }
                }
                return null;
            }
            console.log(getNextEle(div));

<body>
    <div>我是孙笑川</div>
    <span>我是孙哥的兄弟</span>
    <ul>
        <li>1</li>
    </ul>
    
</body>

四.创建和添加节点

1.动态创建元素节点
document.createElement(‘tagName’);
2.添加节点 ->将上一步创建的节点添加进指定的父节点中子节点的末尾
node.appenChild(child);
3.在指定元素前添加节点
node.insertBefore(child,指定元素)
4.代码示例:

        var li=document.createElement('li');  //创建节点
        var ul=document.querySelector('ul');  
        ul.appendChild(li);  //插入到最后
        ul.insertBefore(li,ul.children[0]);  //插入到指定元素前面

<body>
    <div>我是孙笑川</div>
    <span>我是孙哥的兄弟</span>
    <ul>
        <li>1</li>
    </ul>
    
</body>

五.删除节点

1.删除节点
node.removeChild(child); 返回删除的节点
2.例题:
每次点击按钮都删除第0个子节点,删除所有子节点后按钮不可用

  <script type="text/javascript">
    window.onload=function(){
        var ul=document.querySelector('ul');
        //ul.removeChild(ul.children[0]);  //删除ul的第0个子节点
        var btn=document.querySelector('button');
        btn.onclick=function(){
            if(ul.children.length==0){
                this.disabled=true;
            }else{
                ul.removeChild(ul.children[0]);
            }                       
        }
    }
    
  </script>

六.复制(克隆)节点

1.复制节点(克隆节点)
node.cloneNode(); //把node这个节点赋值一份
2.注:
①()中为空或false,则是浅拷贝,只赋值节点本身,不复制内容
②(true),深拷贝,复制标签和内容
3.代码示例

  <script type="text/javascript">
    window.onload=function(){
        var ul=document.querySelector('ul');
        var lili=ul.children[0].cloneNode(true);  //克隆ul的第0个元素子节点
        ul.appendChild(lili);  //将克隆的节点放在ul元素子节点最后
    }
  </script>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    
</body>

肝JOJO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录