收藏
天蓬老师批改状态：合格
老师批语：js中的请多知识点, 并无明显规律, 只能强记, 做得多才可以记住
节点：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>// 访问bodycl(document.body);// 访问 titlecl(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>// 这种方式也可以访问idcl(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>
| 获取方式 | 描述 |
|---|---|
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 | 元素 |
| 2 | 属性 |
| 3 | 文本 |
| 6 | 注释 |
| 9 | 文档，document |
| 11 | 文档片段 |
v
<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>
| 获取方式 | 描述 |
|---|---|
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); // 5cl(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 用forfor (var i = 0; i < ul.children.length; i++) {cl(ul.children[i]);}</script>
| 语句 | 描述 |
|---|---|
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，修改为参数2h3.classList.replace("red", "blue");// <h3 class="bgc blue">classList对象非常棒</h3></script>
用于处理用户自定义的数据属性
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); // 输出 202user.dataset.userName = "peter";cl(user.dataset.userName); // 输出 peter</script>
<button onclick="var text=this.innerText;alert(text);">按钮1</button><!-- 弹出对话框 -->
<button onclick="show(this)">按钮2</button><script>function show(ele) {var text = ele.innerText;alert(text);}</script>
<button>按钮3</button><script>var btn3 = document.querySelector("button:nth-of-type(3)");btn3.onclick = function () {alert(this.nodeName);};</script>
<button>按钮4</button><script>var btn4 = document.querySelector("button:nth-of-type(4)");btn4.addEventListener("click",function () {alert(this.innerText);},false);</script>
<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>
<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>
获取 DOM 元素使用document.querySellecter最为方便
遍历元素节点
childNodes返回所有节点 Nodelist 使用forEach 遍历children返回元素节点 HTMLCollection 使用for遍历
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
