利用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);
}