JS中元素的增删改查

2018-07-16 本文已影响15人佩佩216

1. 什么是DOM

DOM 全称是 Document Object Model，也就是文档对象模型。

DOM 就是针对 HTML 和 XML 提供的一个API。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。
我们可以把一个HTML 看做一个对象树（DOM树），它本身和里面的所有东西比如 <div></div> 这些标签都看做一个对象，每个对象都叫做一个节点（node），节点可以理解为 DOM 中所有 Object 的父类。

2. DOM 有什么用

简单来说，通过 DOM 操作HTML元素，你可以改变网页。比如我们现在要更改网页标题，可以直接键入代码：

document.title = 'How to learn javascript'

这个 API 使得在网页被下载到浏览器之后改变网页的内容成为可能。

你可以使用 Javascript 语言来操作 DOM 以改变网页。
为了改变网页，你必须告诉 Javascript 改变哪一个节点。这就是操作 DOM。
改变网页，实际就是操作DOM对节点进行增删改查。

3. DOM元素的增删改查

3.1 添加元素

Document.createElement() // 创建元素
语法：

  let element = document.createElement(tagName[, options])

Document.createTextNode() // 创建一个新的文本节点
语法：

  var text = document.createTextNode()

Document.createAttribute() // 创建并返回一个新的属性节点
语法：

  attribute = document.createAttribute(name)

Document.createComment() // 创建并返回一个注释节点
语法：

  var commentNode = document.createComment(data)

Document.createDocumentFragment() // 创建一个新的空的文档片段
语法：

  var docFragment = document.createDocumentFragment()

Node.appendChild() // 将一个节点添加到指定父节点的子节点列表末尾
语法：
```
 var child = node.appendChild(child)
```
Element.classList.add() // 添加指定的类值class
语法：

  elementNodeReference.classList.add( String [, String] )

Document.write();Document.writeIn() // 将文本字符串写入打开的文档流
语法：

  document.write(markup)
  document.writeIn(line)

document.write()和writeIn()的区别是前者没有换行，而后者有换行。

3.2 删除元素

Element.removeAttribute() // 从元素中删除指定的属性
语法：

  element.removeAttribute(attrName)

Element.removeChild(）// 删除子元素
语法：

  var oldChild = node.removeChild(child);

element.removeChild(child);
ChildNode.remove() // 删除元素
语法：

-  elementNodeReference.remove()

Child.parentNode.removeChild(child) // 不确定父元素时可这样删除子元素
示例：

  if (node.parentNode) {
  //判断node是否在DOM树中
    node.parentNode.removeChild(node);
  }

Element.classList.remove() // 移除元素中一个或多个类名

语法：
  elementNodeReference.classList.remove( String [,String] )

3.3 修改元素

Node.innerText // 修改元素文本内容
语法：

  Node.innerHTML =new content
Element.innerHTML // 设置或获取描述元素后代的HTML语句

语法：

  const content = element.innerHTML;
  // 返回时，内容包含描述所有元素后代的序列化HTML代码。
  element.innerHTML = markup;
  // 除所有元素的子节点，解析内容字符串，并将生成的节点分配给元素的子元素。

node.cloneNode() // 拷贝元素(包括所有属性和值)
语法及示例：

  var dupNode = node.cloneNode(deep)
  <!--example-->
  <body>
  <ul id="myList1">
      <li>iPhone</li>
      <li>iPad</li>
  </ul>
  <ul id="myList2">
      <li>Macbook</li>
      <li>appleMusic</li >
  </ul>
  <button onclick="myFunction()">复制</button>
  <script>
  function myFunction(){
      var itm=document.getElementById("myList2").lastChild;
      var cln=itm.cloneNode(true);
      document.getElementById("myList1").appendChild(cln);
  }
  </script>
  </body>
  <!--点击复制按钮，myList2中最后元素会复制到myList1中-->

Element.setAttribute() // 设置或者改变指定属性并指定值
语法：

  element.setAttribute(name, value)

style.property = new style // 修改元素CSS属性值
示例：

  var title= document.querySelector("h1")
  title.style.backgroundColor = red // h1背景色改为红色

Node.replaceChild() // 替换子节点
语法及示例：

  replacedNode = parentNode.replaceChild(newChild, oldChild)
  <!--example-->
  <body>
  <ul id="myList">
    <li>iPhone</li>
    <li>iPod</li>
    <li>Macbook</li>
  </ul>
  <button onclick="myFunction()">替换</button>
  <script>
  function myFunction(){
      var textnode=document.createTextNode("Surface pro");
      var item=document.getElementById("myList").childNodes[0];
      item.replaceChild(textnode,item.childNodes[0]);
  }
  </script>
  <!--点击替换按钮，myList中第一个元素会被替换成Surface pro-->

3.4 查找元素

attribute.getAttribute() // 返回元素的指定属性值
语法：

  let attribute = element.getAttribute(attributeName)

Document.getElementsByClassName() // 返回一个节点列表（数组），包含了所有拥有指定 class 的子元素
语法：

  var elements = document.getElementsByClassName(names); 
  var elements = rootElement.getElementsByClassName(names);

Document.getElementsByName() // 返回带有指定名称的对象集合
语法：

  elements = document.getElementsByName(name)

Document.getElementsByTagName() // 返回带有指定标签名的对象集合
语法：

  var elements = document.getElementsByTagName(name)

Document.getElementById() // 返回对拥有指定 id 的第一个对象的引用
语法：
```
element = document.getElementById(id)
```

Document.querySelector() // 返回文档中匹配指定的CSS选择器的第一元素
语法及示例：

element = document.querySelector(selectors) // 语法
//example
document.querySelector("#demo") // 获取文档中ID为demo的元素

Document.querySelectorAll() // 返回与指定的选择器组匹配的文档中的元素列表

语法：
elementList = document.querySelectorAll(selectors