| 标题：dom学习 |
发帖时间：2017-06-14 10:32:27 |
乌托
获取节点
getElementById(id) //获取id
getElementsByName(name) //获取name
IE下通过getElementsByName(name)只能取得表单元素的节点；
IE下不区分id和name，也就是说通过getElementsByName(name)取得的节点数组也包含id和name相同的了，通过getElementById(id)，也可以将name作为参数，看MSDN的官方说明。
getElementsByTagName_r(tagName) //获取标签
getElementsByClassName() //获取class ：在 ie5,6,7,8 中无效。
获取关系节点
parentNode //父节点
firstChild //第一个子节点
lastChild // 最后一个自节点
childNodes和children //所有子节点：各种版本各种浏览器下表现都不一样，有兼容性问题。
document.documentElement //获取根节点
document.body //获取body节点
节点信息
nodeName(tagName)
元素节点的nodeName是标签名称
属性节点的nodeName是属性名称
文本节点的nodeName是#text
文档节点的nodeName是#document
nodeValue
文本节点的nodeValue包含文本
属性节点的nodeValue包含属性值
元素节点和文档节点没有nodeValue
nodeType.
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
appendChild() //追加子节点
removeChild() //删除子节点
replaceChild(newnode,oldnode) //替换子节点
insertBefore() //在指定的子节点前面插入新的子节点
createAttribute() //创建属性节点
createElement_x() //创建元素节点
createTextNode() //创建文本节点
getAttribute() //返回指定的属性值
setAttribute() //把指定属性设置或修改为指定的值。
innerHTML //获取内部的html
style //获取css :属性使用驼峰式写法
乌托
回复:js中的dom操作
2017-06-07 10:28:33
一些解决浏览器dom操作兼容性问题的方法
//下一个兄弟节点
function nextSibling(node) {
var lastNode = node.parentNode.lastChild;
if (node == lastNode) return null;
var nextNode = node.nextSibling;
while (nextNode.nodeType != 1 && nextNode.nextSibling != null) {
nextNode = nextNode.nextSibling;
}
return (nextNode.nodeType==1)? nextNode:null;
}
//前一个兄弟节点
function prevSibling:(node) {
var firstNode = node.parentNode.firstChild;
if (node == firstNode) return null;
var prveNode = node.previousSibling;
while (prveNode.nodeType != 1 && prveNode.previousSibling != null) {
prveNode = prveNode.previousSibling;
}
return (prveNode.nodeType==1)? prveNode:null;
}
//第一个子节点
function firstChild(node){
var firstChildNode = node.firstChild;
while (firstChildNode.nodeType != 1 && firstChildNode.nextSibling != null) {
firstChildNode = firstChildNode.nextSibling;
}
return (firstChildNode.nodeType==1)? firstChildNode:null;
}
