DOM-节点操作

最新推荐文章于 2022-11-29 21:32:25 发布

yyy_wj

最新推荐文章于 2022-11-29 21:32:25 发布

阅读量98

点赞数

本文链接：https://blog.csdn.net/yyy_wj/article/details/96837248

版权

节点

节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node

节点的属性:(可以使用标签--元素.出来,可以使用属性节点.出来,文本节点.点出来)
nodeType:节点的类型:1----标签,2---属性,3---文本
nodeName:节点的名字:标签节点---大写的标签名字,属性节点---小写的属性名字,文本节点----#text
nodeValue:节点的值:标签节点---null,属性节点---属性值,文本节点---文本内容

节点和元素的区别：

节点：页面中所以的内容

元素：标签

获取节点和元素的12行代码（记住）

 < body>
<div id="dv">哦哦
  <span>这是div中的第一个span标签</span>
  <p>这是div中的第二个元素,第一个p标签</p>
  <ul id="uu">
    <li>乔峰</li>
    <li>鹿茸</li>
    <li id="three">段誉</li>
    <li>卡卡西</li>
    <li>雏田</li>
  </ul>
</div>
<script src="common.js"></script>
<script>

  //12行代码:都是获取节点和元素的
  //ul
  var ulObj=document.getElementById("uu");
  //父级节点
  console.log(ulObj.parentNode);
  //父级元素
  console.log(ulObj.parentElement);
  //子节点
  console.log(ulObj.childNodes);
  //子元素
  console.log(ulObj.children);
  console.log("==============================================");
  //第一个子节点
  console.log(ulObj.firstChild);//------------------------IE8中是第一个子元素
  //第一个子元素
  console.log(ulObj.firstElementChild);//-----------------IE8中不支持
  //最后一个子节点
  console.log(ulObj.lastChild);//------------------------IE8中是第一个子元素
  //最后一个子元素
  console.log(ulObj.lastElementChild);//-----------------IE8中不支持
  //某个元素的前一个兄弟节点
  console.log(my$("three").previousSibling);
  //某个元素的前一个兄弟元素
  console.log(my$("three").previousElementSibling);
  //某个元素的后一个兄弟节点
  console.log(my$("three").nextSibling);
  //某个元素的后一个兄弟元素
  console.log(my$("three").nextElementSibling);

注意

childNodes和children的区别，childNodes获取的是子节点，children获取的是子元素

nextSibling和previousSibling获取的是节点，获取元素对应的属性是nextElementSibling和previousElementSibling获取的是元素

nextElementSibling和previousElementSibling有兼容性问题，IE9以后才支持

节点操作，方法
   appendChild()
   insertBefore()
   removeChild()
   replaceChild()
节点层次，属性
   parentNode
   childNodes
   children
   nextSibling/previousSibling
   firstChild/lastChild
总结

凡是获取节点的代码在谷歌和火狐得到的都是相关的节点
凡是获取元素的代码在谷歌和火狐得到的都是相关的元素
从子节点和兄弟节点开始,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,在IE8中得到的是undefined----元素的代码,iE中不支持

案例：点击按钮设置div中的p标签的背景颜色（用节点的方式）

  <style>
    div {
      width: 300px;
      height: 450px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<input type="button" value="变色" id="btn"/>
<div id="dv">
  <span>这是span</span>
  <p>这是p</p>
  <span>这是span</span>
  <p>这是p</p>
  <span>这是span</span>
  <p>这是p</p>
  <span>这是span</span>
  <a href="http://www.baidu.com">百度</a>
</div>
<script src="common.js"></script>
<script>

  my$("btn").onclick = function () {
    //先获取div
    var dvObj = my$("dv");
    //获取里面所有的子节点
    var nodes = dvObj.childNodes;
    //循环遍历所有的子节点
    for (var i = 0; i < nodes.length; i++) {
      //判断这个子节点是不是p标签
      if (nodes[i].nodeType == 1 && nodes[i].nodeName == "P") {
        nodes[i].style.backgroundColor = "red";
      }
    }
  };

创建节点的方法：

一、创建节点、追加节点

1、createElement（标签名）创建一个元素节点（具体的一个元素）。
2、appendChild（节点）追加一个节点。
3、createTextNode（节点文本内容）创建一个文本节点

<script>

   var div=document.getElementById("div");
   //创建一个p标签
   var pObj=document.createElement("p");
    //将创建的p标签添加到div中
   div.appendChild(pObj);
</script>

二、插入节点
1、appendChild（节点）也是一种插入节点的方式，还可以添加已经存在的元素，会将其元素从原来的位置移到新的位置。
2、insertBefore（a,b）是参照节点，意思是a节点会插入b节点的前面。

  var obj= document.createElement("input");
    obj.type="button";
    obj.value="按钮"+i;
  my$("dv").insertBefore(obj,my$("dv").firstElementChild);

三、删除、移除节点
1、removeChild(节点) 删除一个节点，用于移除删除一个参数（节点）。其返回的被移除的节点，被移除的节点仍在文档中，只是文档中已没有其位置了

 my$("btn2").onclick=function () {
    //移除父级元素中第一个子级元素
    my$("dv").removeChild(my$("dv").firstElementChild);
  };

四、替换节点
1、replaceChild(插入的节点，被替换的节点) ，用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要被替换的节点。返回的是被替换的节点。

var replaceChild= document.body.replaceChild(div1,div2); //将div1替换div2

yyy_wj

关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