一、节点常用操作
document.createElement()用来生成网页元素节点，参数为元素的标签名
document.createTextNode()用来生成文本节点，参数为所要生成的文本节点的内容
node.appendChild()接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点
node.hasChildNodes()返回一个布尔值，表示当前节点是否有子节点
node.removeChild()接受一个子节点作为参数，用于从当前节点移除该子节点
node.cloneNode()用于克隆一个选中的节点。它接受一个布尔值作为参数，表示是否同时克隆子节点，默认是false，即不克隆子节点。注意: 不会克隆绑定到该元素上的事件
node.innerHTML返回该元素包含的 HTML 代码。该属性可读写，常用来设置某个节点的内容；（不属于W3C DOM规范）
node.innerText返回该元素包含的内容。该属性可读写
node.nextElementSibling返回紧跟在当前节点后面的第一个同级Element节点，如果当前节点后面没有同级节点，则返回null
node.previousElementSibling返回紧跟在当前节点前面的第一个同级Element节点，如果当前节点前面没有同级节点，则返回null
node.parentElement返回当前节点的父级Element节点
node.childNodes返回一个NodeList集合，成员包括当前节点的所有子节点(注意空格回车也算)
node.firstChild返回树中节点的第一个子节点，如果节点是无子节点，则返回null
node.lastChild返回该节点的最后一个子节点，如果该节点没有子节点则返回null
<!-- 节点操作 -->
<body>
<div id="div" style="border:1px solid red;">
div内容
<span>span内容</span>
</div>
</body>
<script>
//创建元素、标签节点
var p = document.createElement('p');
//创建文本节点
var pText = document.createTextNode('P标签内内容');
//为元素添加子元素
p.appendChild(pText);
document.getElementById('div').appendChild(p);
</script>
二、节点属性
<body>
<div id="div" zdy="zdy">
</div>
</body>
<script>
var div = document.querySelector('#div');
//获取原有标准属性的值
console.log(div.id);
//获取自定义属性的值
console.log(div.zhy); //undefined
</script>
属性操作的标准方法：
node.getAttribute()返回当前元素节点的指定属性。如果指定属性不存在，则返回null
node.setAttribute()为当前元素节点新增属性。如果同名属性已存在
node.hasAttribute()返回一个布尔值，表示当前元素节点是否包含指定属性
node.removeAttribute()从当前元素节点移除属性
<body>
<div id="div">
</div>
</body>
<script>
var div = document.querySelector('#div');
//设置属性，有则修改，无则添加，可设置非标准属性
div.setAttribute('id','d');
div.setAttribute('zdy','zdy');
//获取属性值，可获取非标准属性
console.log(div.getAttribute('id')); //d
console.log(div.getAttribute('zdy')); //zdy
</script>
三、css样式属性
节点对象.style.样式属性方式只能获取行内css样式，而写在 style 标签内的样式表，无法获取和修改。
getComputedStyle()接受一个节点对象，返回该节点对象最终样式信息的对象，所谓“最终样式信息”，指的是各种CSS规则叠加后的结果
注意： getComputedStyle() 是window对象下的方法，不是DOM对象
在具体使用的时候还有一些需要重点注意的细节：
1、名字需要改写，将横杠从CSS属性名中去除，然后将横杠后的第一个字母大写：
比如background-color写成backgroundColor
2、属性值都是字符串，设置时必须包括单位：
比如，divStyle.width的值不能写为100，而要写为100px
<style>
#div{
width: 200px; height: 200px; border: 1px solid red;
}
</style>
<body>
<div id="div"></div>
</body>
<script>
document.getElementById('div').onclick = function(){
this.style.width = parseInt(getComputedStyle(div).width)+10+"px";
this.style.height = parseInt(getComputedStyle(div).height)+10+"px";
}
</script>
网友评论