节点创建删除、元素属性设置获取、节点属性

小六*^____^*

已于 2023-04-24 11:38:34 修改

阅读量381

点赞数

分类专栏： DOM 文章标签： javascript html 前端

于 2023-04-24 11:21:47 首次发布

本文链接：https://blog.csdn.net/weixin_43641912/article/details/129174307

版权

DOM 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

节点创建创建

document.createElement()创建元素节点

  var div = document.createElement('div');
  div.innerHTML = '123';
  document.body.appendChild(div);

createTextNode()创建文本节点

  var text = document.createTextNode('创建文本节点');
  document.body.appendChild(text);

document.createComment()创建注释节点

 var comment = document.createComment('创建注释节点');
  document.body.appendChild(comment);

插入节点

appendChild()增加子节点，动态的增加节点和动态的剪切节点在Node.prototype上

  var a = document.getElementsByTagName('a')[0];
  var div = document.createElement('div');
  div.innerHTML = '<p>段落标签</p>';
  document.body.appendChild(div);
  div.appendChild(a);//剪切功能

在这里插入图片描述

在这里插入图片描述
c.insertBefore(a,b)插入,在父级c节点下的子节点b之前插入a,Node.prototype

 <div>
    <p>段落标签</p>
  </div>

  var div = document.getElementsByTagName('div')[0];
  var p = document.getElementsByTagName('p')[0];
  var a = document.createElement('a');
  a.href = '';
  a.innerText = 'a 标签';
  div.insertBefore(a, p);

节点删除

父节点.removeChild(子节点)只是从dom树上删除，这个值还保存在内存中
在这里插入图片描述

直接使用remove，就全部删除了
在这里插入图片描述

替换节点

parent.replaceChild(new, origin)替换节点

var div = document.getElementsByTagName('div')[0];
    var p = document.getElementsByTagName('p')[0];
    var h2 = document.createElement('h2');
    h2.innerText = '替换的H2标签';
    div.replaceChild(h2, p);

获取和设置节点属性

获取节点属性getAttribute()
setAttribute 给元素增加属性和属性值

div.setAttribute('id', 'box');

var attr = div.getAttribute('id');

setAttribute小案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
  .normal{
      color: #bfa
  }
  .waring{
      color: coral;
  }
  .success{
      color: cyan;
  }
  
  </style>
</head>
<body>
  <div class="normal">
    <p data-myattr="data-attr">段落标签</p>
  </div>
<script type="text/javascript">
  var div = document.getElementsByTagName('div')[0];
  function setClass(type){
    div.setAttribute('class', type);
    switch(type){
      case 'normal':
        div.innerHTML = '很正常';
      case 'warning':
        div.innerHTML = '报警';
      case 'success':
        div.innerHTML = '成功'
      
    }
  }
  setClass('waring');
  
</script>
</body>
</html>

HTML5给元素增加了一个*data-属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div>
    <p data-myattr="data-attr">段落标签</p>
  </div>
<script type="text/javascript">

    var div = document.getElementsByTagName('div')[0];
    var p = document.getElementsByTagName('p')[0];
    var h2 = document.createElement('h2');
    h2.innerText = '替换的H2标签';
    div.replaceChild(h2, p);
    console.log(p.dataset.myattr);//data-attr
    p.getAttribute('data-myattr');
</script>
</body>
</html>

在原型上写一个遍历父元素的子元素节点的方法

   Element.prototype.getChildrenNodes = function (nodeth) {
      var children = this.childNodes;
      var nodeTem = {
        'length':0,
        'push': Array.prototype.push,
        'splice': Array.prototype.splice
        
    };
      for (var i = 0; i < children.length; i++) {
        var childrenItem = children[i];
        if (childrenItem.nodeType === 1) {
          nodeTem.push(childrenItem);
        }
      }
      if (nodeth !== undefined && typeof nodeth !== 'number') {
        return undefined;
      }
        return nodeth === undefined ? nodeTem : nodeTem[i];
    }

在原型上写一个找出一个元素的第N层父元素

Element.prototype.getParentElement = function (n) {
     var type = typeof n,
          cur = this;
     if(n === undefined || type !== 'number')
     {
       return undefined;
     } else if(n < 0){
       return undefined;
     }
     
     while(n){
     if(cur.nodeName === 'HTML'){
     	cur = null;
     	return cur;
     }
       cur = cur.parentNode;
       n--;
     }
     return cur

    }

原型上写hasChildren,判断有没有子元素节点；

 Element.prototype.hasChildren = function(){
    var children = this.childNodes,
        item;
      for(var i = 0; i < children.length; i++){
        item = children[i];
        if(item.nodeType === 1)
        {
         return true;
         
        }
          return false;
      }
  }

在原型上写一个，寻找兄弟元素节点的方法，为正找之后，为负数，之前的第N个，为0 找自己

 Element.prototype.getSibling  = function(n){
    var children = this.parentNode.childNodes,
        ele = this;
        // if(n < 0){
        //   while(n){
        //     ele = this.previousElementSibling;
        //     n++;
        //   }
        // } else if(n> 0){
        //   while(n){
        //     ele = this.previousElementSibling;
        //     n--;
        //   }
        //
        // }
    
  //    或者
  //   while(n){
  //     if(n < 0){
  //       ele = ele.previousElementSibling;
  //       n++;
  //     } else if(n > 0){
  //       ele = ele.nextElementSibling;
  //       n--;
  //     }
  //
  //   }
  // 考虑兼容性
    while(n){
      if(n < 0){
        if(ele.previousElementSibling){
          ele = ele.previousElementSibling;
        } else {
          for(ele = ele.nextSibling; ele.nextSibling && ele.nodeType !== 1;ele = ele.nextSibling);
        }
        n--;
      }else if(n > 0){
        if(ele.previousElementSibling){
          ele = ele.previousElementSibling;
        } else {
          for(ele = ele.previousSibling; ele && ele.nodeType !== 1; ele = ele.previousSibling);
        }
      }
    }
    
  }

原型上封装insetAfter()方法

Element.prototype.insertAfter = function(newNode, orgin)
{
	var ele = orgin.nextSilibing;
	if(!ele)
	{
		this.appendChild(newNode);
	}else {
		this.insterBefore(newNode, orgin);
	}
}

写一个子元素逆序的方法

var oDiv = documet.getElementsByTagName('div')[0],
	children = oDiv.childNodes,
	len = childern.length;
	while(len--){
		oDiv.appendChild(children[len]);
	}

小六*^____^*

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
节点创建删除、元素属性设置获取、节点属性

c.insertBefore(a,b)插入,在父级c节点下的子节点b之前插入a,Node.prototype。appendChild()增加子节点，动态的增加节点和动态的剪切节点在Node.prototype上。在原型上写一个，寻找兄弟元素节点的方法，为正找之后，为负数，之前的第N个，为0 找自己。父节点.removeChild(子节点)只是从dom树上删除，这个值还保存在内存中。在原型上写一个遍历父元素的子元素节点的方法。在原型上写一个找出一个元素的第N层父元素。写一个子元素逆序的方法。
复制链接

扫一扫