各位早上中午下午晚上好

今天是关于DOM的笔记

DOM

DOM属性节

nodeType 节点类型
常用的节点有3个
   1 元素节点 oBox.nodeType 重点 //1为 .nodeType 后的值 是节点类型
   2 属性节点 oBox.attributes[0].nodeType
   3 文本节点 oBox.childNodes[0].nodeType
拓展
   8 注释节点
   

1, 属性节点的属性

attributes属性: 获取某元素节点的所有属性节点(返回一个数组)。

var box = document.getElementById(‘box’);
box.attributes;   //[object NamedNodeMap]
box.attributes.length;   //返回属性节点个数 
box.attributes[0];   //[object Attr], 返回第一个属性节点 

box.attributes[0].nodeType;    //2，节点类型 
box.attributes[0].nodeName;  //属性名称 
box.attributes[0].nodeValue;   //属性值 

box.attributes[‘id’];   //返回属性名称为id的节点
box.attributes.getNamedItem(‘id’);   //返回属性名称为id的节点

2, 属性节点操作的三个函数

 我们通过三个函数可以操作元素的属性:
    getAttribute(): 通过属性名获取对应的属性值 
    setAttribute(): 设置一个key-value形式的属性键值对  
    removeAttribute(): 移除指定的属性

关于getAttribute()

getAttribute()
     getAttribute()方法将获取元素中某个属性的值。
     它和直接使用点语法(.属性)获取属性值的方法有一定区别.

例如: 
1.
document.getElementById(‘box’).getAttribute(‘id’);  获取元素的id属性值 
document.getElementById(‘box’).id;  获取元素的id属性值(点语法)
2.
document.getElementById(‘box’).getAttribute(‘class’); 获取元素的class值
document.getElementById(‘box’).className; 获取元素的class值(点语法)
3.
//获取元素的自定义属性值(不可以使用点语法)
document.getElementById(‘box’).getAttribute(bbb);  
document.getElementById(‘box’).bbb; 无法获取元素的自定义属性值

关于setAttribute()

setAttribute()
     setAttribute()方法可以给元素添加属性; 
     如果属性已经存在, 则会覆盖原来的属性;  需要传入两个参数：属性名和属性值.
例如: 
//设置属性和值
document.getElementById(‘box’).setAttribute(‘align’, ‘center’); 
//设置自定义的属性和值
document.getElementById(‘box’).setAttribute(‘bbb’, ‘ccc’); 

关于removeAttribute()

removeAttribute()
      removeAttribute()方法可以移除元素的属性。

//移除属性
 document.getElementById('box').removeAttribute('style'); 

实例

<button>查看属性</button>
<button>获取属性</button>
<button>设置属性</button>
<button>删除属性</button>
<img src="1632997499094.jpg" alt="">//需要自行设置img大小

<script>
    var oBtns = document.querySelectorAll('button')
    var oImg = document.querySelector('img')

    //查看属性 attributes 获取当前dom的所有属性
    oBtns[0].onclick = function () {
        console.log(oImg.attributes);
        for(var key in oImg.attributes){
            if (oImg.attributes[key].nodeType == 2) {
                console.log(oImg.attributes[key]);
            }
        }
    }

    //获取属性 getAttribute('属性名称') 返回属性的值
    oBtns[1].onclick = function () {
        var val  = oImg.getAttribute("src")
        console.log(val);
    }


    //设置属性 setAttribute('属性名称','属性的值') 
    oBtns[2].onclick = function () {
        oImg.setAttribute('src','1602330532675.jpg')
    }

    //删除属性 removeAttribute('属性名称') 要指定属性名称
    oBtns[3].onclick = function () {
        oImg.removeAttribute('src')
    }
</script>

DOM节点间关系

元素节点间关系的相关属性
1.
childNodes: 子节点集合
firstChild: 用于获取当前元素节点的第一个子节点，相当于childNodes[0]；
lastChild: 用于获取当前元素节点的最后一个子节点, 相当于
              childNodes[box.childNodes.length-1].

例如: 
//获取第一个子节点的文本内容
console.log(box.firstChild.nodeValue); 
//兼容写法
var oChild = oBox.firstElementChild || oBox.firstChild

//获取最后一个子节点的文本内容
console.log(box.lastChild.nodeValue); 
//兼容写法
var oLast = oBox.lastElementChild || oBox.lastChild

