JS的Dom树小结

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

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

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

 

 

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

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

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

 

 

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

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

 

 

 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代码