操作DOM 和 节点

动态操作 DOM

获取（标签）元素     （在css中叫标签，在js中叫元素）

用 document.getElen....../ children......等，来获取的元素是动态的数组，可以用 Array.from() 包一下变成静态的。或者直接用 querySelec...... 来获取。

    /*
    const  let  var  都可以，用const声明的是不可修改的，一般不会修改元素。所以可以用const
    可以在document下获取，也可以在元素下获取
    */
    const name1 = document.getElementsByClassName('ele');//通过 class 获取一个或多个元素
    const name2 = document.getElementsByTagName('ele');//通过 标签 获取一个或多个元素
    const name3 = document.getElementById('ele');//通 id 获取元素 id 是唯一的。
    const box = document.querySelector('ele|.ele|#ele');//通过 （标签|class|id） 来获取一个元素
    const eles = box.querySelectorAll('ele|.ele|#ele');//在box标签下获取一组元素

DOM 节点的属性:

五种节点类型	nodeType	nodeName	nodeValue
元素节点	1	大写的标签名	null
属性节点	2
文本节点	3	#text	文本的内容
注释节点	8	#comment	注释的内容
document	9	#document	null

--父节点：
parentNode:父节点

--子节点：
childNodes:所有子节点
children:所有事标签类型的子节点
firstChild:第一个子节点
lastChild:最后一个子节点

--兄弟节点：
nextSibling:下一个兄弟节点
previousSibling:上一个兄弟节点

--属性节点：
attributes
document.body.attributes[0];
document.body.attributes.color;
document.body.attributes["onload"];

DOM方法：
--创建节点：
creatElement() 创建标签
createTextNode()创建文本
creatAttribute()创建属性节点

--插入节点
appendChild()在末尾插入   //box.appendChild(p);
insertBefore(new,XX)在XX的前面插入 // box.insertBefore(p,last)

--删除：
remove()直接删除
removeChild()删除父节点的某子元素

//let last = document.getElementById("last");
//box.removeChild(last)

--替换：
replaceChild(new,old）将谁的子节点old替换成new

cloneNode ;克隆元素;

接收一个布尔类型的参数；true,false ;如果不传参数，默认是false；

// 浅克隆
// 深克隆
//console.log(box.cloneNode(true));
//a.appendChild(box.cloneNode(true))

DOM属性
offsetHeight:带边框的高度
clientHeight:可视高度（不包含滚动条）
offsetTop/Left:相对于定位父级的距离
clientTop/Left:指边框的大小（上/左）
scrollTop:滚动上去的距离
scrollHeight:可以滚动的距离

window属性
innerWidth：不包含工具栏
outerWidth:包含工具栏

getAttribute   获取行间自定义属性

// setAttribute : 设置行间属性
// removeAttribute: 删除行间属性；
// console.log(box.getAttribute("flag"));
// box.setAttribute("o",1)
// box.removeAttribute("flag");

//<div id="box" index="1" xiaopipi="皮皮虾"></div>
const box = document.getElementById('box');
/*
getAttribute（获取获取行间自定义属性）的实现原理 ：循环一下obj的自定义属性，
找到自定义属性的时候，获取属性的value值。如果没有找到这个属性，就返回null。
*/
function getAttribute(obj, attr) {
  let attrs = obj.attributes;
  for (let i = 0; i < attrs.length; i++) {
    if (attrs[i].nodeName === attr) {
      return attrs[i].nodeValue;
    }
  }
  return null;
}
console.log(getAttribute(box, 'xiaopipi')); //皮皮虾


// setAttribute 使用方法
document.getElementById("demo").setAttribute('style','color:red');

 

获取节点的计算后的css样式

今天在做东西的时候，遇到一个问题：想获取节点style指定的CSS属性，如：ele.style.display属性，如果在节点中没有设置其style.display属性的话则通过ele.style.display这种方式获取的值为空字符串。

如果节点ele是一个块状元素的话，通过上述方式返回的display的值则应该为：block的，而其得到的值为空字符串并非我想得到的，在网上查找了了一下，浏览器中提供了一个方法：window.getComputedStyle() 的方法可以得到节点的计算后样式，该方法有两个参数，第一个是要所要获取的样式的节点，第二个参数不知道是什么作用，网上给出的例子都将设置成null；即是这样调用的：window.getComputedStyle(node,null)，其返回值为一个对象，为计算后的样式的属性值对的集合。

但是IE浏览器中不支持该方法，不过在IE中，元素节点有一个属性对应的也是该节点计算后的方法，例如，在IE中节点node计算后的样式为：node.currentStyle，该属性是一个对象，也是计算后的样式的属性值对的集合。为了兼容性我们可以将其封装改写一下，提供一个统一的方法getCurrentStyle(node)，如下：

// 参数node：将要获取其计算样式的元素节点
function getCurrentStyle(node) {
    var style = null;
    
    if(window.getComputedStyle) {
        style = window.getComputedStyle(node, null);
    }else{
        style = node.currentStyle;
    }
    
    return style;
}

以下代码是获取其中div的display的样式属性值：

<div id="div">div节点</div>

<script>
var div = document.getElementById("div");
var style = getCurrentStyle(div);
var display = style["display"];

alert(display);    // 输出：block
</script>