Js节点操作

天使之翼 ` 2019-06-29

展开全文

一、节点常用操作

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>