2.
parentNode、previousSibling、nextSibling 
parentNode:  属性返回该节点的父节点，
previousSibling:  属性返回该节点的前一个同级节点，
nextSibling:  属性返回该节点的后一个同级节点。 

例如: 
console.log(box.parentNode.nodeName);  //获取父节点的标签名 
console.log(box.lastChild.previousSibling); //获取前一个同级节点
console.log(box.firstChild.nextSibling);       //获取后一个同级节点

DOM操作

DOM节点操作
    DOM节点操作指的是: 创建节点、复制节点、插入节点、删除节点和替换节点等. 

DOM操作所涉及的方法有: 
    createElement(); 创建一个元素节点
    appendChild(); 添加一个新子节点到子节点的末尾
    createTextNode(); 创建一个文本节点
    insertBefore(); 将新节点插入到某节点前面
    replaceChild(); 将新节点替换旧节点
    cloneNode(); 复制节点
    removeChild(); 移除节点

1, createElement()创建

createElement()方法可以创建一个元素节点。
例如: 
var newEle = document.createElement(‘div’);

2, appendChild()添加

appendChild()方法可以将一个新节点添加到某个节点的子节点列表的末尾上。 

例如: 
var box = document.getElementById(‘box’); 
var pNode = document.createElement(‘p’);   //创建一个新元素节点<p> 
box.appendChild(pNode);   //把新元素节点<p>添加box节点的子节点末尾

3, createTextNode()创建文本节点

  createTextNode() 方法可以创建一个文本节点。 

例如: 
var textNode = document.createTextNode(‘段落’); //创建一个文本节点
p.appendChild(textNode);  //将文本节点添加到子节点末尾

4, insertBefore()插入

insertBefore()方法可以把节点插入到指定节点的前面。 

例如: 
//通过父节点调用, 在box之前插入一个新节点p;
//第一个参数为新节点
//第二个参数为参考位置
//第二个参数为null时，效果等于appendChild()
box.parentNode.insertBefore(p, box); 

5, replaceChild()替换

replaceChild()方法可以把节点替换成指定的节点。 

例如: 
//通过父节点调用, 新节点p替换了旧节点div
//第一个参数为新节点, 第二个参数为旧节点
box.parentNode.replaceChild(p, box);

6, cloneNode()克隆

cloneNode()方法可以把子节点复制出来。 

例如: 
//获取第一个子节点, true表示复制标签和内容(也叫深克隆) , false表示只复制标签(也叫浅克隆)
//不管是深克隆还是浅克隆都不能克隆事件
var box = document.getElementById(‘box’);
Var newNode = box.firstChild.cloneNode(true); 
box.appendChild(newNode);  //添加到子节点列表末尾

7, removeChild()删除

removeChild()方法可以删除指定子节点

例如: 
//通过父节点调用, 来删除指定子节点
box.parentNode.removeChild(box);

事件中的this

在JS事件中, this表示触发事件的元素节点对象;
当变量名称过长或者不定时，使用this表示当前对象

var box = document.getElementById('box'); 
box.onclick = function() { 
  console.log(this.nodeName);  //this表示box对象 
};

通过for循环添加事件, 使用this
var aInput = document.getElementsByTagName('input');
for (var i=0; i<aInput.length; i++) { 
    aInput[i].onclick = function() { 
            console.log(this.value);  //这里的this表示被点击的那个input元素节点对象 
    };
}

innerHTML,innerText,nodeValue;

innerHTML,innerText 可以设置,也可以获取
设置 innerText 内容原封不动的显示
innerHTML 如果遇到标签会被渲染
nodeValue 通过childNodes,获取到文本节点才能使用(不常用)

排他思想

  需求:保证只有1个红色按钮,点击的时候,给当前按钮设置红色
  var oBtns = document.querySelectorAll("button");

  排他思想
  for (var i = 0; i < oBtns.length; i++) {
    oBtns[i].index = i;//设置值
    oBtns[i].onclick = function () {
      //鼠标点击了谁,this就是谁
      //点击后,把所有的按钮的背景颜色设置成为""
      for (var j = 0; j < oBtns.length; j++) {
        oBtns[j].style.backgroundColor = "";//置空
      }
      //再给当前的按钮,设置红色
      this.style.backgroundColor = "red";
      alert(this.index); //取值
    }
  }