JS - DOM 操作与事件

1. DOM 操作

1.1 DOM 对象

节点：HTML 文档中所有内容都是节点
节点树：这些节点按照一定的结构组成的树形的结构也叫 DOM 树
节点类型：元素，文本，属性，注释，文档节点

语句	描述	结果
`document.doctype`	访问文档类型	`<!doctyhpe html>`
`document.documentElement`	访问 html 文档	`<html>....</html>`
`document.head`	访问 Head 标签	`<head>...</head>`
`document.body`	访问 body	`<body>...</body>`
`document.title`	访问 title	`<title>DOM</title>`
`document.forms`	拿到页面中的所有表单	HTMLCollection(3) [form, form, form]
`document.forms[0]`	拿到第一个	`<form action="1.php"></form>`
`document.forms.item(0)`	另一种方式	`<form action="1.php"></form>`
`document.getElementById("login")`	通过 id 的方式访问	`<form action="2.php" id="login"></form>`
`document.forms.namedItem("logout")`	通过 name 访问	`<form action="3.php" name="logout"></form>`
`document.forms.namedItem("login")`	也可以访问 id	`<form action="2.php" id="login"></form>`
`document.forms.namedItem("register").username.value`	获取到第四个 form 中 input 的值	`admin`
`document.forms[3].username.value`	获取到第四个 form 中 input 的值另一种方式	`admin`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM</title>
  </head>
  <body>
    <form action="1.php"></form>
    <form action="2.php" id="login"></form>
    <form action="3.php" name="logout"></form>
    、
    <form action="4.php" name="register">
      <input type="text" name="username" value="admin" />
    </form>
    <script>
      // 先将console.log()简化一下
      var cl = console.log;
      // 访问文档类型
      cl(document.doctype);
      //   <!doctyhpe html>
      // 访问html文档
      cl(document.documentElement);
      // <html>....</html>
      //   访问 Head 标签
      cl(document.head);
      // <head>...</head>
      //   访问body
      cl(document.body);
      // 访问 title
      cl(document.title);
      //   拿到页面中的所有表单
      cl(document.forms);
      //   HTMLCollection(3) [form, form, form]  返回为html的集合 他是一个类数组，像数组
      //   比如拿到第一个 索引从0开始
      cl(document.forms[0]);
      // <form action="1.php"></form>
      //   还有一种方式
      cl(document.forms.item(0)); //返回与上面相同
      //   当然 我们也可以通过id的方式访问
      cl(document.getElementById("login"));
      //   <form action="2.php" id="login"></form>
      // 通过name访问
      cl(document.forms.namedItem("logout"));
      //   <form action="3.php" name="logout"></form>
      // 这种方式也可以访问id
      cl(document.forms.namedItem("login"));
      //   <form action="2.php" id="login"></form>
      //   要获取到第四个form中input的值
      cl(document.forms.namedItem("register").username.value);
      // admin
      //   l另一种方式
      cl(document.forms[3].username.value);
      // admin
    </script>
  </body>
</html>

1.2 获取 DOM 元素

获取方式	描述
`document.getElementsByTagName("li")`	通过标签获取
`document.getElementById("list")`	通过 id 获取
`document.getElementsByName("first")`	通过 name 获取
`document.getElementsByClassName("item active")`	通过 class 获取
`document.querySelector("ul > li:last-of-type")`	通过 css 选择器获取

<body>
  <ul id="list">
    <li class="item" name="first">item1</li>
    <li class="item">item2</li>
    <li class="item">item3</li>
    <li class="item active">item4</li>
    <li class="item">item5</li>
  </ul>
</body>
<script>
  var cl = console.log;
  //  通过标签获取
  cl(document.getElementsByTagName("li"));
  // HTMLCollection(5) [li.item, li.item, li.item, li.item.active, li.item, first: li.item]
  // 获得一个类数组 键名从0开始的正整数 有一个length 属性 表示数量
  // 通过id获取
  cl(document.getElementById("list"));
  //  <ul id="list">...<ul>
  // 通过class获取
  cl(document.getElementsByClassName("item active"));
  // HTMLCollection [li.item.active]
  // 通过 name 获取
  cl(document.getElementsByName("first"));
  // NodeList [li.item]
  // 通过css选择器获取
  cl(document.querySelector("ul > li:last-of-type"));
  // <li class="item">item5</li>
</script>

1.3 遍历元素节点

JS 节点有 11 种类型，但与 HTML 相关的只有 6 个

编号	节点名称
1	元素
2	属性
3	文本
6	注释
9	文档，document
11	文档片段

