js元素节点之其他节点

最新推荐文章于 2024-09-19 07:31:41 发布

Renkx0404

最新推荐文章于 2024-09-19 07:31:41 发布

阅读量433

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Renkx0404/article/details/73691705

知识点：
1. 父节点： parentNode 和 offsetParent；
2. 兄弟节点：ElementSibling 和 Sibling；
3. 创建节点：
createDocumentFragment() //创建一个DOM片段；
createElement() //创建一个具体的元素；
createTextNode() //创建一个文本节点；
4. 添加、移除、替换、插入节点：
appendChild()
removeChild()
replaceChild()
insertBefore()
5 阻止a链接默认跳转：
点击事件里面添加 return false；
在href属性里面添加 javascript:0；
首先建一个html文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
<!-- 父节点 -->
  <div id="box1">
    <div id="box2"></div>
  </div>
  <!-- 兄弟节点  -->
  <ul id="list">
    <li>hello1</li>
    <li>hello2</li>
    <li>hello3</li>
  </ul>
  <!-- 创建节点 -->
  <input type="" name="" id="inpt">
  <button id="btn">new</button>
  <ul id="list">
    <li>hello</li>
    <li>hello</li>
<!-- 删除节点 -->
  <ul>
    <li>what<a href="javascript:0">del1</a></li>
    <li>what<a href="javascript:0">del2</a></li>
    <li>what<a href="javascript:0">del3</a></li>
  </ul>
</body>
</html>

父节点：
函数实现效果：直接弹出box2 的父元素；
函数的思路：

获取box2的dom节点；
直接用parentNode和offsetParent两个函数弹出其父元素，查看结果；
区分两种不同方式的区别；

   <script>
      window.onload=function(){
        var obox2=document.getElementById('box2');
        alert(obox2.parentNode);
        alert(obox2.offsetParent);
      }
  </script>

这里会弹出两种结果第一个是[object HTMLDivElement]，另一个是[object HTMLBodyElement]，parentNode是寻找其父元素，
offsetParent是寻找全局的父元素body，如果想让offsetParent获得其父元素需要给其父元素添加定位。

#box1{
      height: 200px;
      width: 200px;
      background: blue;
      position:absolute；
    }

这样弹出的两个都是[object HTMLDivElement]；

兄弟节点：
函数实现效果：点击ul 中的li标签获取其兄弟元素的内容innerText；
函数的思路：

首先获取li标签的dom节点；
选择ul中所有的li 标签；
点击所选中的li标签的事件；
查看点击效果；
注意事项；

<script>
  window.onload=function(){
     var ali=document.getElementsByTagName('li');
     for (var i=0; i <ali.length; i++) {
      ali[i].onclick=function(){
        if (this.nextElementSibling) {
          alert(this.nextElementSibling.innerText);
        }else{
          alert(this.nextSibling.innerText);
        }
      }
    }
  }
</script>

注：这里需要注意的是nextElementSibling和nextSibling的兼容问题，nextElementSibling一般是在google浏览器中运用，在ie中其中有一个版本不兼容这边需要用nextSibling；所以这里需要做下判断。

 if (this.nextElementSibling) {
          alert(this.nextElementSibling.innerText);
        }else{
          alert(this.nextSibling.innerText);
         }

创建节点：
函数实现的效果：点击new按钮将出入input的内容添加到ul的li标签中去；
函数思路：
1 首先获取button、input、ul、li的dom节点；

    var oul=document.getElementById('list');
    var ali=oul.getElementsByTagName('li');
    var obtn=document.getElementById('btn');
    var oinpt=document.getElementById('inpt');

2 点击事件；
3 在点击事件里面，新建一个li标签，

    var oli=document.createElement('li')

4 将input里面输入的内容赋值给新建的li元素里面
oli.innerText=oinpt.value;
5将新建的li元素添加到ul里面

    oul.appendChild(oli);

注意这里我们需要的效果是将新加的元素和其内容添加到元素的前面，所以要有用到insertBefore(newChild, refChild)函数，这里需要注意的是如果原有的父元素是有子元素时insertBefore(newChild, refChild)是可以用的，但是有一种特殊的情况是如果原有的父元素没有子元素这样insertBefore(newChild, refChild)是不可以用的，所以这里需要一个判断，

<script>
  window.onload=function(){
    var oul=document.getElementById('list');
    var ali=oul.getElementsByTagName('li');
    var obtn=document.getElementById('btn');
    var oinpt=document.getElementById('inpt');
    obtn.onclick=function(){
        var oli=document.createElement('li')
          oli.innerText=oinpt.value;
          oinpt.value="";
        if (ali.length>0) {
          oul.insertBefore(oli, ali[0])
        }else{  
          oul.appendChild(oli);
        }
      }
    }
</script>

删除节点：
函数实现效果：点击a标签删除自身和其父元素，
函数思路：
1.首先获取a标签和ul标签的dom节点；
2.点击事件；
3.ul 移除其子元素；
4. 应该注意的事项a标签的默认跳转问题；

<script>
  window.onload=function(){
    var oul=document.getElementsByTagName('ul')[0];
    var oa=document.getElementsByTagName('a');
  for (var i = 0; i < oa.length; i++) {
     oa[i].onclick=function(){
       oul.removeChild(this.parentNode);
       return false;
      }
    }
  }
</script>