首页 > 代码库 > js常用dom操作

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不会)

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

获取兄弟节点

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

 

dom属性操作

  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

 

节点操作(先创建 -> 再插入)

  创建元素节点createElement(‘p‘); ;创建文本节点createTextNode(‘今天星期几‘);

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

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

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

 

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

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