红酒网站源码/企业网络推广方案

红酒网站源码,企业网络推广方案,wordpress主题jquery,网站脚本错误学习来源：尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版 笔记来源：在这位大佬的基础上添加了一些东西，欢迎大家支持原创，大佬太棒了：JavaScript |（五）DOM简介 | 尚硅谷JavaScript基础…

学习来源：尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版
笔记来源：在这位大佬的基础上添加了一些东西，欢迎大家支持原创，大佬太棒了：JavaScript |（五）DOM简介 | 尚硅谷JavaScript基础&实战

JavaScript |（五）DOM简介 | 尚硅谷JavaScript基础&实战

  • ❤️DOM简介
    • 🔥事件
    • 🔥文档的加载
  • ❤️DOM查询
    • 🔥节点
    • 🔥节点的属性
      • 1️⃣ `getElementById(id)`
      • 2️⃣ `getElementsByTagName(tagName)`
      • 3️⃣ `getElementsByName(name)`
      • 4️⃣ `innerHTML`
      • 5️⃣ 直接获取元素属性
      • 6️⃣ `className` 获取 `class` 属性
    • 🔥练习：图片切换⭐️
    • 🔥元素节点的子节点
      • 1️⃣ `getElementsByTagName(tagName)`
      • 2️⃣ `childNodes`
      • 3️⃣ `children`（推荐使用 ✅）
      • 4️⃣ `firstChild`
      • 5️⃣ `firstElementChild`（更精准 ✅）
      • 6️⃣ `lastChild`
    • 🔥获取父节点和兄弟节点
      • 1️⃣ 获取父节点
        • 📌 `parentNode`
      • 2️⃣ 获取兄弟节点
        • 📌 `previousSibling`
        • 📌 `nextSibling`
      • 3️⃣ 获取前后兄弟元素（推荐 ✅）
        • 📌 `previousElementSibling`（推荐 ✅）
        • 📌 `nextElementSibling`（推荐 ✅）
      • 4️⃣ 获取元素文本
        • 📌 `innerText`
    • 🔥练习：全选/全不选/反选⭐️
    • 🔥查询剩余属性、方法
      • 1️⃣ 查询 `document` 相关属性
        • 📌 `body`
        • 📌 `documentElement`
        • 📌 `all` ❌
      • 2️⃣ 查询元素的方法
        • 📌 `getElementsByClassName()`
        • 📌 `querySelector()`
        • 📌 `querySelectorAll()`
  • ❤️DOM增删改
    • 🔥相关语法
      • 1️⃣ 创建新节点
        • 📌 `document.createElement(tagName)` —— 创建一个 元素节点
        • 📌 `document.createTextNode(text)` —— 创建 文本节点
      • 2️⃣ 添加、插入、替换、删除节点
        • `appendChild()` —— 添加子节点
        • 📌 `insertBefore()`—— 在指定子节点前插入新节点
        • 📌 `replaceChild()` —— 替换子节点
        • 📌 `removeChild()`—— 删除子节点
      • 💡 实战
    • 🔥练习：添加删除记录⭐️
  • ❤️操作CSS样式
    • 🔥操作内联样式
    • 🔥获取元素当前显示样式
    • 🔥其他样式操作的属性
      • 1️⃣ client、offset、scroll 的区别
      • 2️⃣ 获取元素可见尺寸
        • 📌 `clientWidth` 和 `clientHeight` —— 可见区域尺寸
        • 📌`offsetWidth` 和 `offsetHeight` —— 包括边框
      • 3️⃣ 获取元素偏移量
        • 📌`offsetParent` —— 获取定位父元素
        • 📌`offsetLeft` 和 `offsetTop` —— 元素相对定位父元素的偏移量
      • 4️⃣ 获取滚动信息
        • 📌`scrollWidth` 和 `scrollHeight` —— 整个滚动区域
        • 📌`scrollLeft` 和 `scrollTop` —— 获取滚动距离
      • 5️⃣ 实战案例
      • 6️⃣ 总结
    • 🔥练习：垂直滚动条滚动到底时使表单项可用⭐️

！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！ ！重要！

❤️DOM简介

  • DOM：Document Object Model，文档对象。
    • JS通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。
  • 文档：就是整个HTML网页文档。
  • 对象：对象表示将网页中的每一部分都转换为了一个对象。[为了纯面向对象]
  • 模型：使用模型来表示对象之间的关系，这样方便我们获取对象。
    在这里插入图片描述

在这里插入图片描述

🔥事件

  • 事件，就是文档或浏览器窗口中发生的些特定的交互瞬间。
  • JavaScript 与 HTML 之间的交互是通过事件实现的。
  • 对于Web应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键，等等
属性此事件发生在何时…
onabort图像的加载被中断。
onblur元素失去焦点。
onchange域的内容被改变。
onclick当用户点击某个对象时调用的事件句柄。
ondblclick当用户双击某个对象时调用的事件句柄。
onerror在加载文档或图像时发生错误。
onfocus元素获得焦点。
onkeydown某个键盘按键被按下。
onkeypress某个键盘按键被按下并松开。
onkeyup某个键盘按键被松开。
onload一张页面或一幅图像完成加载。
onmousedown鼠标按钮被按下。
onmousemove鼠标被移动。
onmouseout鼠标从某元素移开。
onmouseover鼠标移到某元素之上。
onmouseup鼠标按键被松开。
onreset重置按钮被点击。
onresize窗口或框架被重新调整大小。
onselect文本被选中。
onsubmit确认按钮被点击。
onunload用户退出页面。
。。。。。。

