JavaScript dom additions and deletions to change search

1. Create a node

document.createElement()   //创建元素节点
document.createTextNode()  //创建文本节点
document.createComment()   //创建注释
innerHTML     //写模式下和outerHTML一样，将div里面的内容替换
outerHTML     //读模式outerHTML包括了最外层div
innerText     //读模式返回文本 写模式不能识别标签
outerText     //读模式返回文本 写模式不能识别标签

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

  </style>
  </head>
   <body>
 		 <ul class="ul"></ul>
   </body>
</html>

javascript

var ul=document.getElementsByClassName("ul")[0]
var li=document.createElement("li")    
var text=document.createTextNode("钱家寄")
var comment=document.createComment("JSDF")
li.appendChild(text)
ul.appendChild(li)
ul.appendChild(comment)

2. node traversal methods

firstChild   //获取第一个子节点
lastChild    //获取最后一个子节点
parentNode   //获取父节点
childeNodes[0]   //获取第一个子节点
childeNodes.item(1) //获取第二个子节点
nextSibling     //获取下一个兄弟节点
previousSibling  //获取上一个兄弟节点
ownerDocument     //获取文档节点document
hasChildNodes()   //判断是否有子节点
//用例
var demo=document.getElementById("demo")
demo.firstChild
demo.nextSibling
demo.hasChildNodes()

Element node

firstElementChild
lastElementChild
parentElement
nextElementSibling
previousElementSibling
children[1]

Class array of objects HTMLCollection

document.script
document.links
document.cells
document.images
document.forms

Query node

document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
document.getElementsByName()
querySelector()
querySelectorAll()

The method of operation of a node

insertBefore()   //朝前插入
appendChild()    //插入子节点
replaceChild("要插入的节点","被替换的节点") //返回值被替换的节点
cloneNode()  //克隆节点
normalize()   //合并相邻的text
splitText()   //将文本节点拆分为2个
father.insertBefore(newnode,想要插入的)
ele.cloneNode() //克隆ele节点 只克隆一层
ele.cloneNode(true)//深度克隆
ele.normalize() //合并相邻的文本

Delete Node

removeChild()
removeNode()
father.removeChild("被删除的节点")
ele.removeNode()  //删除目标节点ele

Q_King_

Published 25 original articles · won praise 0 · Views 639

Private letter concerns

JavaScript dom additions and deletions to change search

Guess you like