1.3.1 childNodes 返回所有节点

<body>
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
  </ul>
</body>
<script>
  var cl = console.log;
  var ul = document.querySelector("ul");
  // 获取所有元素节点 这其中包括标签后面的换行符
  cl(ul.childNodes);
  // NodeList(11) [text, li, text, li, text, li, text, li, text, li, text]
  // 获取节点长度
  cl(ul.childNodes.length); // 11
  // 拿到第二个节点
  cl(ul.childNodes[1]); // <li>item1</li>
  // 查看节点类型
  cl(ul.childNodes[1].nodeType); // 1 = 元素节点
  //查看元素名称
  cl(ul.childNodes[1].nodeName);
  // 遍历
  var eles = [];
  ul.childNodes.forEach(function (item) {
    //   如果节点类型为元素 push到数组中
    if (item.nodeType === 1) {
      this.push(item);
    }
  }, eles);
  cl(eles);
  // [li, li, li, li, li]
  // 获取第一个节点
  cl(ul.firstChild); //#text
  // 获取最后一个节点
  cl(ul.lastChild); //#text
  // 前一个兄弟节点
  cl(ul.lastChild.previousSibling);
  // <li>item5</li>
  // 后一个兄弟节点
  cl(ul.firstChild.nextSibling);
  // <li>item1</li>
</script>

1.3.2 children 只返回元素

获取方式

获取方式	描述
`ul.children`	获取所有元素
`ul.children.length`	获取长度
`ul.childElementCount`	获取长度
`ul.firstElementChild`	获取第一个元素
`ul.lastElementChild`	获取最后一个元素
`ul.children[2]`	获取任何一个
`ul.children[2].previousElementSibling`	前一个兄弟
`ul.children[3].nextElementSibling`	后一个兄弟

<body>
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
  </ul>
</body>
<script>
  var cl = console.log;
  var ul = document.querySelector("ul");
  // 获取元素
  cl(ul.children);
  // HTMLCollection(5) [li, li, li, li, li]
  // 获取长度
  cl(ul.children.length); // 5
  cl(ul.childElementCount); // 5
  // 获取第一个元素
  cl(ul.firstElementChild);
  // <li>item1</li>
  // 获取最后一个元素
  cl(ul.lastElementChild);
  // <li>item5</li>
  // 获取任何一个
  cl(ul.children[2]);
  // <li>item3</li>
  // 前一个兄弟
  cl(ul.children[2].previousElementSibling);
  // <li>item2</li>
  //后一个兄弟
  cl(ul.children[3].nextElementSibling);
  // <li>item5</li>
  // 遍历 HTMLCollection中没有foreach  用for
  for (var i = 0; i < ul.children.length; i++) {
    cl(ul.children[i]);
  }
</script>

1.4 classList 对象

语句	描述
`h3.classList.add("red");`	添加属性值（可多次添加）
`h3.classList.remove("red");`	删除指定属性值
`h3.classList.toggle("red");`	自动切换（添加/删除）
`h3.classList.replace("red", "blue");`	替换属性值

