节点操作

获取节点

getElementById
getElementsByClassName

getElementsByTagName

querySelector

getElementById 返回指定ID的节点

示例:

getElementsByClassName

示例:获取span元素

getElementsByTagName

示例:获取span标签

querySelector

创建节点

createElement

innerHTML

createElement

innerHTML

创建文本节点 createTextNode

createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。

createElement & innerHTML应用:

节点个数
事件处理
结合使用

以下代码是createElement & innerHTML两者结合使用的例子:

插入节点

appendChild
isertBefore
insertAdjacentElement
insertAdjacentHTML

appendChild

insertBefore

insertAdjacentElement

insertAdjacentHTML

应用-insertAdjacentElement-兼容性方法:

修改节点

innerHTML

万能的innerHTML

textContent(innerText):

textContent是W3C定义的标准，而innerText不是一个标准，但是一个流行使用的属性。

FF兼容innerText解决方法:

innerHTML VS textContent(innerText)

在 JavaScript 中，我们可以使用 innerHTML 和 innerText 这 2 个属性很方便地获 取和设置某一个元素内部子元素或文本。innerHTML 属性被多数浏览器所支持，而 innerText 只能被 IE、chrome 等支持 而不被 Firefox 支持。

innerHTML 属性声明了元素含有的 HTML 文本，不包括元素本身的开始标记和结 束标记。设置该属性可以用于为指定的 HTML 文本替换元素的内容。

innerText 属性与 inerHTML 属性的功能类似，只是该属性只能声明元素包含的文本内容。即使指定的是 HTML 文本，它也会认为是普通文本而原样输出。

删除节点

removeChild

replaceChild

应用:

replaceChild == removeChild&appendChild

innerHTML

elm.innerHTML=" "