JS的Dom树小结

时间:2023-03-08 17:40:33
一【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(新节点,被替换节点):用新节点替换指定节点。如果新节点为页面中已有节点,会将此节点删除后,替换到指定节点。