js学习笔记（节点之间关系~节点属性操作）

最新推荐文章于 2024-06-10 22:52:06 发布

甜甜今天学了吗

最新推荐文章于 2024-06-10 22:52:06 发布

阅读量175

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/dawanhjiao/article/details/104326042

版权

（7）节点之间关系
网页中所有的内容都是节点

<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box">
   <button class="btn">按钮</button>
    <span class="sp">
        <a href="#">超链接</a>
    </span>
    <p class="pp">我是一句话</p>
    <div>哈哈哈哈</div>
</div>

①获取父节点标签.parentNode

<script>
    window.onload = function (ev) {
        var chao = document.getElementsByTagName('a')[0]; //拿到a节点
        document.write(chao.parentNode); //拿到a的父节点
   //document.write(chao.parentElement); //拿到a的父节点
        document.write(chao.parentNode.parentNode);//拿到a的父节点的父节点
        //document.write(chao.parentElement.parentElement);//拿到a的父节点的父节点
    }
</script>

②上一个兄弟节点标签.previousElementSibling
③下一个兄弟节点标签.nextElementSibling

<script>
    window.onload = function (ev) {
        var spa = document.getElementsByTagName('span')[0]; //拿到span节点
        //document.write(spa.nextSibling); //拿到span的下一个兄弟节点，#text，是换行，不是p，因为换行也是节点
        //document.write(spa.nextElementSibling); //拿到span的下一个兄弟元素节点，是p
        //这样写，下一个兄弟节点
        var next = spa.nextElementSibling || spa.nextSibling;
        document.write(next);
        //上一个兄弟节点
        var pre = spa.previousElementSibling || spa.previousSibling;
        document.write(pre);
    }
</script>

④获取标签中第一个子节点标签.firstElementChild
⑤获取标签中最后一个子节点标签.lastElementChild
⑥获取所有元素节点标签.children

<script>
    window.onload = function (ev) {
        var bo = document.getElementsByTagName('div')[0]; //拿到第一个div节点
        //获取第一个子节点
        var firs = bo.firstElementChild || bo.firstChild;
        document.write(firs);
        //获取最后一个子节点
        var las = bo.lastElementChild || bo.lastChild;
        document.write(las);
        //获取所有节点
        var al = bo.children || bo.childNodes;
        document.write(al);
    }
</script>

用nodeType获取所有元素节点

<script>
    window.onload = function (ev) {
        var bo = document.getElementsByTagName('div')[0];
        var all = bo.childNodes;
        var allarr = [];
        all.forEach(function(value, key, parent){
            //1,代表元素；2，代表属性；3，代表元素或属性中的文本内容；8，代表注释；9，代表整个文档
            if (value.nodeType === 1){
                allarr.push(value);
            }
        });
       document.write(allarr);
    }
</script>

⑦获取任意兄弟节点

<script>
    window.onload = function (ev) {
      var spa = document.getElementsByTagName('span')[0];
      document.write(spa.parentNode.children[0]); 
      //span的第一个兄弟节点
    }
</script>

（8）节点操作（CRUD操作）

<div class="box">
    <p class="pp">我是一句话</p>
    <button class="btn">戳我</button>
</div>

①增

<script>
    window.onload = function (ev) {
        //CRUD操作，就是增删改查
        var bo = document.getElementsByClassName('box')[0];
        //1.创建节点
        var im = document.createElement('img');
        im.src = 'image/004.jpg';
        //bo.appendChild(im); //把img标签追加到页面尾部
        var bt = document.getElementsByClassName('btn')[0];
        bo.insertBefore(im,bt); 
        //把img标签插到butto标签前面
    }
</script>

②删

<script>
    window.onload = function (ev) {
        //2.删除节点，想要删除按钮
       var bt = document.getElementsByClassName('btn')[0];
        //bt.remove(); //方法一
       var bo = document.getElementsByClassName('box')[0];
        bo.removeChild(bt);//通过父节点删除儿子节点，方法二
    }
</script>

③改

④查
就是获取节点
⑤克隆标签
id选择器不能克隆
a.浅克隆：就是只克隆节点本身，不克隆它的子节点
b.深克隆：克隆节点本身和它所有的子节点

<script>
    window.onload = function (ev) {
     var bo = document.getElementsByClassName('box')[0];
        //var newbox = bo.cloneNode();  //浅克隆
        //var newbox = bo.cloneNode(false); //浅克隆
        var newbox = bo.cloneNode(true); //深克隆
        console.log(newbox);
    }
</script>

⑥节点属性

<div class="box">
    <p class="pp">我是一句话</p>
    <button class="btn">戳我</button>
   <img src="image/004.jpg"/>
</div>

1.获取标签属性

<script>
    window.onload = function (ev) {
        //1.获取标签属性
        var im = document.getElementsByTagName('img')[0];
        console.log(im.getAttribute('src')); 
         //定义了，得到image/004.jpg
        console.log(im.getAttribute('alt')); 
        //未定义，null
        console.log(im.src);
        //定义了，得到ile:///F:/%E5%89%8D%E7%AB%AF%E4%BB%A3%E7%A0%81/%E7%BD%91%E9%A1%B51/image/004.jpg
        console.log(im.alt); //未定义，空
    }
</script>

2.设置标签属性

<script>
    window.onload = function (ev) {
        //2.设置标签属性
        var im = document.getElementsByTagName('img')[0];
        im.setAttribute('width','100px');
    }
</script>

3.删除标签属性

<script>
    window.onload = function (ev) {
        //3.删除标签属性
        var im = document.getElementsByTagName('img')[0];
        im.removeAttribute('width');
    }
</script>

3.BOM

甜甜今天学了吗

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js学习笔记（节点之间关系~节点属性操作）

（7）节点之间关系网页中所有的内容都是节点<head> <meta charset="UTF-8"> <title>练习</title> <style type="text/css"> .box{ width: 200px; height: 200...
复制链接

扫一扫