Node.nodeType节点

常用的节点类型

    文档节点 document 9

    元素节点 element 1

    属性节点 Attr 2

    文本节点 text 3

    注释节点 comment 8

示例:获取一行注释节点



    
    


Node.nodeType节点_第1张图片

节点的层级

父级节点parentNode

parentNode属性可返回某节点的父节点,注意是最近的一个父节点!

如果指定的节点没有父节点则返回null

子级节点childNodes

childNodes 获取的是子节点的集合

children(非标准的)是一个只读属性,返回所有子元素节点 常用

子节点的第一个元素 firstChild

子节点的最后一个元素 lastChild

兄弟节点

nextSibling 返回当前元素的下一个兄弟节点

previousSibling 返回当前元素的上一个兄弟节点

节点操作

创建节点

docment.createElement('标签名') 创建由标签名指定的HTML元素,也叫动态创建元素节点。

添加节点

node.appendChild(child) 将一个节点添加到他指定的父节点的子节点列表末尾

node.insertBefore(child,指定元素) 将一个节点添加到他指定的父节点的子节点列表前面

删除节点

node.removeChild()方法从node中删除一个子节点。

克隆节点

node.cloneNode() 克隆节点

注意事项:

1 如果括号参数为空或者为false,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点。

2 如果括号参数为true,则是深度拷贝,会复制节点本身以及里面所有的子节点。

创建元素的三种方式

document.write()

elemengt.innerHTML()

document.createElement()

区别:

1document.write() 将内容写入页面,会导致页面重绘

2innerHTML将内容写入某个Dom节点,不会导致页面重绘

3如果页面创建元素较多,建议用innerHTML,效率高

4如果页面创建元素较少,建议用increateElement,效率高

你可能感兴趣的:(javascript,javascript)