🔥文档的加载

  • 浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行。
  • 如果将script标签写到页面的上边，在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载，会导致无法获取到DOM对象。
  • onload事件会在整个页面加载完成之后才触发，为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function(){ // 使得页面加载结束执行 ，//获取id为btn的按钮var btn = document.getElementById("btn");//为按钮绑定一个单击响应函数btn.onclick = function(){alert("hello");};};	</script></head><body><button id="btn">点我一下</button>  </body>
</html>

在这里插入图片描述

❤️DOM查询

🔥节点

  • 节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。
  • 比如：html标签、属性、文本、注释、整个文档等都是一个节点。
  • 虽然都是节点，但是实际上他们的具体类型是不同的。
  • 比如：标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。
  • 节点的类型不同，属性和方法也都不尽相同。
    • 文档节点：整个HTML文档
    • 元素节点：HTML文档中的HTML标签
    • 属性节点：元素的属性
    • 文本节点：HTML标签中的文本内容

在这里插入图片描述

在 JavaScript 的 DOM（文档对象模型）中，节点（Node） 和 元素（Element） 是两个不同的概念，但它们密切相关。以下是它们的区别及联系：

1️⃣ 节点（Node）
在 DOM 中，节点（Node）有 12 种类型（常用的有 4 种）：

节点类型数值说明例子
ELEMENT_NODE1元素节点<div>、<p>、<span>
TEXT_NODE3文本节点"Hello"（文本内容）
ATTRIBUTE_NODE2属性节点id="title"
COMMENT_NODE8注释节点<!-- 这是注释 -->

📌 获取节点的 nodeType

var div = document.querySelector("div");
console.log(div.nodeType); // 输出 1（ELEMENT_NODE）var text = div.firstChild;
console.log(text.nodeType); // 输出 3（TEXT_NODE）

2️⃣ 元素（Element）

元素是 HTML 标签（Element Node），即 ELEMENT_NODE 类型的节点。

📌 常见的元素

<div id="box">Hello</div>

<div> 是 元素，它也是 节点，但它不包括文本、属性等其他节点类型。

📌 获取元素

var el = document.getElementById("box");
console.log(el.nodeType); // 输出 1（ELEMENT_NODE）
console.log(el.nodeName); // 输出 "DIV"
区别节点（Node）元素（Element）
概念DOM 树的所有单元（包括元素、文本、注释等）只指 ELEMENT_NODE（HTML 标签）
类型12 种节点类型（常见：元素、文本、属性、注释）只属于 ELEMENT_NODE 类型
包含范围更广泛，包括文本、属性等只包含 HTML 标签
访问方式childNodes 获取所有子节点children 获取所有子元素（不包括文本）

📌 示例

<div id="box">Hello <span>World</span>
</div>

var box = document.getElementById("box");// 🔹 获取所有子节点（包含文本）
console.log(box.childNodes); // NodeList(3): [Text, <span>, Text]// 🔹 获取所有子元素（不包含文本）
console.log(box.children); // HTMLCollection(1): [<span>]

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><button id="btn">我是一个按钮</button><script type="text/javascript">//浏览器已经为我们提供文档节点，文档节点代表的是整个网页console.log(document);//获取到button对象var btn = document.getElementById("btn");//修改按钮的文字btn.innerHTML = "I'm Button";</script></body>
</html>

在这里插入图片描述

在这里插入图片描述

🔥节点的属性

nodeNamenodeTypenodeValue
文档节点#document9null
元素节点标签名1null
属性节点属性名2属性值
文本节点#text3文本内容

🔥 JavaScript 获取元素节点

在 JavaScript 中，我们可以使用 DOM（文档对象模型） 来访问和操作 HTML 页面中的元素。下面是几个常用的 DOM 方法 及属性解析。🚀

  1. getElementById()
    • 通过id属性获取一个元素节点对象
  2. getElementsByTagName()
    • 通过标签名获取一组元素节点对象
  3. getElementsByName()
    • 通过name属属性获取一组元素节点对象

1️⃣ getElementById(id)

作用：通过 id 获取 唯一的元素 节点对象。

📌 语法：

document.getElementById("id值");

✅ 示例

<p id="demo">Hello, JavaScript!</p>
<script>var element = document.getElementById("demo");console.log(element.innerHTML); // 输出: Hello, JavaScript!
</script>

2️⃣ getElementsByTagName(tagName)

作用：通过 标签名 获取 一组元素（返回的是类数组）。

📌 语法：

document.getElementsByTagName("标签名");

✅ 示例

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<script>var elements = document.getElementsByTagName("p");console.log(elements[0].innerHTML); // "Paragraph 1"console.log(elements[1].innerHTML); // "Paragraph 2"
</script>

🔹 重要

  • 即使查询到的元素只有一个，也会返回一个数组（HTMLCollection）。
  • 需要通过索引（[index]）来访问具体元素。

3️⃣ getElementsByName(name)

作用：通过 name 属性获取 一组元素节点对象（常用于表单元素）。

📌 语法：

document.getElementsByName("name值");

✅ 示例

<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
<script>var radios = document.getElementsByName("gender");console.log(radios.length); // 输出 2
</script>

4️⃣ innerHTML

作用：获取或修改 HTML 元素的内容（包括 HTML 标签）。

📌 语法：

元素.innerHTML = "新内容";

✅ 示例

<div id="test">Hello</div>
<script>var div = document.getElementById("test");console.log(div.innerHTML); // "Hello"div.innerHTML = "<b>World</b>"; // 修改内容console.log(div.innerHTML); // "<b>World</b>"
</script>

在这里插入图片描述

5️⃣ 直接获取元素属性

  • 如果只想获取元素的属性值，不需要 innerHTML，可以直接使用 元素.属性名。
  • 例如：
    document.getElementById("inputId").value;  // 获取 input 的值
document.getElementById("divId").id;       // 获取 div 的 id
document.getElementById("inputId").name;   // 获取 input 的 name

✅ 示例

<input id="myInput" type="text" name="username" value="admin">
<script>var input = document.getElementById("myInput");console.log(input.value);  // "admin"console.log(input.name);   // "username"
</script>

6️⃣ className 获取 class 属性

🚨 注意：class 不能直接使用 元素.class 访问，而要使用 元素.className。

📌 语法：

元素.className = "新class值";

✅ 示例

<div id="box" class="old-class">内容</div>
<script>var div = document.getElementById("box");console.log(div.className); // "old-class"div.className = "new-class"; // 修改 classconsole.log(div.className); // "new-class"
</script>

在这里插入图片描述

🔥 总结

方法/属性作用返回值用法示例
getElementById(id)通过 id 获取唯一元素单个 DOM 节点document.getElementById("demo")
getElementsByTagName(tag)通过标签名获取元素类数组（HTMLCollection）document.getElementsByTagName("p")
getElementsByName(name)通过 name 获取元素类数组（NodeList）document.getElementsByName("gender")
innerHTML读取/修改元素内容（包括 HTML 代码）字符串element.innerHTML = "<b>Hello</b>"
元素.属性名获取元素属性值字符串element.value、element.id
className读取/修改 class字符串element.className = "new-class"

🎯 常见用途

  • 获取用户输入值：
    var userInput = document.getElementById("username").value;
  • 修改 HTML 内容：
    document.getElementById("title").innerHTML = "Welcome!";
  • 改变 CSS 样式：
    document.getElementById("box").className = "new-style";

<!DOCTYPE html>
<html>
<head><title>JavaScript 节点属性示例</title>
</head>
<body><div id="myDiv" class="container">Hello, World!</div><script>// 获取具有特定id的元素var divElement = document.getElementById("myDiv");// 访问节点的属性console.log(divElement.id); // 输出：myDivconsole.log(divElement.className); // 输出：containerconsole.log(divElement.innerHTML); // 输出：Hello, World!</script>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>DOM查询</title><style>body {width: 800px;margin-left: auto;margin-right: auto;}button {width: 300px;margin-bottom: 10px;}#btnList {float:left;}#total{width: 450px;float:left;}ul{list-style-type: none;margin: 0px;padding: 0px;}.inner li{border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float:left;}.inner{width:400px;border-style: solid;border-width: 1px;margin-bottom: 10px;padding: 10px;float: left;}</style><script type="text/javascript">//定义一个函数，专门用来为指定元素绑定单击响应函数//参数：//idStr 要绑定单击响应函数的对象的id属性值//fun 事件的回调函数，当单击元素时，该函数将会被触发function myClick(idStr , fun){var btn = document.getElementById(idStr);btn.onclick = fun;}window.onload = function(){
<---!------------------------------------------------------------------------------------>//为id为btn01的按钮绑定一个单击响应函数var btn01 = document.getElementById("btn01");btn01.onclick = function(){//查找#bj节点var bj = document.getElementById("bj");//打印bj//innerHTML 通过这个属性可以获取到元素内部的html代码alert(bj.innerHTML);};<---!------------------------------------------------------------------------------------>//为id为btn02的按钮绑定一个单击响应函数var btn02 = document.getElementById("btn02");btn02.onclick = function(){//查找所有li节点//getElementsByTagName()可以根据标签名来获取一组元素节点对象//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中//即使查询到的元素只有一个，也会封装到数组中返回var lis = document.getElementsByTagName("li");//打印lisalert(lis.length);//变量lisfor(var i=0 ; i<lis.length ; i++){alert(lis[i].innerHTML);}};<---!------------------------------------------------------------------------------------>//为id为btn03的按钮绑定一个单击响应函数var btn03 = document.getElementById("btn03");btn03.onclick = function(){//查找name=gender的所有节点var inputs = document.getElementsByName("gender");alert(inputs.length);for(var i=0 ; i<inputs.length ; i++){//innerHTML用于获取元素内部的HTML代码alert(inputs[i].innerHTML);alert(inputs[i].className);}};
<---!------------------------------------------------------------------------------------>//为id为btn04的按钮绑定一个单击响应函数var btn04 = document.getElementById("btn04");btn04.onclick = function(){//获取id为city的元素var city = document.getElementById("city");//查找#city下所有li节点var lis = city.getElementsByTagName("li");for(var i=0 ; i<lis.length ; i++){alert(lis[i].innerHTML);}};
<---!------------------------------------------------------------------------------------>//为id为btn05的按钮绑定一个单击响应函数var btn05 = document.getElementById("btn05");btn05.onclick = function(){//获取id为city的节点var city = document.getElementById("city");//返回#city的所有子节点var cns = city.childNodes;alert(cns.length);for(var i=0 ; i<cns.length ; i++){alert(cns[i]);}//children属性可以获取当前元素的所有子元素var cns2 = city.children;alert(cns2.length);};
<---!------------------------------------------------------------------------------------>//为id为btn06的按钮绑定一个单击响应函数var btn06 = document.getElementById("btn06");btn06.onclick = function(){//获取id为phone的元素var phone = document.getElementById("phone");//返回#phone的第一个子节点phone.childNodes[0];//firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）var fir = phone.firstChild;//firstElementChild获取当前元素的第一个子元素fir = phone.firstElementChild;alert(fir);};
<---!------------------------------------------------------------------------------------>//为id为btn07的按钮绑定一个单击响应函数myClick("btn07",function(){//获取id为bj的节点var bj = document.getElementById("bj");//返回#bj的父节点var pn = bj.parentNode;alert(pn.innerHTML);//innerText，该属性可以获取到元素内部的文本内容//它和innerHTML类似，不同的是它会自动将html去除alert(pn.innerText);});<---!------------------------------------------------------------------------------------>//为id为btn08的按钮绑定一个单击响应函数myClick("btn08",function(){//获取id为android的元素var and = document.getElementById("android");//返回#android的前一个兄弟节点（也可能获取到空白的文本）var ps = and.previousSibling;//previousElementSibling获取前一个兄弟元素，IE8及以下不支持var pe = and.previousElementSibling;alert(ps);});
<---!------------------------------------------------------------------------------------>//读取#username的value属性值myClick("btn09",function(){//获取id为username的元素var um = document.getElementById("username");//读取um的value属性值//文本框的value属性值，就是文本框中填写的内容alert(um.value);});<---!------------------------------------------------------------------------------------>//设置#username的value属性值myClick("btn10",function(){//获取id为username的元素var um = document.getElementById("username");um.value = "今天天气真不错~~~";});<---!------------------------------------------------------------------------------------> //返回#bj的文本值myClick("btn11",function(){//获取id为bj的元素var bj = document.getElementById("bj");alert(bj.innerHTML);});};</script></head><body><div id="total"><div class="inner"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br /><br /><p>你手机的操作系统是?</p><ul id="phone"><li>IOS</li> <li id="android">Android</li><li>Windows Phone</li></ul></div><div class="inner">gender:<input class="hello" type="radio" name="gender" value="male"/>Male<input class="hello" type="radio" name="gender" value="female"/>Female<br><br>name:<input type="text" name="name" id="username" value="abcde"/></div></div><div id="btnList"><div><button id="btn01">查找#bj节点</button></div><div><button id="btn02">查找所有li节点</button></div><div><button id="btn03">查找name=gender的所有节点</button></div><div><button id="btn04">查找#city下所有li节点</button></div><div><button id="btn05">返回#city的所有子节点</button></div><div><button id="btn06">返回#phone的第一个子节点</button></div><div><button id="btn07">返回#bj的父节点</button></div><div><button id="btn08">返回#android的前一个兄弟节点</button></div><div><button id="btn09">返回#username的value属性值</button></div><div><button id="btn10">设置#username的value属性值</button></div><div><button id="btn11">返回#bj的文本值</button></div></div></body>
</html>

在这里插入图片描述

🔥练习：图片切换⭐️

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#outer{width: 500px;margin: 50px auto;padding: 10px;font-family: 'Courier New', Courier, monospace;background-color: papayawhip;/*设置文本居中*/text-align: center;}</style><script type="text/javascript">window.onload = function(){//点击按钮切换图片//获取两个按钮var prev = document.getElementById("prev");var next = document.getElementById("next");//要切换图片就是要修改img标签的src属性//获取img标签var img = document.getElementsByTagName("img")[0];//创建一个数组，用来保存图片的路径var imgArr = ["img/1.jpg" , "img/2.jpg" , "img/3.jpg" , "img/4.jpg" ,"img/5.jpg"];//创建一个变量，来保存当前正在显示的图片的索引var index = 0;//获取id为info的p元素var info = document.getElementById("info");//设置提示文字info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";//分别为两个按钮绑定单击响应函数prev.onclick = function(){//切换到上一张，索引自减index--;//判断index是否小于0if(index < 0){index = imgArr.length - 1;}img.src = imgArr[index];//当点击按钮以后，重新设置信息info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";};next.onclick = function(){//切换到下一张是index自增index++;if(index > imgArr.length - 1){index = 0;}//切换图片就是修改img的src属性//要修改一个元素的属性 元素.属性 = 属性值img.src = imgArr[index];//当点击按钮以后，重新设置信息info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";};};</script></head><body><div id="outer"><p id="info"></p><img src="img/1.jpg" alt="冰棍" /><button id="prev">上一张</button><button id="next">下一张</button></div></body>
</html>

🔥元素节点的子节点

在 JavaScript DOM 操作中，我们常常需要访问 某个元素的子元素或子节点，以下是常用的方法及属性解析：🚀

1️⃣ getElementsByTagName(tagName)

作用：返回 当前节点的所有子节点（根据标签名获取）。

📌 语法：

元素.getElementsByTagName("标签名");

✅ 示例

<ul id="list"><li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul><script>var list = document.getElementById("list");var items = list.getElementsByTagName("li"); // 获取所有 <li> 子元素console.log(items.length); // 3console.log(items[0].innerHTML); // "Item 1"
</script>

🔹 重要

  • 返回的是 HTMLCollection（类数组），需要使用索引访问。
  • 只能获取指定标签的子节点。

2️⃣ childNodes

作用：

  • 属性，返回 所有子节点（包括文本、注释、标签等）。
  • 空白字符（换行、空格）也会被当成文本节点（不同浏览器可能有所区别）。

📌 语法：

元素.childNodes;

✅ 示例

<ul id="list"><li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul><script>var list = document.getElementById("list");console.log(list.childNodes.length);console.log(list.childNodes);
</script>

在这里插入图片描述

🔹 注意

  • IE8 及以下不会将空白文本当成节点，其他浏览器会。

3️⃣ children（推荐使用 ✅）

作用：

  • 属性，返回当前元素的所有子元素（不包括文本、注释节点）。
  • 比 childNodes 更干净，更常用于遍历子元素。

📌 语法：

元素.children;

✅ 示例

<ul id="list"><li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul><script>var list = document.getElementById("list");console.log(list.children); // HTMLCollection(3) 只包含 <li>
</script>

在这里插入图片描述

🔹 推荐使用

  • 适用于大多数情况下的 获取子元素 操作。
  • 不会受到 空白文本节点 的影响。

4️⃣ firstChild

作用：

  • 属性，返回当前节点的第一个子节点（可能是文本、注释或标签）。
  • 空白文本也可能被当成第一个子节点。

📌 语法：

元素.firstChild;

✅ 示例

<ul id="list"><li>Item 1</li><li>Item 2</li>
</ul><script>var list = document.getElementById("list");console.log(list.firstChild); // 可能是文本（换行）console.log(list.firstChild.nodeType); // 3（文本节点）
</script>

在这里插入图片描述

5️⃣ firstElementChild（更精准 ✅）

作用：

  • 属性，返回当前元素的 第一个子元素（跳过文本、注释）。
  • 不支持 IE8 以下。

📌 语法：

元素.firstElementChild;

✅ 示例

<ul id="list"><li>Item 1</li><li>Item 2</li>
</ul><script>var list = document.getElementById("list");console.log(list.firstElementChild); // <li>Item 1</li>
</script>

在这里插入图片描述

🔹 兼容性

  • IE8 及以下不支持，如需兼容：
    var first = list.firstElementChild || list.children[0]; // 兼容写法

6️⃣ lastChild

作用：

  • 属性，返回当前节点的最后一个子节点（可能是文本、注释或标签）。
  • 如果最后一个子节点是空白文本，则获取到的是文本。

📌 语法：

元素.lastChild;

✅ 示例

<ul id="list"><li>Item 1</li><li>Item 2</li>
</ul><script>var list = document.getElementById("list");console.log(list.lastChild); // 可能是文本（换行）
</script>

🔥 总结

方法/属性作用是否包含文本节点兼容性推荐使用
getElementsByTagName(tag)按标签获取子节点❌ 只获取标签✅✅
childNodes获取所有子节点✅ 包括文本✅❌
children获取所有子元素❌ 只获取元素✅✅
firstChild获取第一个子节点✅ 可能是文本✅❌
firstElementChild获取第一个子元素❌ 只获取元素❌（不支持 IE8）✅
lastChild获取最后一个子节点✅ 可能是文本✅❌

🔥获取父节点和兄弟节点

在 DOM 操作 中，我们经常需要获取某个元素的 父节点、兄弟节点或文本内容，以下是常用的方法及属性解析 🚀：

1️⃣ 获取父节点

📌 parentNode

作用：

  • 获取当前节点的父节点。
  • 可能获取到 元素节点（标签）或其他类型的节点（如 document）。

📌 语法：

元素.parentNode;

✅ 示例

<div id="child">Hello</div><script>var child = document.getElementById("child");console.log(child.parentNode); // 获取到 <body> 或 <div> 等父元素
</script>

🔹 重点

  • parentNode 可能返回 document，即根节点。

2️⃣ 获取兄弟节点

📌 previousSibling

作用：

  • 获取前一个兄弟节点，可能是文本、注释或标签。
  • 可能会获取到 空白文本（换行符等），导致结果不可预测。

📌 语法：

元素.previousSibling;

✅ 示例

<p>第一段</p>
<!-- 这里有一个换行符（文本节点） -->
<p id="para2">第二段</p><script>var para2 = document.getElementById("para2");console.log(para2.previousSibling); // 可能是换行文本节点
</script>

🔹 兼容性

  • 可能获取到 空白文本节点，导致 null 或意外结果。
📌 nextSibling

作用：

  • 获取后一个兄弟节点，可能是文本、注释或标签。
  • 可能会获取到 空白文本（换行符等），导致结果不可预测。

📌 语法：

元素.nextSibling;

✅ 示例

<p id="para1">第一段</p>
<!-- 这里有一个换行符（文本节点） -->
<p>第二段</p><script>var para1 = document.getElementById("para1");console.log(para1.nextSibling); // 可能是换行文本节点
</script>

🔹 问题

  • 可能获取到 空白文本节点，导致 null 或意外结果。

3️⃣ 获取前后兄弟元素（推荐 ✅）

📌 previousElementSibling（推荐 ✅）

作用：

  • 获取前一个兄弟元素节点（忽略文本、注释）。
  • IE8 及以下不支持。

📌 语法：

元素.previousElementSibling;

✅ 示例

<p>第一段</p>
<p id="para2">第二段</p><script>var para2 = document.getElementById("para2");console.log(para2.previousElementSibling); // <p>第一段</p>
</script>

🔹 推荐使用

  • 不会获取空白文本，直接获取前一个元素节点。
📌 nextElementSibling（推荐 ✅）

作用：

  • 获取后一个兄弟元素节点（忽略文本、注释）。
  • IE8 及以下不支持。

📌 语法：

元素.nextElementSibling;

✅ 示例

<p id="para1">第一段</p>
<p>第二段</p><script>var para1 = document.getElementById("para1");console.log(para1.nextElementSibling); // <p>第二段</p>
</script>

🔹 推荐使用

  • 不会获取空白文本，避免 null 或意外结果。
  • 如果要兼容 IE8，可以使用：
    var next = para1.nextElementSibling || para1.nextSibling;

4️⃣ 获取元素文本

📌 innerText

作用：

  • 获取纯文本内容，自动去除 HTML 标签。
  • 与 innerHTML 类似，但不会包含 HTML 标签。

📌 语法：

元素.innerText;

✅ 示例

<div id="content"><p>你好 <strong>世界</strong></p>
</div><script>var content = document.getElementById("content");console.log(content.innerText); // "你好 世界"
</script>

🔹 重点

  • innerText 不会保留 HTML 标签，而 innerHTML 会保留：
    console.log(content.innerHTML); 
// 输出："<p>你好 <strong>世界</strong></p>"
  • 适用于获取纯文本，不适用于操作 HTML 结构。

🔥 总结

方法/属性作用是否包含文本节点兼容性推荐使用
parentNode获取父节点✅ 可能是 document✅✅
previousSibling获取前一个兄弟节点✅ 可能是文本✅❌
nextSibling获取后一个兄弟节点✅ 可能是文本✅❌
previousElementSibling获取前一个兄弟元素❌ 仅元素❌（IE8 不支持）✅
nextElementSibling获取后一个兄弟元素❌ 仅元素❌（IE8 不支持）✅
innerText获取元素文本❌ 仅文本✅✅

🔥练习：全选/全不选/反选⭐️

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选练习</title>
<script type="text/javascript">window.onload = function(){//获取四个多选框itemsvar items = document.getElementsByName("items");//获取全选/全不选的多选框var checkedAllBox = document.getElementById("checkedAllBox");
<------------------------!------------------------------------------------------------------>//全选按钮:点击按钮以后，四个多选框全都被选中//1. #checkedAllBtn//为id为checkedAllBtn的按钮绑定一个单击响应函数var checkedAllBtn = document.getElementById("checkedAllBtn");checkedAllBtn.onclick = function(){//遍历itemsfor(var i=0 ; i<items.length ; i++){//设置四个多选框变成选中状态items[i].checked = true;}//将全选/全不选设置为选中checkedAllBox.checked = true;};
<------------------------!------------------------------------------------------------------>//全不选按钮:点击按钮以后，四个多选框都变成没选中的状态//2. #checkedNoBtn//为id为checkedNoBtn的按钮绑定一个单击响应函数var checkedNoBtn = document.getElementById("checkedNoBtn");checkedNoBtn.onclick = function(){for(var i=0; i<items.length ; i++){//将四个多选框设置为没选中的状态items[i].checked = false;}//将全选/全不选设置为不选中checkedAllBox.checked = false;};
<------------------------!------------------------------------------------------------------>//反选按钮:点击按钮以后，选中的变成没选中，没选中的变成选中//3.#checkedRevBtnvar checkedRevBtn = document.getElementById("checkedRevBtn");checkedRevBtn.onclick = function(){//将checkedAllBox设置为选中状态checkedAllBox.checked = true;for(var i=0; i<items.length ; i++){items[i].checked = !items[i].checked;//判断四个多选框是否全选//只要有一个没选中则就不是全选if(!items[i].checked){//一旦进入判断，则证明不是全选状态//将checkedAllBox设置为没选中状态checkedAllBox.checked = false;}}//在反选时也需要判断四个多选框是否全都选中};
<------------------------!------------------------------------------------------------------>//提交按钮：点击按钮以后，将所有选中的多选框的value属性值弹出//4.#sendBtn//为sendBtn绑定单击响应函数var sendBtn = document.getElementById("sendBtn");sendBtn.onclick = function(){//遍历itemsfor(var i=0 ; i<items.length ; i++){//判断多选框是否选中if(items[i].checked){alert(items[i].value);}}};
<------------------------!------------------------------------------------------------------>//5.#checkedAllBox//全选/全不选 多选框//当它选中时，其余的也选中，当它取消时其余的也取消//在事件的响应函数中，响应函数是给谁绑定的this就是谁//为checkedAllBox绑定单击响应函数checkedAllBox.onclick = function(){//设置多选框的选中状态for(var i=0; i <items.length ; i++){items[i].checked = this.checked;}};
<------------------------!------------------------------------------------------------------>//6.items//如果四个多选框全都选中，则checkedAllBox也应该选中//如果四个多选框没都选中，则checkedAllBox也不应该选中//为四个多选框分别绑定点击响应函数for(var i=0 ; i<items.length ; i++){items[i].onclick = function(){//将checkedAllBox设置为选中状态checkedAllBox.checked = true;for(var j=0 ; j<items.length ; j++){//判断四个多选框是否全选//只要有一个没选中则就不是全选if(!items[j].checked){//一旦进入判断，则证明不是全选状态//将checkedAllBox设置为没选中状态checkedAllBox.checked = false;//一旦进入判断，则已经得出结果，不用再继续执行循环break;}}};}};
</script>
</head>
<body><form method="post" action="">你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 <br /><input type="checkbox" name="items" value="足球" />足球<input type="checkbox" name="items" value="篮球" />篮球<input type="checkbox" name="items" value="羽毛球" />羽毛球<input type="checkbox" name="items" value="乒乓球" />乒乓球<br /><input type="button" id="checkedAllBtn" value="全　选" /><input type="button" id="checkedNoBtn" value="全不选" /><input type="button" id="checkedRevBtn" value="反　选" /><input type="button" id="sendBtn" value="提　交" /></form>
</body>
</html>

在这里插入图片描述

🔥查询剩余属性、方法

在 JavaScript DOM 操作 中，我们可以使用多种方法来查询 页面元素，以下是常用的属性和方法解析 🚀：

1️⃣ 查询 document 相关属性

📌 body

作用：

  • document.body 返回 <body> 标签对象，可以直接操作 body 内部的元素。

📌 语法：

document.body;

✅ 示例

console.log(document.body); // 输出 <body>...</body>

🔹 重点

  • body 只能在 document 对象上使用。
  • 可用于动态修改 body 内部结构：
    document.body.innerHTML = "<h1>Hello World!</h1>";
📌 documentElement

作用：

  • document.documentElement 返回 <html> 根标签。
  • 与 document.body 类似，但获取的是整个 HTML 页面。

📌 语法：

document.documentElement;

✅ 示例

console.log(document.documentElement); // 输出 <html>...</html>

🔹 重点

  • document.documentElement 是整个 HTML 页面，document.body 只是 <body> 部分。
  • 获取页面滚动高度时，通常使用 document.documentElement.scrollTop：
    console.log(document.documentElement.scrollTop); // 获取滚动条位置
📌 all ❌

作用：

  • document.all 返回页面所有元素，类似 getElementsByTagName("*")。
  • 已被废弃，不推荐使用 ❌。

📌 语法：

document.all;

✅ 示例

console.log(document.all); // HTMLCollection(页面所有元素)

🔹 重点

  • 已废弃，尽量使用 document.querySelectorAll("*") 代替。

2️⃣ 查询元素的方法

📌 getElementsByClassName()

作用：

  • 根据 class 属性获取一组元素节点对象。
  • IE8 及以下不支持 ❌。

📌 语法：

document.getElementsByClassName("className");

✅ 示例

<div class="box">1</div>
<div class="box">2</div><script>var elements = document.getElementsByClassName("box");console.log(elements); // HTMLCollection(2) [div.box, div.box]
</script>

🔹 重点

  • 返回 HTMLCollection（类数组），不能直接使用 forEach()，需要转换：
    Array.from(elements).forEach(el => console.log(el.innerText));
📌 querySelector()

作用：

  • 支持 CSS 选择器，返回第一个匹配的元素。
  • 可代替 getElementsByClassName()（兼容 IE8）。
  • 适用于 id、class、标签 等查询。

📌 语法：

document.querySelector("CSS选择器");

✅ 示例

<div class="box">1</div>
<div class="box">2</div><script>var element = document.querySelector(".box");console.log(element.innerText); // 输出 1
</script>

🔹 重点

  • 返回 单个 元素，即使匹配多个。
  • 支持更复杂的选择器：
    document.querySelector("div.box:first-child");
📌 querySelectorAll()

作用：

  • 支持 CSS 选择器，返回所有匹配的元素（NodeList）。
  • 适用于 id、class、标签 等查询。

📌 语法：

document.querySelectorAll("CSS选择器");

✅ 示例

<div class="box">1</div>
<div class="box">2</div><script>var elements = document.querySelectorAll(".box");console.log(elements); // NodeList(2) [div.box, div.box]
</script>

🔹 重点

  • 返回的是 NodeList（伪数组），可以直接使用 forEach()：
    elements.forEach(el => console.log(el.innerText));
  • 如果只想获取一个元素，推荐 querySelector()，如果需要多个，推荐 querySelectorAll()。

🔥 总结

方法/属性作用返回类型兼容性推荐使用
document.body获取 <body>HTMLBodyElement✅✅
document.documentElement获取 <html>HTMLHtmlElement✅✅
document.all获取所有元素HTMLCollection（已废弃）❌❌
getElementsByClassName()获取所有匹配 class 的元素HTMLCollection❌（IE8 不支持）⚠️
querySelector()获取第一个匹配的元素Element✅✅
querySelectorAll()获取所有匹配的元素NodeList✅✅
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function(){//在document中有一个属性body，它保存的是body的引用var body = document.body;//document.documentElement保存的是html根标签var html = document.documentElement;console.log(html);//document.all代表页面中所有的元素var all = document.all;console.log(all.length);for(var i=0 ; i<all.length ; i++){console.log(all[i]);}all = document.getElementsByTagName("*");console.log(all.length);//根据元素的class属性值查询一组元素节点对象var box1 = document.getElementsByClassName("box1");console.log(box1.length);//获取页面中的所有的divvar divs = document.getElementsByTagName("div");//获取class为box1中的所有的div//var divs = document.getElementsByTagName(".box div");//虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替//使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个var div = document.querySelector(".box1 div");var box1 = document.querySelector(".box1")console.log(div.innerHTML);console.log(box1.innerHTML);//document.querySelectorAll()//该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回//即使符合条件的元素只有一个，它也会返回数组box1 = document.querySelectorAll(".box1");box1 = document.querySelectorAll("#box2");console.log(box1);};</script></head><body><div id="box2"></div>	<div class="box1">我是第一个box1	 <div>我是box1中的div</div></div><div class="box1"><div>我是box1中的div</div></div><div class="box1"><div>我是box1中的div</div></div><div class="box1"><div>我是box1中的div</div></div><div></div></body>
</html>

❤️DOM增删改

🔥相关语法

这些方法主要用于 动态操作 DOM，可以创建、插入、替换和删除 HTML 元素。以下是详细解析和示例代码：

1️⃣ 创建新节点

📌 document.createElement(tagName) —— 创建一个 元素节点

🔹 作用：创建一个新的 HTML 元素（但不会自动添加到页面）。

var newDiv = document.createElement("div"); 
console.log(newDiv); // <div></div>（未添加到页面）
📌 document.createTextNode(text) —— 创建 文本节点

🔹 作用：创建一个包含文本的 TEXT_NODE 节点（但不会自动添加到页面）。

var textNode = document.createTextNode("Hello, World!");
console.log(textNode); // #text "Hello, World!"

2️⃣ 添加、插入、替换、删除节点

appendChild() —— 添加子节点

🔹 作用：将子节点 添加到父节点的最后 。

var parent = document.getElementById("container"); // 假设HTML中有 <div id="container"></div>
var newPara = document.createElement("p"); 
newPara.textContent = "This is a new paragraph!";
parent.appendChild(newPara);

📌 结果

<div id="container"><p>This is a new paragraph!</p>
</div>
📌 insertBefore()—— 在指定子节点前插入新节点

🔹 作用：在某个 已有的子节点 之前插入新节点。

var parent = document.getElementById("container"); 
var newPara = document.createElement("p"); 
newPara.textContent = "Inserted paragraph!";
var firstChild = parent.firstChild; // 获取第一个子节点
parent.insertBefore(newPara, firstChild);

📌 结果

<div id="container"><p>Inserted paragraph!</p><p>（原来的内容）</p>
</div>
📌 replaceChild() —— 替换子节点

🔹 作用：用 新节点 替换 旧节点。

var parent = document.getElementById("container");
var newPara = document.createElement("p");
newPara.textContent = "Replaced paragraph!";
var oldPara = parent.children[0]; // 获取第一个 <p> 元素
parent.replaceChild(newPara, oldPara);

📌 结果

<div id="container"><p>Replaced paragraph!</p> <!-- 原来的p被替换 -->
</div>
📌 removeChild()—— 删除子节点

🔹 作用：删除 指定的子节点。

var parent = document.getElementById("container");
var paraToRemove = parent.children[0]; // 获取第一个 <p> 元素
parent.removeChild(paraToRemove);

📌 结果

<div id="container"><!-- 里面的 <p> 被删除 -->
</div>

📌 另一种写法

var para = document.querySelector("p");
para.parentNode.removeChild(para);
方法作用语法
createElement()创建元素节点document.createElement("tag")
createTextNode()创建文本节点document.createTextNode("text")
appendChild()追加子节点到最后parent.appendChild(child)
insertBefore()在某个子节点前插入parent.insertBefore(newNode, oldNode)
replaceChild()替换旧的子节点parent.replaceChild(newNode, oldNode)
removeChild()删除子节点parent.removeChild(child)

💡 实战：动态创建并删除一个按钮

var btn = document.createElement("button");
btn.textContent = "Click Me";
document.body.appendChild(btn);// 点击按钮后删除自己
btn.onclick = function() {btn.parentNode.removeChild(btn);
};

💡 实战

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="style/css.css" /><script type="text/javascript">window.onload = function() {//创建一个"广州"节点,添加到#city下myClick("btn01",function(){//创建广州节点 <li>广州</li>//创建li元素节点var li = document.createElement("li");//创建广州文本节点var gzText = document.createTextNode("广州");//将gzText设置li的子节点li.appendChild(gzText);//获取id为city的节点var city = document.getElementById("city");//将广州添加到city下city.appendChild(li);});//将"广州"节点插入到#bj前面myClick("btn02",function(){//创建一个广州var li = document.createElement("li");var gzText = document.createTextNode("广州");li.appendChild(gzText);//获取id为bj的节点var bj = document.getElementById("bj");//获取cityvar city = document.getElementById("city");//插入新的子节点city.insertBefore(li , bj);});//使用"广州"节点替换#bj节点myClick("btn03",function(){//创建一个广州var li = document.createElement("li");var gzText = document.createTextNode("广州");li.appendChild(gzText);//获取id为bj的节点var bj = document.getElementById("bj");//获取cityvar city = document.getElementById("city");//替换已有的子节点city.replaceChild(li , bj);});//删除#bj节点myClick("btn04",function(){//获取id为bj的节点var bj = document.getElementById("bj");//获取cityvar city = document.getElementById("city");city.removeChild(bj);});//读取#city内的HTML代码myClick("btn05",function(){//获取cityvar city = document.getElementById("city");alert(city.innerHTML);});//设置#bj内的HTML代码myClick("btn06" , function(){//获取bjvar bj = document.getElementById("bj");bj.innerHTML = "昌平";});myClick("btn07",function(){//向city中添加广州var city = document.getElementById("city");/** 使用innerHTML也可以完成DOM的增删改的相关操作* 一般我们会两种方式结合使用*///city.innerHTML += "<li>广州</li>";//创建一个livar li = document.createElement("li");//向li中设置文本li.innerHTML = "广州";//将li添加到city中city.appendChild(li);});};function myClick(idStr, fun) {var btn = document.getElementById(idStr);btn.onclick = fun;}</script></head><body><div id="total"><div class="inner"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul></div></div><div id="btnList"><div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div><div><button id="btn02">将"广州"节点插入到#bj前面</button></div><div><button id="btn03">使用"广州"节点替换#bj节点</button></div><div><button id="btn04">删除#bj节点</button></div><div><button id="btn05">读取#city内的HTML代码</button></div><div><button id="btn06">设置#bj内的HTML代码</button></div><div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div></div></body>
</html>


在这里插入图片描述

🔥练习：添加删除记录⭐️

  • confirm()：用于弹出一个带有确认和取消按钮的提示框。
    • 需要一个字符串作为参数，该字符串将会作为提示文字显示出来
    • 如果用户点击确认则会返回true，如果点击取消则返回false
  • 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为。

在这里插入图片描述

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>添加删除记录练习</title><link rel="stylesheet" type="text/css" href="ex_2_style/css.css" /><script type="text/javascript">
<------------------!------------------------------------------------------------------->//删除tr的响应函数function delA() {//点击超链接以后需要删除超链接所在的那行//这里我们点击那个超链接this就是谁//获取当前trvar tr = this.parentNode.parentNode;//获取要删除的员工的名字var name = tr.children[0].innerHTML;var flag = confirm("确认删除" + name + "吗?");//如果用户点击确认if(flag) {//删除trtr.parentNode.removeChild(tr);}return false;};
<------------------!------------------------------------------------------------------->window.onload = function() {//点击超链接以后，删除一个员工的信息//获取所有超链接var allA = document.getElementsByTagName("a");//为每个超链接都绑定一个单击响应函数for(var i = 0; i < allA.length; i++) {allA[i].onclick = delA;}
<------------------!------------------------------------------------------------------->//添加员工的功能//点击按钮以后，将员工的信息添加到表格中//为提交按钮绑定一个单击响应函数var addEmpButton = document.getElementById("addEmpButton");addEmpButton.onclick = function() {//获取用户添加的员工信息//获取员工的名字var name = document.getElementById("empName").value;//获取员工的email和salaryvar email = document.getElementById("email").value;var salary = document.getElementById("salary").value;//创建一个trvar tr = document.createElement("tr");//设置tr中的内容tr.innerHTML = "<td>"+name+"</td>"+"<td>"+email+"</td>"+"<td>"+salary+"</td>"+"<td><a href='javascript:;'>Delete</a></td>";//获取刚刚添加的a元素，并为其绑定单击响应函数				var a = tr.getElementsByTagName("a")[0];a.onclick = delA;//获取tablevar employeeTable = document.getElementById("employeeTable");//获取employeeTable中的tbodyvar tbody = employeeTable.getElementsByTagName("tbody")[0];//将tr添加到tbodye中tbody.appendChild(tr);};};</script></head><body><table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th>&nbsp;</th></tr><tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="javascript:;">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="deleteEmp?id=003">Delete</a></td></tr></table><div id="formDiv"><h4>添加新员工</h4><table><tr><td class="word">name: </td><td class="inp"><input type="text" name="empName" id="empName" /></td></tr><tr><td class="word">email: </td><td class="inp"><input type="text" name="email" id="email" /></td></tr><tr><td class="word">salary: </td><td class="inp"><input type="text" name="salary" id="salary" /></td></tr><tr><td colspan="2" align="center"><button id="addEmpButton">Submit</button></td></tr></table></div></body>
</html>

❤️操作CSS样式

🔥操作内联样式

  • 通过JS修改元素的样式，语法：元素.style.样式名 = 样式值
  • 注意：
    • 如果CSS的样式名中含有-，这种名称在JS中是不合法的比如background-color。
    • 需要将这种样式名修改为驼峰命名法，去掉-，然后将-后的字母大写。
    • 我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
    • 但是如果在样式中写了!important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要为样式添加!important。
  • 读取样式，语法：元素.style.样式名，通过style属性设置和读取的都是内联样式，无法读取样式表中的样式。

🔥获取元素当前显示样式

  • 获取元素的当前显示的样式，语法：元素.currentStyle.样式名
    • 它可以用来读取当前元素正在显示的样式。
    • 如果当前元素没有设置该样式，则获取它的默认值。
    • currentStyle只有IE浏览器支持，其他的浏览器都不支持。
  • 在其他浏览器中可以使用getComputedStyle()这个方法来获取元素当前的样式，这个方法是window的方法，可以直接使用，需要两个参数：
    • 第一个：要获取样式的元素。
    • 第二个：可以传递一个伪元素，一般都传null。
    • 该方法会返回一个对象，对象中封装了当前元素对应的样式。
    • 可以通过对象.样式名来读取样式。
    • 如果获取的样式没有设置，则会获取到真实的值，而不是默认值。比如：没有设置width，它不会获取到auto，而是一个长度，但是该方法不支持IE8及以下的浏览器。
    • 通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 100px;height: 100px;background-color: yellow;}</style><script type="text/javascript">window.onload = function(){//点击按钮以后读取box1的样式var box1 = document.getElementById("box1");var btn01 = document.getElementById("btn01");btn01.onclick = function(){//读取box1的宽度// alert(box1.style.width);// box1.currentStyle.width = "200px";// alert(box1.currentStyle.backgroundColor);// var obj = getComputedStyle(box1,null);// alert(getComputedStyle(box1,null).width);// alert(getComputedStyle(box1,null).backgroundColor);var w = getStyle(box1,"width");alert(w);};};/** 定义一个函数，用来获取指定元素的当前的样式* 参数：* 		obj 要获取样式的元素* 		name 要获取的样式名*/function getStyle(obj , name){if(window.getComputedStyle){//正常浏览器的方式，具有getComputedStyle()方法return getComputedStyle(obj , null)[name];}else{//IE8的方式，没有getComputedStyle()方法return obj.currentStyle[name];}}</script></head><body><button id="btn01">点我一下</button><br /><br /><div id="box1" ></div></body>
</html>

🔥其他样式操作的属性

这些属性主要用于获取元素的尺寸、偏移量和滚动信息，在网页布局、滚动监听、固定定位计算等场景非常有用。下面详细解析并提供示例代码。

1️⃣ client、offset、scroll 的区别

属性包含内容是否包含滚动条是否可修改
clientWidth / clientHeight内容区 + 内边距❌ 不包含❌ 只读
offsetWidth / offsetHeight内容区 + 内边距 + 边框✅ 包含❌ 只读
scrollWidth / scrollHeight整个滚动区域（超出部分也计算）❌ 不包含❌ 只读
scrollLeft / scrollTop滚动条偏移量✅ 包含✅ 可修改
offsetLeft / offsetTop相对于 offsetParent 的偏移量❌ 不包含❌ 只读

2️⃣ 获取元素可见尺寸

📌 clientWidth 和 clientHeight —— 可见区域尺寸

🔹 作用：获取元素的可见宽度和高度（不包括滚动条、边框）。

var box = document.getElementById("box");
console.log(box.clientWidth);  // 获取可见宽度
console.log(box.clientHeight); // 获取可见高度

📌 示例

<div id="box" style="width: 200px; height: 150px; padding: 10px; border: 5px solid black; overflow: scroll;">内容内容内容
</div>

📌 计算公式

clientWidth = 内容宽度 + 左右 padding
clientHeight = 内容高度 + 上下 padding

📌 示例结果

box.clientWidth  // 200 (内容 180 + 左右 padding 各10)
box.clientHeight // 150 (内容 130 + 上下 padding 各10)
📌offsetWidth 和 offsetHeight —— 包括边框

🔹 作用：获取元素的整个宽度/高度，包括内容区、内边距和边框（但不包括外边距）。

console.log(box.offsetWidth);  // 210px（200 + 5px 边框 *2）
console.log(box.offsetHeight); // 160px（150 + 5px 边框 *2）

📌 计算公式

offsetWidth = 内容宽度 + 左右 padding + 左右 border
offsetHeight = 内容高度 + 上下 padding + 上下 border

3️⃣ 获取元素偏移量

📌offsetParent —— 获取定位父元素

🔹 作用：获取最近的开启定位（position: relative/absolute/fixed）的祖先元素。

console.log(box.offsetParent); // 返回 box 的最近定位父元素

📌 规则

  1. 如果 box 的祖先元素有 position: relative / absolute / fixed，返回最近的定位祖先。
  2. 如果 box 没有定位祖先，返回 body。
📌offsetLeft 和 offsetTop —— 元素相对定位父元素的偏移量

🔹 作用：获取元素相对于 offsetParent 的水平/垂直偏移量（单位 px）。

console.log(box.offsetLeft); // 左侧偏移量
console.log(box.offsetTop);  // 顶部偏移量

📌 示例

<div style="position: relative;"><div id="box" style="position: absolute; left: 50px; top: 30px;"></div>
</div>

📌 结果

box.offsetLeft  // 50px
box.offsetTop   // 30px

4️⃣ 获取滚动信息

📌scrollWidth 和 scrollHeight —— 整个滚动区域

🔹 作用：获取整个内容的宽度/高度，即使内容超出可视区域。

console.log(box.scrollWidth);  // 滚动区域总宽度
console.log(box.scrollHeight); // 滚动区域总高度

📌 示例

<div id="box" style="width: 200px; height: 150px; overflow: auto;"><p style="width: 400px; height: 300px;">超出内容</p>
</div>

📌 结果

box.scrollWidth  // 400px
box.scrollHeight // 300px
📌scrollLeft 和 scrollTop —— 获取滚动距离

🔹 作用：获取滚动条滚动的距离。

console.log(box.scrollLeft); // 水平方向滚动距离
console.log(box.scrollTop);  // 垂直方向滚动距离

📌 示例

<div id="box" style="width: 200px; height: 150px; overflow: auto;"><p style="width: 400px; height: 300px;">超出内容</p>
</div>

📌 当滚动到底部

if (box.scrollHeight - box.scrollTop === box.clientHeight) {console.log("滚动到底部！");
}

📌 当滚动到最右侧

if (box.scrollWidth - box.scrollLeft === box.clientWidth) {console.log("滚动到最右侧！");
}

5️⃣ 实战案例

🔹 监听滚动事件
📌 需求：监听 div 的滚动，判断是否到底。

box.addEventListener("scroll", function() {if (box.scrollHeight - box.scrollTop === box.clientHeight) {console.log("滚动到底部！");}
});

6️⃣ 总结

属性作用
clientWidth / clientHeight可见区域尺寸（不含边框和滚动条）
offsetWidth / offsetHeight元素整体大小（包含边框）
offsetParent最近的定位父元素
offsetLeft / offsetTop相对 offsetParent 的偏移量
scrollWidth / scrollHeight整个滚动区域尺寸
scrollLeft / scrollTop滚动条偏移量

这些属性在网页动态布局、滚动监听、吸顶导航、无限加载等场景中都非常实用！🎯

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 100px;height: 100px;background-color: red;padding: 10px;border: 10px solid yellow;}#box2{padding: 100px;background-color: #bfa;}#box4{width: 200px;height: 300px;background-color: #bfa;overflow: auto;}#box5{width: 450px;height: 600px;background-color: yellow;}</style><script type="text/javascript">window.onload = function(){var box1 = document.getElementById("box1");var btn01 = document.getElementById("btn01");var box4 = document.getElementById("box4");btn01.onclick = function(){alert('盒子1的可见宽度：'+box1.clientWidth);alert('盒子1的可见高度：'+box1.clientHeight);alert('盒子1的整体宽度：'+box1.offsetWidth);var op = box1.offsetParent;alert('盒子1的定位父元素：'+op.id);alert('盒子1相对于父元素的水平偏移量：'+box1.offsetLeft);alert('盒子4的可见高度：'+box4.clientHeight);alert('盒子4的滚动区域宽度：'+box4.scrollWidth);alert('盒子4的水平滚动条的距离：'+box4.scrollLeft);alert('盒子4的垂直滚动条的距离：'+box4.scrollTop);};};</script></head><body id="body"><button id="btn01">点我一下</button><br /><br /><div id="box4"><div id="box5"></div></div><br /><br /><div id="box3"><div id="box2" style="position: relative;"><div id="box1"></div></div></div></body>
</html>

🔥练习：垂直滚动条滚动到底时使表单项可用⭐️

onscroll：该事件会在元素的滚动条滚动时触发。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">#license {width: 300px;height: 350px;border: 2px solid black;margin: 50px auto 0px;overflow: auto;background-color: beige;text-indent: 2em;}#license>p {margin: 0;}#license>p:nth-of-type(1) {text-align: center;}#bottom {width: 200px;height: 50px;margin: 10px auto 0;}</style>
</head>
<body>
<div></div><div id="license"><p style="font-size: 20px;"><strong>用户服务协议</strong><p><p><span style="color: red;"><strong>亲爱的用户，请仔细阅读以下协议!!</strong></span><br>1、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播下列信息：<br>（1）煽动抗拒、破坏宪法和法律、行政法规实施的；<br>（2）煽动颠覆国家政权，推翻社会主义制度的；<br>（3）煽动分裂国家、破坏国家统一的；<br>（4）煽动民族仇恨、民族歧视，破坏民族团结的；<br>（5）捏造或者歪曲事实，散布谣言，扰乱社会秩序的；<br>（6）宣扬封建迷信、淫秽、色情、赌博、暴力、凶杀、恐怖、教唆犯罪的；<br>（7）公然侮辱他人或者捏造事实诽谤他人的，或者进行其他恶意攻击的；<br>（8）损害国家机关信誉的；<br>（9）其他违反宪法和法律行政法规的；<br>（10）进行商业广告行为的。<br>2、未经本站的授权或许可，任何会员不得借用本站的名义从事任何商业活动，也不得将本站作为从事商业活动的场所、平台或其他任何形式的媒介。禁止将本站用作从事各种非法活动的场所、平台或者其他任何形式的媒介。</p><p style="color: red;">违反者若触犯法律，一切后果自负，本站不承担任何责任。</p>
</div>
<div id="bottom">我已阅读协议<input type="checkbox" name="注册" id="bottomOpt" value="注册" disabled="" /><button type="button" id="button" disabled="">同意</button>
</div><script type="text/javascript">let license = document.getElementById("license");let bottomOpt = document.getElementById("bottomOpt");let button = document.getElementById("button");license.onscroll = function() {// 滑到底才触发// 内容的总高度(scrollHeight)-滑动后的窗口距离最顶部方的距离(scrollTop)==窗口的大小时(height+内边距)// 这个过程中：scrollTop在不断增大(0-某一个范围)// 这里写本应该是等于，但考虑到误差问题，写成<=if (license.scrollHeight - license.scrollTop <= license.clientHeight) {bottomOpt.disabled = false;bottomOpt.onclick = function() {if (bottomOpt.checked) {button.disabled = false;button.onclick = function() {alert("注册成功！");}}}}}
</script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/73011.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

The Illustrated Stable Diffusion

The Illustrated Stable Diffusion

The Illustrated Stable Diffusion 1. The components of Stable Diffusion1.1. Image information creator1.2. Image Decoder 2. What is Diffusion anyway?2.1. How does Diffusion work?2.2. Painting images by removing noise 3. Speed Boost: Diffusion on compressed…
阅读更多...
yarn 装包时 package里包含sqlite3@5.0.2报错

yarn 装包时 package里包含sqlite3@5.0.2报错

yarn 装包时 package里包含sqlite35.0.2报错 解决方案&#xff1a; 第一步&#xff1a; 删除package.json里的sqlite35.0.2 第二步&#xff1a; 装包&#xff0c;或者增加其他的npm包 第三步&#xff1a; 在package.json里增加sqlite35.0.2&#xff0c;并运行yarn装包 此…
阅读更多...
buu-bjdctf_2020_babystack2-好久不见51

buu-bjdctf_2020_babystack2-好久不见51

整数溢出漏洞 将nbytes设置为-1就会回绕&#xff0c;变成超大整数 从而实现栈溢出漏洞 环境有问题 from pwn import *# 连接到远程服务器 p remote("node5.buuoj.cn", 28526)# 定义后门地址 backdoor 0x400726# 发送初始输入 p.sendlineafter(b"your name…
阅读更多...
DHCP 配置

DHCP 配置

​ 最近发现&#xff0c;自己使用虚拟机建立的集群&#xff0c;在断电关机或者关机一段时间后&#xff0c;集群之间的链接散了&#xff0c;并且节点自身的 IP 也发生了变化&#xff0c;发现是 DHCP 的问题&#xff0c;这里记录一下。 DHCP ​ DHCP&#xff08;Dynamic Host C…
阅读更多...
股指期货合约的命名规则是怎样的？

股指期货合约的命名规则是怎样的？

股指期货合约的命名规则其实很简单&#xff0c;主要由两部分组成&#xff1a;合约代码和到期月份。 股指期货合约4个字母数字背后的秘密 股指期货合约一般来说都是由字母和数字来组合的&#xff0c;包含了品种代码和到期的时间&#xff0c;下面我们具体来看看。 咱们以“IF23…
阅读更多...
OSPF 协议详解：从概念原理到配置实践的全网互通实现

OSPF 协议详解：从概念原理到配置实践的全网互通实现

什么是OSPF OSPF&#xff08;开放最短路径优先&#xff09;是由IETF开发的基于链路状态的自治系统内部路由协议&#xff0c;用来代替存在一些问题的RIP协议。与距离矢量协议不同&#xff0c;链路状态路由协议关心网络中链路活接口的状态&#xff08;包括UP、DOWN、IP地址、掩码…
阅读更多...
蓝桥杯 之 数论

蓝桥杯 之 数论

文章目录 习题质数找素数 数论&#xff0c;就是一些数学问题&#xff0c;蓝桥杯十分喜欢考察&#xff0c;常见的数论的问题有&#xff1a;取模&#xff0c;同余&#xff0c;大整数分解&#xff0c;素数&#xff0c;质因数&#xff0c;最大公约数&#xff0c;最小公倍数等等 素…
阅读更多...
Beans模块之工厂模块注解模块@Qualifier

Beans模块之工厂模块注解模块@Qualifier

博主介绍&#xff1a;✌全网粉丝5W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…
阅读更多...
C# HTTP 文件上传、下载服务器

C# HTTP 文件上传、下载服务器

程序需要管理员权限&#xff0c;vs需要管理员打开 首次运行需要执行以下命令注册URL&#xff08;管理员命令行&#xff09; netsh advfirewall firewall add rule name"FileShare" dirin actionallow protocolTCP localport8000 ipconfig | findstr "IPv4&quo…
阅读更多...
FPGA中串行执行方式之计数器控制

FPGA中串行执行方式之计数器控制

FPGA中串行执行方式之计数器控制 使用计数器控制的方式实现状态机是一种简单且直观的方法。它通过计数器的值来控制状态的变化，从而实现顺序逻辑。计数器的方式特别适合状态较少且状态转移是固定的场景。 基本原理 计数器控制的状态机 ​例程1：简单的顺序状态机 以下是一个…
阅读更多...
纯vue手写流程组件

纯vue手写流程组件

前言 网上有很多的vue的流程组件&#xff0c;但是本人不喜欢很多冗余的代码&#xff0c;喜欢动手敲代码&#xff1b;刚开始写的时候&#xff0c;确实没法下笔&#xff0c;最后一层一层剥离&#xff0c;总算实现了&#xff1b;大家可以参考我写的代码&#xff0c;可以拿过去定制…
阅读更多...
数字化转型驱动卫生用品安全革新

数字化转型驱动卫生用品安全革新

当315晚会上晃动的暗访镜头揭露卫生巾生产车间里漂浮的异物、纸尿裤原料仓中霉变的碎屑时&#xff0c;这一触目惊心的场景无情地撕开了“贴身安全”的遮羞布&#xff0c;暴露的不仅是部分企业的道德缺失&#xff0c;更凸显了当前检测与监管体系的漏洞&#xff0c;为整个行业敲响…
阅读更多...
【JavaWeb学习Day27】

【JavaWeb学习Day27】

Tlias前端 员工管理 条件分页查询&#xff1a; 页面布局 搜索栏&#xff1a; <!-- 搜索栏 --><div class"container"><el-form :inline"true" :model"searchEmp" class"demo-form-inline"><el-form-item label…
阅读更多...
Python进阶教程丨lambda函数

Python进阶教程丨lambda函数

1. lambda函数是什么&#xff1f; 在 Python 里&#xff0c;lambda 函数是一种特殊类型的函数&#xff0c;也被叫做匿名函数。匿名”意味着它不需要像常规函数那样使用 def 来进行命名。lambda lambda 函数本质上是简洁的临时函数 &#xff0c;它适用于只需要简单逻辑的场景&a…
阅读更多...
苹果HFS+56TB存储MOV文件出错的恢复方法

苹果HFS+56TB存储MOV文件出错的恢复方法

HFS文件系统是Apple电脑中默认的最常见的文件系统。HFS来源于UNIX&#xff0c;优势就是稳定性&#xff0c;另外HFS是支持日志功能的&#xff0c;所以很多存储设备也采用了HFS文件系统。再稳定的文件系统也有“马失前蹄”的时候&#xff0c;下面就来聊下HFS出现文件出错、丢失时…
阅读更多...
电源电路篇

电源电路篇

电源电路篇 一、LDO-Low Dropout Regulator(低压差线性稳压器)1.1 AMS1117-3.3V芯片 二、DCDC-Direct Current to Direct Current(开关稳压器)2.1 降压(Buck)电路2.1.1 TPS5450-5V芯片 一、LDO-Low Dropout Regulator(低压差线性稳压器) LDO是一种线性稳压器&#xff0c;用于提…
阅读更多...
java项目之在线购物系统（源码+文档）

java项目之在线购物系统（源码+文档）

项目简介 在线购物系统实现了以下功能&#xff1a; 使用在线购物系统的用户分管理员和用户两个角色的权限子模块。 管理员所能使用的功能主要有&#xff1a;主页、个人中心、用户管理、商品分类管理、商品信息管理、系统管理、订单管理等。 用户可以实现主页、个人中心、我的…
阅读更多...
go语言中空结构体

go语言中空结构体

空结构体(struct{}) 普通理解 在结构体中&#xff0c;可以包裹一系列与对象相关的属性&#xff0c;但若该对象没有属性呢&#xff1f;那它就是一个空结构体。 空结构体&#xff0c;和正常的结构体一样&#xff0c;可以接收方法函数。 type Lamp struct{}func (l Lamp) On()…
阅读更多...
Unity实现连连看连线效果

Unity实现连连看连线效果

1.一个比较简单的向量计算&#xff0c;用的LineRenderer实现&#xff1b; 已知起始A点和终点C点&#xff0c;求B点&#xff1b; 先计算A点到C点的向量取归一化当做方向&#xff0c;再给定一个“模长”&#xff08;B点到A点的模长&#xff09;乘以该方向&#xff0c;最后加上L…
阅读更多...
【MySQL】触发器与存储引擎

【MySQL】触发器与存储引擎

目录 触发器基本概念触发器操作创建触发器NEW 与 OLD查看触发器删除触发器 注意事项 存储引擎基本概念基本操作查询当前数据库支持的存储引擎查看当前的默认存储引擎查看某个表用的存储引擎创建表时指定存储引擎修改表的存储引擎 触发器 基本概念 概述&#xff1a; 触发器&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023