获取相关元素

选择器的方式

  1. // 获取第一个 selection 元素
  2. let slt = document.querySelector("selection")
  4. // 获取全部的 selection 元素，以 nodelist 的方式返回
  5. let sltLst = document.querySelectorAll("selection")

除此以外，选择器还可以用不同标记（ class id 等）来获得元素。

  1. // 获取为 head 类的第一个 selection 元素
  2. let sltByClass = document.querySelector("selection.head")
  4. // 获取为 p1 id的 selection 元素
  5. let sltById = document.querySelector("#p1")

更复杂的选择器提取方式
  1. // 获取 class 名为 user-panel main 的 div 内的 name 属性为 login 的 input 元素
  2. let el = document.querySelector("div.user-panel.main input[name='login']")

创建元素及增删节点

创建元素

一般使用 document.createElement 来创建一个元素。

  1. // 创建一个 p 标签的元素 n1
  2. let n1 = document.createElement("p")

添加元素

一般使用 element.appendChild 来添加元素。

  1. // 添加 n1 元素至 div 元素中.
  2. let div = document.querySelector("div");
  3. div.appendChild(n1);

删除元素

一般使用 element.removeChild() 来移除一个节点。

  1. let childNode = document.createElement("p")
  2. let div = document.querySelector("div")
  3. div.appendChild(childNode)
  5. // 移除 childNode 节点
  6. div.removeChild(childNode)
  7. // 或可以
  8. childNode.parentNode.removeChild(childNode)

修改元素属性及样式更改

样式更改

  1. let n1 = document.createElement("p")
  3. // 将 n1 的颜色改为红色
  4. n1.style.color = "red"

属性更改

  1. let n1 = document.createElement("p")
  3. // 文本内容修改
  4. n1.textContent = "hello"
  5. // 或可以
  6. let textNode = document.createTextNode("hello")
  7. n1.appendChild(textNode)
  9. // 其他属性更改
  10. n1.onclick = function(){
  11.     n1.parentNode.parentNode.removeChild(n1.parentNode);
  12. }
  14. n1.class = "classN1"

一个简单的实例

实现一个购买清单

效果图

截屏2020-01-19下午6.57.42.png

代码

  1. <h2>My Shopping List</h2>
  2. <div id="select">
  3.   <span>Enter a new item:</span> <input value="" id="inputItem"> <button onclick="addItem()">add item</button>
  4. </div>
  5. <ul id="list">
  6. </ul>
  8. <script>
  9.   function addItem(){
  10.   let text = document.querySelector('input').value;
  11.   let newItem = document.createElement("li");
  12.   let list = document.querySelector("ul");
  13.   let deleteButton = document.createElement("button");
  14.   newItem.textContent = text;
  15.   deleteButton.textContent = "delete";
  16.   deleteButton.onclick = function(){
  17.     deleteButton.parentNode.parentNode.removeChild(deleteButton.parentNode)
  18.   }
  19.   deleteButton.style.marginLeft = "30px"
  20.   newItem.appendChild(deleteButton)
  21.   list.appendChild(newItem);
  22. }
  23. </script>