<style>
      .red {
        color: red;
      }
      .bgc {
        background-color: yellow;
      }
      .blue {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p class="red">大家吃了吗?</p>
    <h3>classList对象非常棒</h3>
  </body>
  <script>
    var cl = console.log.bind(console);
    var p = document.querySelector("p");
    // 正常情况下 修改 p的class属性
    p.className = "blue"; // 文本变成蓝色
    // classlist比classname 强太多
    var h3 = document.querySelector("h3");
    // 添加
    h3.classList.add("red");
    h3.classList.add("bgc");
    // <h3 class="red bgc">classList对象非常棒</h3>
    // 删除
    h3.classList.remove("red");
    // <h3 class="bgc">classList对象非常棒</h3>
    // 自动切换
    // 如果标签属性中 有这个值则删除  没有则添加
    h3.classList.toggle("red");
    // <h3 class="red bgc">classList对象非常棒</h3>
    // 修改，将参数1，修改为参数2
    h3.classList.replace("red", "blue");
    // <h3 class="bgc blue">classList对象非常棒</h3>
  </script>

1.5 dataset 对象

用于处理用户自定义的数据属性
html5 中可以使用自定义数据属性保存标签的附加信息,data-做为前缀

<body>
  <div id="user" data-id="101" data-user-name="admin">用户信息</div>
</body>
<script>
  var cl = console.log.bind(console);
  var user = document.querySelector("#user");
  // dataset 后面的属性就是自定义的属性
  cl(user.dataset.id); // 101
  // data有多个连接线的 去掉连接线并将连接线后面的第一个字母大写
  cl(user.dataset.userName); //admin
  // 修改 原data值
  user.dataset.id = "202";
  cl(user.dataset.id); // 输出 202
  user.dataset.userName = "peter";
  cl(user.dataset.userName); // 输出 peter
</script>

2. 事件

2.1 事件添加方式

2.1.1 直接加入元素属性中

<button onclick="var text=this.innerText;alert(text);">按钮1</button>
<!-- 弹出对话框 -->

2.1.2 给元素绑定事件属性

<button onclick="show(this)">按钮2</button>
<script>
  function show(ele) {
    var text = ele.innerText;
    alert(text);
  }
</script>

2.1.3 给元素添加属性

<button>按钮3</button>
<script>
  var btn3 = document.querySelector("button:nth-of-type(3)");
  btn3.onclick = function () {
    alert(this.nodeName);
  };
</script>

2.1.4 监听器

<button>按钮4</button>
<script>
  var btn4 = document.querySelector("button:nth-of-type(4)");
  btn4.addEventListener(
    "click",
    function () {
      alert(this.innerText);
    },
    false
  );
</script>

2.1.5 事件派发

<button>按钮5</button>
<script>
  var btn5 = document.querySelector("button:nth-of-type(5)");
  btn5.addEventListener(
    "click",
    function () {
      alert(this.innerText);
    },
    false
  );
  // 创建一个事件对象
  var ev = new Event("click");
  // 不用点击 自动触发
  btn5.dispatchEvent(ev);
</script>

2.2 事件传递与事件委托/代理

<body>
  <div class="first">
    <div class="second">
      <div class="three">事件触发</div>
    </div>
  </div>
</body>
<script>
  var first = document.querySelector(".first");
  var second = document.querySelector(".second");
  var three = document.querySelector(".three");
  cl = console.log;
  // true 捕获阶段
  first.addEventListener(
    "click",
    function (ev) {
      // ev: 唯一的事件对象
      // ev.type 获取事件类型
      // ev.target 获取触发事件的元素
      // ev.currentTarget 获取绑定事件的元素 也就是自己
      // ev.target.classList.item(0)  获取触发事件的class值
      // 看一下触发与绑定
      cl(
        "捕获阶段:" + "触发: " + ev.target.classList.item(0),
        "绑定:" + ev.currentTarget.classList.item(0)
      );
    },
    true
  );
  second.addEventListener(
    "click",
    function (ev) {
      cl(
        "捕获阶段:" + "触发: " + ev.target.classList.item(0),
        "绑定:" + ev.currentTarget.classList.item(0)
      );
    },
    true
  );
  three.addEventListener(
    "click",
    function (ev) {
      cl(
        "捕获阶段:" + "触发: " + ev.target.classList.item(0),
        "绑定:" + ev.currentTarget.classList.item(0)
      );
    },
    true
  );
  // 冒泡阶段
  first.addEventListener(
    "click",
    function (ev) {
      cl(
        "冒泡阶段:" + "触发: " + ev.target.classList.item(0),
        "绑定:" + ev.currentTarget.classList.item(0)
      );
    },
    false
  );
  second.addEventListener(
    "click",
    function (ev) {
      cl(
        "捕获阶段:" + "触发: " + ev.target.classList.item(0),
        "绑定:" + ev.currentTarget.classList.item(0)
      );
    },
    false
  );
  three.addEventListener(
    "click",
    function (ev) {
      cl(
        "捕获阶段:" + "触发: " + ev.target.classList.item(0),
        "绑定:" + ev.currentTarget.classList.item(0)
      );
    },
    false
  );
</script>

3. 总结

获取 DOM 元素使用document.querySellecter最为方便
遍历元素节点
- childNodes返回所有节点 Nodelist 使用forEach 遍历
- children返回元素节点 HTMLCollection 使用for遍历

JS - DOM 操作与事件

JS - DOM 操作与事件

1. DOM 操作

1.1 DOM 对象

1.2 获取 DOM 元素

1.3 遍历元素节点

1.3.1 childNodes 返回所有节点

1.3.2 children 只返回元素

1.4 classList 对象

1.5 dataset 对象

2. 事件

2.1 事件添加方式

2.1.1 直接加入元素属性中

2.1.2 给元素绑定事件属性

2.1.3 给元素添加属性

2.1.4 监听器

2.1.5 事件派发

2.2 事件传递 与 事件委托/代理

3. 总结

相关文章

2.2 事件传递与事件委托/代理