获取子节点
children 不是标准的dom属性,但是几乎被所有浏览器支持。不包含文本节点.
注意:在IE中,children包含注释节点。
document.getElementById('b').children[0];
//选择第一个子元素 ,推荐,不推荐下面的 childNodes
childNodes 是标准属性。返回所有子节点。包括文本节点。
document.getElementById('b'). childNodes[1];
//选择第一个子元素,返回的文本节点有的多,不推荐
获取第一个子节点
firstChild
document.getElementById('b').firstChild;
//如果父元素和子元素换行了, 会返回的第一个是文本节点
//因为会返回的第一个是文本节点,不推荐
获取第一个元素节点
firstElementChild
document.getElementById('b').firstElementChild;
// 在ie678中不兼容,可以用 children[0]
获取最后一个子节点
lastChild
document.getElementById('b').lastChild;
//如果父元素和子元素换行了, 会返回的第一个是文本节点
判断是否有子节点
hasChildNodes()
document.getElementById('b') .hasChildNodes();
//有节点就返回 true,没有节点就返回 false,文本节点也是节点()
判断节点类型与节点名称
nodeType
1:元素
2:属性
3:文本
nodeName
document.getElementById('b') .nodeType //1
document.getElementById('b') .nodeName //UL
创建DOM结构
创建元素节点 createElement
创建文本节点 createTextNode
document.createElement('div');
document.createTextNode('ok');
插入节点
insertBefore( 插入的节点 , 插入的位置 )
ul1.insertBefore(document.createElement('li'),li[1].nextSibling);
appendChild( 插入的节点 )
ul1.children[2]. appendChild(document.createElement('li'));
移除节点
removeChild( 节点位置 )
并返回被删除的节点dom
ul1.removeChild(li[2].children[0]);
获取元素的下一个节点(同胞)
nextSibling
document.getElementById('b').nextSibling;
获取元素的上一个节点(同胞)
previousSibling
document.getElementById('b').previousSibling;
网友评论