三、节点操作

节点定位

getElementById(elementId)
//寻找一个有着给定id属性值的元素，返回一个元素节点 ,document.getElementById(IDvalue)

getElementsByTagName(tagName)
//用于寻找有着给定标签名的所有元素，document.getElementsByTagName(tagName)

getElementsByName(elementName)
//在HTML中checkbox和radio都是通过相同的name属性值，来标识一个组内的元素。如果我们现在要获取被选中的元素，首先获取改组元素，然后循环判断是节点的checked属性值是否为true即可

创建节点：

document.createElement(element)
//参数为要新添的节点标签名，egnewnode=document.createElement("div");

document.createTextNode(string)
//创建一个包含着给定文本的新文本节点,eg:document.createTextNode("hello");

eg：

var a =document.createElement("span");
var b =document.createTextNode("cssrain");
a.appendChild(b);

添加节点:

//添加子节点：

node.appendChild(newChild) //newChild为生新增的节点.eg: document.body.appendChildNode(o) document.forms[0].appendChildNode(o)

//插入节点
node.insertBefore(newNode,targetNode)
node.insertAfter(newNode,targetNode);

修改节点：

 //删除节点
node.remove()[2] //当某个节点被remove方法删除时，这个节点所包含的所有子节点将同时被删除。
node.removeChild(node) //eg:document.body.removeChild(node)
node.removeNode()//IE支持，但FF不支持,推荐用removeChild代替实现

//替换节点
node.replaceChild(newChild,oldChild) //oldChild节点必须是node元素的一个子节点。
node.replaceNode() node.swapNode()//只有IE支持replaceNode与swapNode方法，其他浏览器则不支持。

复制节点：

 //返回复制节点引用
node.cloneNode(bool)//bool为布尔值，true / false 是否克隆该节点所有子节点 ,eg:node.cloneNode(true)

出处：阿里妈妈UED
责任编辑：bluehearts

上一页 小结下dom节点操作 [1] 下一页 小结下dom节点操作 [3]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。