js常用dom操作

利用dom获得页面元素节点

　　a) document.getElementById()    //id获得元素节点对象

　　b) document.getElementsByTagName()   //html标签获得元素节点对象（数组）可以通过一个节点找到他的下级节点

　　c) document.getElementsByName();　　//常用于表单（数组）

 

属性判断当前节点类型nodeType 

　　a)        1  元素节点

　　b)        2  属性节点

　　c)        3  文本节点

　　d)        9  文档节点

获取到的节点的数量dom.length；获取文本节点的内容dom.nodeValue；元素节点的名称nodeName

 

获取父节点parentNode

获取子节点childNodes（firefox、chrome等会把换行也当成子节点，IE不会）dom.childNodes[0]

　　获取第一个子节点firstChild；最后一个子节点lastChild

获取兄弟节点

　　上一个节点previousSibling；下一个节点nextSibling

 

dom属性操作

　　dom.attributes:        代表该节点的所有html属性

　　dom.name="username";　　　　　　//直接取值赋值（只能对w3c标准属性有效）

　　setAttribute('name','username');　　//通过方法取值赋值（对任何属性都有效）

　　var name = getAttribute('name');

　　

dom操作class属性时注意：因为class是关键字，不能直接dom.class='';而应该dom.className='';通过getAttribute和setAttribute方法不用变。

 

dom操作样式(对样式的操作只针对行内样式)

　　dom.style.width = "100px";

因js变量名不能含有-，所以如果样式属性中带-的名称需要转换成驼峰式的名称，例如background-color（->）backgroundColor

一个标签对象的float样式属性，其在脚本中的语法必须是这样写：

对象名.style.cssFloat;（FF中）             对象名.style.styleFloat;（IE中）

取值示例：   var  v1 = obj1.style.cssFloat;                   //这是FF，IE为：obj1.style.styleFloat

赋值示例：  obj1.style.cssFloat = “left”;              //这是FF，IE为：obj1.style.styleFloat

　　

 

节点操作（先创建 -> 再插入）——插入和替换节点由父节点执行

　　创建元素节点createElement('p'); ；创建文本节点docment.createTextNode('今天星期几');

　　追加节点prentNode.appendChild(创建的节点的名称);

　　prentNode.insertBefore(new,old)插入到old节点前面做为兄弟节点；

 

删除节点:parent.removeChild(node);

appendChild()和insertBefore()不仅可以执行追加节点，还可以执行节点位置移动的操作。

节点替换prentNode.replaceChild(new,old)

节点复制dom.cloneNode()复制一个dom节点（包括子节点）；dom.cloneNode(false)（不包括子节点）；复制之后需要追加到文档里面。

 

删除某节点下所有的子节点

var div = document.getElementById("div1");
while(div.hasChildNodes()) //判断div下是否还还有子节点
    {
        div.removeChild(div.firstChild);
    }

　　

转载于:https://www.cnblogs.com/zixueit/p/3837958.html