JS的Dom树小结

Posted 2020-09-11 L茨木

一【DOM树节点】

 DOM节点分为三大类：元素节点、文本节点、属性节点

文本节点、属性节点，为元素节点的两个子节点；

 通过getElement系列方法，可以去到元素节点。

 

 

二【查看节点】

1、getElementById：通过ID获取唯一的节点；多个同名ID，只会取第一个；

2、getElementsByName：通过Name取到一个数组，包含1到多个节点；

使用方式：通过循环，取到每一个节点。循环次数：从0开始,<数组.length

 

 

三【查看和设置属性节点】

 1、查看属性节点： getAttribute("属性名");

 2、设置属性节点： setAttribute("属性名","属性值");

 

 

四【JS修改样式总结】

 1、.className : 为元素设置一个新的class名字；

 div1.className = "class1";

 

 2、.style : 为元素设置一个新的样式，注意驼峰命名法；

 div1.style.backgroundColor = "red";

 

 3、.style.cssText : 为元素同时修改多个样式；

 div1.style.cssText = "width:100px;height100px;";

 

 五【查看节点】

1、tagName属性：获取节点的标签名；

2、innerhtml:设置或者获取节点内部的所有HTML代码；

 3、innerText:设置或者获取节点内部的所有文字；

 

 

window.onload = function(){

var div1 = document.getElementById("div1");

}

function getById(){

 取到元素节点的样式属性节点

var divStyle = document.getElementById("div1").style;/divStyle.backgroundColor = "blue"; 所有节点属性，一律驼峰命名法

 

 取到元素节点

var div = document.getElementById("div1");

 

 

console.log(div.innerHTML); //取到div中所有内容

div.innerHTML = "<s>jianghao</s>"; // 重置修改div中的HTML代码

 

 

六[获取层次节点的常用属性]

 

 1 .childNodes：(数组)获取元素的所有子节点

 2 .firstChild：获取元素的第一个子节点；

 3 .lastChild:获取元素的最后一个子节点；

 4 .ownerDocument:获取当前文档根节点。在html文档中，为document节点

 5 .parentNode:获取当前节点的父节点；

 6 .previousSibling:获取当前节点的前一个兄弟节点

 7 .nextSibling:获取当前节点的后一个兄弟节点

 

 注：上述属性，均会获得所有的元素节点和文本节点，如果只需要元素节点，需要使用对应Element属性，例如：firstChild--->firstElementChild

 

 8 .attributes:获取当前元素节点的所有属性节点

 

 

七【创建并新增节点】

 

 1、.createElement("标签名"): 创建一个新的节点。需要配合.setAttribute()方法设置新节点的相关属性；

2、 .appendChild(节点名): 在某元素的最后追加一个新节点

 3、 .insertBefore(新节点名,目标节点名):将新节点，插入到目标节点之前

 4、 克隆节点.cloneNode(true/false): 需要克隆谁，就用谁去调用克隆对象；

 >>>传递参数可以为true或false:

① true表示：克隆当前节点及所有子节点；

 ② false表示：只克隆当前节点，不可隆子节点(默认)

 

 

 八【删除/替换节点】

 

 1、 .removeChild(需删除节点):从父容器中，删除指定节点；

 2、 .replaceChild(新节点,被替换节点):用新节点替换指定节点。如果新节点为页面中已有节点，会将此节点删除后，替换到指定节点。