js 原生的节点操作

2018-08-23  本文已影响0人  Hassd

获取子节点

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;

上一篇 下一篇

猜你喜欢

热点阅读