javascript--DOM对象模型的常用操作属性和方法(转载)
DOM的原理是将XML/XHTML文档装入内容,并以节点的形式解析为一棵节点树。
DOM提供相应的API,可以对节点树进行增删改查
下面以代码的形式介绍一下dom常用的一些节点或方法:
//---------横向关系
//查找em的哥哥节点的文本
//node.previousSibling.nodue="huang";
//查找em的弟弟节点的文本
//alert(node.nextSibling.nodue);
//---------垂直关系
//查找em父亲的name
//alert(node.parentNode.nodeName)
//查找em父亲的类型:1代表元素类型 2代表属性类型
//alert(node.parentNode.nodeType)
//查找em父亲的第一个儿子的文本信息
//alert(node.parentNode.firstChild.nodue)
//查找em父亲的最后一个儿子的文本信息
//alert(node.parentNode.lastChild.nodue)
//查找em有多少个儿子
//alert(node.childNodes.length)
//判断他的类型和标签名称
//alert(node.nodeType);
//alert(node.nodeName);
//查找节点:三种方式。
//1:getElementById(); --比较常用,根据id获取节点,缺陷:如果要获取一个相同的节点,每个节点都需要加上一个id。所以引发了另一种。getElementsByTagName();
//2:getElementsByTagName(); --根据标签名称获取元素。
//3:getElementByName(); --专门争对单选框和多选框。因为单选框和多选框他们的name值都是一样的。
//具体用法
//var node = document.getElementById("emnode"); //获取一个元素
//var nodeName = document.getElementsByTagName("li"); //获取整个文档中的li标签
//var nodeName1 = node.getElementsByTagName("li"); //只获取node节点下面的li标签
//var name = document.getElementByNmae("radioName"); //获取选中框的name属性。 用于单选框和多选框
//争对dom文档中的增删改查
//增加元素
//创建元素
//document.createElement("标签名称"); 如:document.createElement("div");
//创建文本节点
//document.createTextNode("文本内容");
//追加到元素中。
//div.appendChild(p); //往div标记里面追加一个p标记
//从前面进行插入元素
//p.insertBefore("插入的节点","放在谁都前面"); 如:p.insertBefore("p","p");
//克隆第一个节点
//p.firstChild.cloneNode(); //潜克隆(只有本身)
//p.firstChild.cloneNode(true); //深克隆(本身和他里面的元素)
//修改元素
//设置文本元素的属性
// text.setAttribute("属性值","内容"); 如:text.setAttribute("value","ok");
// text.getAttribute("属性值"). 如:text.getAttribute("value").
// text.value="ok" 最常用
//删除元素
//p.parendNode.removeChild(p);
//判断是否有子节点
//div.hasChilldNodes();
//innerHTML:内部html 缺陷:微软里面不支持<table>和<select>标签