1.ID获取元素

  1. <!doctype html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>通过ID获取元素</title>
  9. </head>
  10. <body>
  11. <div id="one"></div>
  12. <script>
  13.     const one = document.getElementById("one");
  14. </script>
  15. </body>
  16. </html>

2.设置元素内容

  1. const one = document.getElementById("one");
  2. const two = document.getElementById("two");
  3. one.innerHTML = "<span style='color:red;'>通过innerHTML设置元素的内容可以解析HTML标签</span>"
  4. two.innerText = "<span style='color:blue;'>通过innerTEXT设置元素的内容不能解析HTML标签</span>"

3.获取元素属性

  1. const one = document.getElementById("int1");
  2. console.log(one.id);

4.设置元素属性

  1. const one = document.getElementById("int1");
  2. one.id = "abc"
  3. console.log(one.id)

5.通用方法获取和设置属性

  1. one.getAttribute("属性名")
  2. two.setAttribute("属性名","属性值")

6.获取设置行内样式

  1. var abc = document.getElementById("abc");
  2. console.log(abc.style.cssText);// 获取CSS样式
  3. abc.style.cssText = "background: skyblue;width:50px"// 设置css样式,需要重新设置所有样式

7.获取设置行内样式属性

  1. var abc = document.getElementById("abc");
  2. abc.style.backgroundColor = "deepskyblue";

8.添加删除类名

  1. var abc = document.getElementById("abc");
  2. abc.classList.add("a3")
  3. abc.classList.remove("a3")

9.切换类名

  1. var abc = document.getElementById("abc");
  2. abc.classList.toggle("a2")

10.类名获取元素

  1. var abc = document.getElementsByClassName("a1")

11.使用标签选择器获取元素

  1. var abc = document.getElementsByTagName("div")

12.name选择器

  1. var abc = document.getElementsByName("abc")

13.组合方式获取元素

  1. var abc = document.getElementById("").getElementsByClassName("");

14.使用CSS选择器获取元素

  1. var abc = document.querySelector("");

15.事件

16.this的应用

this指当前我们正在操作的元素