javascript_dom

合集下载

JS操作DOM构架中的各种距离

JS操作DOM构架中的各种距离在JavaScript操作DOM中，我们经常需要计算和获取元素之间的距离，这可以让我们更好地控制页面布局和交互效果。

下面是一些常见的DOM距离相关的计算和方法。

1.获取元素的位置和尺寸：- `getBoundingClientRect(`方法可以获取元素相对于视口的位置和尺寸信息，返回一个DOMRect对象，包含top、left、right、bottom、width和height属性。

- `offsetTop`、`offsetLeft`、`offsetWidth`和`offsetHeight`属性可以获取元素相对于offsetParent元素的位置和尺寸信息。

2.计算元素之间的距离：- 水平距离：使用元素的`offsetLeft`属性相减即可计算两个元素的水平距离。

- 垂直距离：使用元素的`offsetTop`属性相减即可计算两个元素的垂直距离。

3.计算元素到页面边界的距离：- 元素相对于视口左边界的距离：使用元素的`getBoundingClientRect(`方法获取元素的`left`属性。

- 元素相对于文档左边界的距离：使用元素的`offsetLeft`属性加上其所有offsetParent元素的`offsetLeft`属性之和。

- 元素相对于视口上边界的距离：使用元素的`getBoundingClientRect(`方法获取元素的`top`属性。

- 元素相对于文档上边界的距离：使用元素的`offsetTop`属性加上其所有offsetParent元素的`offsetTop`属性之和。

4.计算元素之间的相对距离：-相对于文档左边界的距离：使用第3点中的方法计算两个元素相对于文档左边界的距离差值。

-相对于文档上边界的距离：使用第3点中的方法计算两个元素相对于文档上边界的距离差值。

5.判断元素是否可见：- 使用元素的`offsetParent`属性判断元素是否在文档中可见，如果`offsetParent`为null，则表示元素在文档中不可见。

JS操作DOM元素属性和方法（转）

JS操作DOM元素属性和⽅法（转）Dom元素基本操作⽅法API，先记录下，⽅便以后使⽤。

W3C DOM和JavaScript很容易混淆不清。

DOM是⾯向HTML和XML⽂档的API，为⽂档提供了结构化表⽰，并定义了如何通过脚本来访问⽂档结构。

JavaScript则是⽤于访问和处理DOM的语⾔。

如果没有DOM，JavaScript根本没有Web页⾯和构成页⾯元素的概念。

⽂档中的每个元素都是DOM的⼀部分，这就使得JavaScript可以访问元素的属性和⽅法。

DOM独⽴于具体的编程语⾔，通常通过JavaScript访问DOM，不过并不严格要求这样。

可以使⽤任何脚本语⾔来访问DOM，这要归功于其⼀致的API。

表3-1列出了DOM元素的⼀些有⽤的属性，表3-2列出了⼀些有⽤的⽅法。

表3-1　⽤于处理XML⽂档的DOM元素属性属性名描述childNodes 返回当前元素所有⼦元素的数组firstChild 返回当前元素的第⼀个下级⼦元素lastChild 返回当前元素的最后⼀个⼦元素nextSibling 返回紧跟在当前元素后⾯的元素nodeValue 指定表⽰元素值的读/写属性parentNode 返回元素的⽗节点previousSibling 返回紧邻当前元素之前的元素表3-2　⽤于遍历XML⽂档的DOM元素⽅法⽅法名描述getElementById(id) (document) 获取有指定惟⼀ID属性值⽂档中的元素getElementsByTagName(name) 返回当前元素中有指定标记名的⼦元素的数组hasChildNodes() 返回⼀个布尔值，指⽰元素是否有⼦元素getAttribute(name) 返回元素的属性值，属性由name指定有了W3C DOM，就能编写简单的跨浏览器脚本，从⽽充分利⽤XML的强⼤功能和灵活性，将XML作为浏览器和服务器之间的通信介质。

从下⾯的例⼦可以看到，使⽤遵循W3C DOM的JavaScript来读取XML⽂档是何等简单。

js获取dom的方法

js获取dom的方法JavaScript有多种方法可以获取DOM元素，下面列举了一些常用的方法：1. getElementById：根据元素的ID属性获取DOM元素。

例如：var element = document.getElementById("myElement");3. getElementsByClassName：根据元素的类名获取DOM元素。

例如：var elements = document.getElementsByClassName("myClass");4. querySelector：使用CSS选择器获取DOM元素。

例如：var element = document.querySelector("#myElement");5. querySelectorAll：使用CSS选择器获取匹配的所有DOM元素。

例如：var elements = document.querySelectorAll(".myClass");6. parentElement：获取指定DOM元素的父元素。

例如：var parent = element.parentElement;7. children：获取指定DOM元素的所有子元素。

例如：varchildren = parent.children;8. nextElementSibling：获取指定DOM元素的下一个兄弟元素。

例如：var nextSibling = element.nextElementSibling;9. previousElementSibling：获取指定DOM元素的上一个兄弟元素。

例如：var previousSibling = element.previousElementSibling;10. firstElementChild：获取指定DOM元素的第一个子元素。

javaScript-DOM编程艺术

数组就是javaScript的内建对象。当我们用new 关键字去初始化一个数组时，其实是在创建一个Array对象的新实例。 Date对象可以用来存储和检索与一个特定的日期和时间有关的信息。在创建Data对象的新实例时，javaScript解释器将自动地使用当前的日期和时间对它进行初始化。 Var current_date = new Date(); Date()对象提供了getDay()、getHours()、getMonth()等一系列方法。
数值，甚至可以把多种数据类型混在一起存入一个数组。数组元素还可以是变量，例如： Var name=”john”; Beatles[0] = name ; 数组的元素还可以是一个数组的元素。数组的元素还可以包含其他的数组。 6.关联数组我们可以通过在填充数组时为每个新元素明确的给出下标的方式来改变数组的默认的数值下标。在为新元素给出下标时，不必局限于整数数字。数组下标可以是字符串。例如： Var lennon = Array(); Lennon[“name”]=”john”; Lennon[“year”]=1940 ; 这个就称为是关联数组（associative array）。从某种意义上讲，完全可以把所有的数组看作是关联数组。尽管数值数组的下标是有系统自动创建的一些数字，但每个下标仍关联着一个特定的值。数值数组完全可以被当作关联数组的一种特例来对待。用关联数组代替数值数组的做法意味着，我们可以通过各个元素的名字而不是一个下标的数值来引用它们，这个可以大大的提高脚本的可读性。五、操作 1.算数操作符：（和java的用法基本是相同的（略））加号是个比较特殊的操作符，它既可以用于数值，也可以用于字符串。把多个字符串首尾相连在一起的操作叫做拼接（concatenation）。这种拼接也可以通过变量来完成。我们甚至可以把数值和字符串拼接在一起，因为javaScript 是一种弱类型语言，所以这种操作是被允许的。 2.条件语句和java的用法基本相同（略） 3.比较操作符和java的用法基本相同（略） 4.逻辑操作符和java的用法基本相同（略）

Pythonjavascript操作DOM

Pythonjavascript操作DOM⽂档对象模型（Document Object Model，DOM）是⼀种⽤于HTML和XML⽂档的编程接⼝。

它给⽂档提供了⼀种结构化的表⽰⽅法，可以改变⽂档的内容和呈现⽅式。

我们最为关⼼的是，DOM把⽹页和脚本以及其他的编程语⾔联系了起来。

DOM属于浏览器，⽽不是JavaScript语⾔规范⾥的规定的核⼼内容。

这⾥我们主要是讲⽤javascript操作DOM。

1. 查找元素1.1 直接查找document.getElementById 根据ID获取⼀个标签document.getElementsByName 根据name属性获取标签集合document.getElementsByClassName 根据class属性获取标签集合document.getElementsByTagName 根据标签名获取标签集合1.2 间接查找parentNode // ⽗节点childNodes // 所有⼦节点firstChild // 第⼀个⼦节点lastChild // 最后⼀个⼦节点nextSibling // 下⼀个兄弟节点previousSibling // 上⼀个兄弟节点parentElement // ⽗节点标签元素children // 所有⼦标签firstElementChild // 第⼀个⼦标签元素lastElementChild // 最后⼀个⼦标签元素nextElementtSibling // 下⼀个兄弟标签元素previousElementSibling // 上⼀个兄弟标签元素2. 操作2.1 内容innerText ⽂本outerTextinnerHTML HTML内容innerHTMLvalue 值input value获取当前标签中的值select 获取选中的value值（selectedIndex)textarea value获取当前标签中的值<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html;charset=utf8"><title>JS3</title></head><body><div id="div1"><p id="p1">我是第⼀个标签</p><p id="p2">我是第<b>⼆</b>个标签</p><input id="i1" type="text" value="我是i1"/><select id="i2" name="city" size="2" multiple="multiple"><option value="1">北京</option><option value="2">上海</option><option value="3">南京</option><option value="4" selected="selected">邯郸</option></select><textarea name="linearea" id="i3">默认数据</textarea></div><script type="text/javascript">//操作内容document.getElementById("p1").innerText;document.getElementById("p1").textContent;document.getElementById("p1").textContent="我是p1，我被改了！"document.getElementById("p2").textContent;document.getElementById("p2").innerHTML;document.getElementById("i1").value;document.getElementById("i2").value;document.getElementById("i3").value;</script></body></html>2.2 属性attributes // 获取所有标签属性setAttribute(key,value) // 设置标签属性getAttribute(key) // 获取指定标签属性/*var atr = document.createAttribute("class");atr.nodeValue="democlass";document.getElementById('n1').setAttributeNode(atr);*/⽰例：<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html;charset=utf8"><title>⽰例</title></head><body><input type="button" value="全选" onclick="CheckAll();"/><input type="button" value="取消" onclick="CancelAll();"/><input type="button" value="反选" onclick="ReverseCheck();"/><table border="1" ><thead></thead><tbody id="tb"><tr><td><input type="checkbox" /></td><td>111</td><td>222</td></tr><tr><td><input type="checkbox" /></td><td>111</td><td>222</td></tr><tr><td><input type="checkbox" /></td><td>111</td><td>222</td></tr><tr><td><input type="checkbox" /></td><td>111</td><td>222</td></tr></tbody></table><script>function CheckAll(ths){var tb = document.getElementById('tb');var trs = tb.childNodes;for(var i =0; i<trs.length; i++){var current_tr = trs[i];if(current_tr.nodeType==1){var inp = current_tr.firstElementChild.getElementsByTagName('input')[0]; inp.checked = true;}}}function CancelAll(ths){var tb = document.getElementById('tb');var trs = tb.childNodes;for(var i =0; i<trs.length; i++){var current_tr = trs[i];if(current_tr.nodeType==1){var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];inp.checked = false;}}}function ReverseCheck(ths){var tb = document.getElementById('tb');var trs = tb.childNodes;for(var i =0; i<trs.length; i++){var current_tr = trs[i];if(current_tr.nodeType==1){var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];if(inp.checked){inp.checked = false;}else{inp.checked = true;}}}}</script></body></html>2.3 class操作className // 获取所有类名classList.remove(cls) // 删除指定类classList.add(cls) // 添加类2.4 标签操作a.创建标签// ⽅式⼀var tag = document.createElement('a')tag.innerText = "qianyuliang"tag.className = "q1"tag.href = "/qianyuliang"// ⽅式⼆var tag = "<a class='q1' href='/qianyuliang'>qianyuliang</a>"b.操作标签// ⽅式⼀var obj = "<input type='text' />";xxx.insertAdjacentHTML("beforeEnd",obj);xxx.insertAdjacentElement('afterBegin',document.createElement('p'))//注意：第⼀个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'// ⽅式⼆var tag = document.createElement('a')xxx.appendChild(tag)xxx.insertBefore(tag,xxx[1])2.5 样式操作var obj = document.getElementById('i1')obj.style.fontSize = "32px";obj.style.backgroundColor = "red";<input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输⼊关键字" style="color: gray;" /> <script>function Focus(ths){ths.style.color = "black";if(ths.value == '请输⼊关键字' || ths.value.trim() == ""){ths.value = "";}}function Blur(ths){if(ths.value.trim() == ""){ths.value = '请输⼊关键字';ths.style.color = 'gray';}else{ths.style.color = "black";}}</script>2.6 位置操作总⽂档⾼度document.documentElement.offsetHeight当前⽂档占屏幕⾼度document.documentElement.clientHeight⾃⾝⾼度tag.offsetHeight距离上级定位⾼度tag.offsetTop⽗定位标签tag.offsetParent滚动⾼度tag.scrollTop/*clientHeight -> 可见区域：height + paddingclientTop -> border⾼度offsetHeight -> 可见区域：height + padding + borderoffsetTop -> 上级定位标签的⾼度scrollHeight -> 全⽂⾼：height + paddingscrollTop -> 滚动⾼度特别的：document.documentElement代指⽂档根节点*/<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html;charset=utf8"><title>⽰例</title></head><body style="margin:0;"><div style="height:900px;"></div><div style="padding: 10px;"><div id="i1" style="height:190px;padding:2px;border:1px solid red;margin:8px;"> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p></div></div><script>var i1 = document.getElementById('i1');console.log(i1.clientHeight); // 可见区域：height + paddingconsole.log(i1.clientTop); // border⾼度console.log('=====');console.log(i1.offsetHeight); // 可见区域：height + padding + borderconsole.log(i1.offsetTop); // 上级定位标签的⾼度console.log('=====');console.log(i1.scrollHeight); //全⽂⾼：height + padding console.log(i1.scrollTop); // 滚动⾼度console.log('=====');</script></body></html><!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title></head><style>body{margin: 0px;}img {border: 0;}ul{padding: 0;margin: 0;list-style: none;}.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}.wrap{width: 980px;margin: 0 auto;}.pg-header{background-color: #303a40;-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);-moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);box-shadow: 0 2px 5px rgba(0,0,0,.2);}.pg-header .logo{float: left;padding:5px 10px 5px 0px;}.pg-header .logo img{vertical-align: middle;width: 110px;height: 40px;}.pg-header .nav{line-height: 50px;}.pg-header .nav ul li{float: left;}.pg-header .nav ul li a{display: block;color: #ccc;padding: 0 20px;text-decoration: none;font-size: 14px;}.pg-header .nav ul li a:hover{color: #fff;background-color: #425a66;}.pg-body{}.pg-body .catalog{position: absolute;top:60px;width: 200px;background-color: #fafafa;bottom: 0px;}.pg-body .catalog.fixed{position: fixed;top:10px;}.pg-body .catalog .catalog-item.active{color: #fff;background-color: #425a66;}.pg-body .content{position: absolute;top:60px;width: 700px;margin-left: 210px;background-color: #fafafa;overflow: auto;}.pg-body .content .section{height: 500px;}</style><body onscroll="ScrollEvent();"><div class="pg-header"><div class="wrap clearfix"><div class="logo"><a href="#"><img src="/revs/images/common/logo_7012c4a4.pn"> </a></div><div class="nav"><ul><li><a href="#">⾸页</a></li><li><a href="#">功能⼀</a></li><li><a href="#">功能⼆</a></li></ul></div></div></div><div class="pg-body"><div class="wrap"><div class="catalog"><div class="catalog-item" auto-to="function1"><a>第1张</a></div><div class="catalog-item" auto-to="function2"><a>第2张</a></div><div class="catalog-item" auto-to="function3"><a>第3张</a></div></div><div class="content"><div menu="function1" class="section"><h1>第⼀章</h1></div><div menu="function2" class="section"><h1>第⼆章</h1></div><div menu="function3" class="section"><h1>第三章</h1></div></div></div></div><script>function ScrollEvent(){var bodyScrollTop = document.body.scrollTop;if(bodyScrollTop>50){document.getElementsByClassName('catalog')[0].classList.add('fixed');}else{document.getElementsByClassName('catalog')[0].classList.remove('fixed');}}</script></body></html><!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title></head><style>body{margin: 0px;}img {border: 0;}ul{padding: 0;margin: 0;list-style: none;}h1{padding: 0;margin: 0;}.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}.wrap{width: 980px;margin: 0 auto;}.pg-header{background-color: #303a40;-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); box-shadow: 0 2px 5px rgba(0,0,0,.2);}.pg-header .logo{float: left;padding:5px 10px 5px 0px;}.pg-header .logo img{vertical-align: middle;width: 110px;height: 40px;}.pg-header .nav{line-height: 50px;}.pg-header .nav ul li{float: left;}.pg-header .nav ul li a{display: block;color: #ccc;padding: 0 20px;text-decoration: none;font-size: 14px;}.pg-header .nav ul li a:hover{color: #fff;background-color: #425a66;}.pg-body{}.pg-body .catalog{position: absolute;top:60px;width: 200px;background-color: #fafafa;bottom: 0px;}.pg-body .catalog.fixed{position: fixed;top:10px;}.pg-body .catalog .catalog-item.active{color: #fff;background-color: #425a66;}.pg-body .content{position: absolute;top:60px;width: 700px;margin-left: 210px;background-color: #fafafa;overflow: auto;}.pg-body .content .section{height: 500px;border: 1px solid red;}</style><body onscroll="ScrollEvent();"><div class="pg-header"><div class="wrap clearfix"><div class="logo"><a href="#"><img src="/revs/images/common/logo_7012c4a4.pn"> </a></div><div class="nav"><ul><li><a href="#">⾸页</a></li><li><a href="#">功能⼀</a></li><li><a href="#">功能⼆</a></li></ul></div></div></div><div class="pg-body"><div class="wrap"><div class="catalog" id="catalog"><div class="catalog-item" auto-to="function1"><a>第1张</a></div><div class="catalog-item" auto-to="function2"><a>第2张</a></div><div class="catalog-item" auto-to="function3"><a>第3张</a></div></div><div class="content" id="content"><div menu="function1" class="section"><h1>第⼀章</h1></div><div menu="function2" class="section"><h1>第⼆章</h1></div><div menu="function3" class="section"><h1>第三章</h1></div></div></div></div><script>function ScrollEvent(){var bodyScrollTop = document.body.scrollTop;if(bodyScrollTop>50){document.getElementsByClassName('catalog')[0].classList.add('fixed');}else{document.getElementsByClassName('catalog')[0].classList.remove('fixed');}var content = document.getElementById('content');var sections = content.children;for(var i=0;i<sections.length;i++){var current_section = sections[i];// 当前标签距离顶部绝对⾼度var scOffTop = current_section.offsetTop + 60;// 当前标签距离顶部，相对⾼度var offTop = scOffTop - bodyScrollTop;// 当前标签⾼度var height = current_section.scrollHeight;if(offTop<0 && -offTop < height){// 当前标签添加active// 其他移除 activevar menus = document.getElementById('catalog').children; var current_menu = menus[i];current_menu.classList.add('active');for(var j=0;j<menus.length;j++){if(menus[j] == current_menu){}else{menus[j].classList.remove('active');}}break;}}}</script></body></html><!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title></head><style>body{margin: 0px;}img {border: 0;}ul{padding: 0;margin: 0;list-style: none;}h1{padding: 0;margin: 0;}.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}.wrap{width: 980px;margin: 0 auto;}.pg-header{background-color: #303a40;-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);-moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);box-shadow: 0 2px 5px rgba(0,0,0,.2);}.pg-header .logo{float: left;padding:5px 10px 5px 0px;}.pg-header .logo img{vertical-align: middle;width: 110px;height: 40px;}.pg-header .nav{line-height: 50px;}.pg-header .nav ul li{float: left;}.pg-header .nav ul li a{display: block;color: #ccc;padding: 0 20px;text-decoration: none;font-size: 14px;}.pg-header .nav ul li a:hover{color: #fff;background-color: #425a66;}.pg-body{}.pg-body .catalog{position: absolute;top:60px;width: 200px;background-color: #fafafa;bottom: 0px;}.pg-body .catalog.fixed{position: fixed;top:10px;}.pg-body .catalog .catalog-item.active{color: #fff;background-color: #425a66;}.pg-body .content{position: absolute;top:60px;width: 700px;margin-left: 210px;background-color: #fafafa;overflow: auto;}.pg-body .content .section{height: 500px;border: 1px solid red;}</style><body onscroll="ScrollEvent();"><div class="pg-header"><div class="wrap clearfix"><div class="logo"><a href="#"><img src="/revs/images/common/logo_7012c4a4.pn"> </a></div><div class="nav"><ul><li><a href="#">⾸页</a></li><li><a href="#">功能⼀</a></li><li><a href="#">功能⼆</a></li></ul></div></div></div><div class="pg-body"><div class="wrap"><div class="catalog" id="catalog"><div class="catalog-item" auto-to="function1"><a>第1张</a></div><div class="catalog-item" auto-to="function2"><a>第2张</a></div><div class="catalog-item" auto-to="function3"><a>第3张</a></div></div><div class="content" id="content"><div menu="function1" class="section"><h1>第⼀章</h1></div><div menu="function2" class="section"><h1>第⼆章</h1></div><div menu="function3" class="section" style="height: 200px;"><h1>第三章</h1></div></div></div></div><script>function ScrollEvent(){var bodyScrollTop = document.body.scrollTop;if(bodyScrollTop>50){document.getElementsByClassName('catalog')[0].classList.add('fixed');}else{document.getElementsByClassName('catalog')[0].classList.remove('fixed');}var content = document.getElementById('content');var sections = content.children;for(var i=0;i<sections.length;i++){var current_section = sections[i];// 当前标签距离顶部绝对⾼度var scOffTop = current_section.offsetTop + 60;// 当前标签距离顶部，相对⾼度var offTop = scOffTop - bodyScrollTop;// 当前标签⾼度var height = current_section.scrollHeight;if(offTop<0 && -offTop < height){// 当前标签添加active// 其他移除 active// 如果已经到底部，现实第三个菜单// ⽂档⾼度＝滚动⾼度 + 视⼝⾼度var a = document.getElementsByClassName('content')[0].offsetHeight + 60; var b = bodyScrollTop + document.documentElement.clientHeight;console.log(a+60,b);if(a == b){var menus = document.getElementById('catalog').children;var current_menu = document.getElementById('catalog').lastElementChild; current_menu.classList.add('active');for(var j=0;j<menus.length;j++){if(menus[j] == current_menu){}else{menus[j].classList.remove('active');}}}else{var menus = document.getElementById('catalog').children;var current_menu = menus[i];current_menu.classList.add('active');for(var j=0;j<menus.length;j++){if(menus[j] == current_menu){}else{menus[j].classList.remove('active');}}}break;}}}</script></body></html>2.7 提交表单document.geElementById('form').submit()2.8 其他操作console.log 输出框alert 弹出框confirm 确认框// URL和刷新location.href 获取URLlocation.href = "url" 重定向location.reload() 重新加载// 定时器setInterval 多次定时器clearInterval 清除多次定时器setTimeout 单次定时器clearTimeout 清除单次定时器3 事件对于事件需要注意的要点：thisevent事件链以及跳出this标签当前正在操作的标签，event封装了当前事件的内容。

js中获取dom的方法

js中获取dom的方法JS中获取DOM的方法在JavaScript中，DOM（文档对象模型）是一种用于表示和操作HTML和XML文档的API。

通过DOM，我们可以通过JavaScript 代码来访问和操作网页中的元素和内容。

本文将介绍一些常用的方法来获取DOM元素。

1. getElementById()getElementById()方法通过元素的id属性来获取DOM元素。

它返回一个表示该元素的对象，可以通过该对象来操作元素的各种属性和方法。

例如，如果我们有一个id为"myElement"的div元素，可以使用如下代码来获取它：```javascriptvar element = document.getElementById("myElement");```2. getElementsByClassName() getElementsByClassName()方法通过元素的class属性来获取DOM元素。

它返回一个包含所有具有指定类名的元素的集合。

例如，如果我们有一个class为"myClass"的元素，可以使用如下代码来获取它们：```javascriptvar elements = document.getElementsByClassName("myClass");```3. getElementsByT agName()getElementsByTagName()方法通过元素的标签名来获取DOM元素。

它返回一个包含所有具有指定标签名的元素的集合。

例如，如果我们有一些p元素，可以使用如下代码来获取它们：```javascriptvar elements = document.getElementsByTagName("p");```4. querySelector()querySelector()方法通过选择器来获取DOM元素。

Javascript获取元素节点的六种方法（Dom）

Javascript获取元素节点的六种⽅法（Dom）Javascript中，Dom节点常见的只有三种:分别是元素节点，属性节点，⽂本节点。

我们可以⽤nodeType值来判断节点的类型，它们对应的nodeType属性值分别是1，2，3。

⽽获取元素节点，有六种⽅式。

1.getElementById()通过id来选中元素。

使字变成红⾊。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="div1">Javascript</div></body><script>function func() {var oDiv = document.getElementById("div1");oDiv.style.color = "red";}func()</script></html>2.getElementsByTagName()通过标签名来选中元素。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><ul id="list"><li>HTML</li><li>CSS</li><li>Javascript</li><li>jQuery</li><li>Vue.js</li></ul></body><script>function func() {var oUl = document.getElementById("list");var oList = document.getElementsByTagName("li");oList[2].style.color = "red";}func()</script></html>结果：3.getElementsByClassName()通过类名来获取元素。

JavaScript监听一个DOM元素大小变化

JavaScript监听⼀个DOM元素⼤⼩变化1.需求场景开发过程中经常遇到的⼀个问题就是如何监听⼀个 div 的size变化。

⽐如我⽤canvas绘制了⼀个chart，当canvas的size发⽣变化的时候，需要重新绘制⾥⾯的内容，这个时候就需要监听resize 事件做处理。

window上虽然有resize事件监听，但这并不能满⾜我们的需求，因为很多时候，div的size发⽣了变化，实际window.resize 事件并未触发。

对于div的resize事件的监听，实现⽅式有很多，⽐如定时器检查，通过scroll事件等等，本⽂主要介绍通过元素来实现监听。

不过我们可以间接利⽤window的resize事件监听来实现对于某个div的resize事件监听，请看下⾯具体实现。

2. 实现原理动态创建 iframe 标签，追加到容器中，宽⾼继承容器100%；获取 iframe 中的window，通过 contentWindow 属性就能获取到；由于 iframe 的宽⾼继承与⽗节点，当⽗容器宽度发⽣变化，⾃然会触发iframe中的resize 事件；通过 iframeWindow.resize 事件来监听DOM⼤⼩变化，从⽽达到resize事件的⼀个监听；例⼦document.querySelector("#ifarme_id").contentWindow.addEventListener('resize', () => {console.log('size Change！');}, false)3.调⽤<!DOCTYPE html><html><head><meta charset="utf-8"><title>DIV宽⾼监听</title><style type="text/css">#content {overflow: auto;}</style></head><body><div id="content">钟南⼭：⾮洲如果预防得好，天热时疫情会下降另外，会上有外籍⼈⼠提问：假如你现在去⾮洲，⾸先要做的是什么？钟南⼭表⽰：现在要做的是防护，防⽌蔓延是最重要的。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

什么是DOM？通过JavaScript，您可以重构整个HTML文档。

您可以添加、移除、改变或重排页面上的项目。

要改变页面的某个东西，JavaScript就需要对HTML文档中所有元素进行访问的入口。

这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。

在1998年，W3C发布了第一级的DOM规范。

这个规范允许访问和操作HTML页面中的每一个单独的元素。

所有的浏览器都执行了这个标准，因此，DOM的兼容性问题也几乎难觅踪影了。

DOM可被JavaScript用来读取、改变HTML、XHTML以及XML文档。

DOM被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）：Core DOM定义了一套标准的针对任何结构化文档的对象XML DOM定义了一套标准的针对XML文档的对象HTML DOM定义了一套标准的针对HTML文档的对象。

HTML DOM 节点HTML文档中的每个成分都是一个节点。

节点根据DOM，HTML文档中的每个成分都是一个节点。

DOM是这样规定的：∙整个文档是一个文档节点∙每个HTML标签是一个元素节点∙包含在HTML元素中的文本是文本节点∙每一个HTML属性是一个属性节点注释属于注释节点Node 层次节点彼此都有等级关系。

HTML文档中的所有节点组成了一个文档树（或节点树）。

HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。

树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。

文档树（节点数）请看下面这个HTML文档：<html><head><title>DOM Tutorial</title></head><body><h1>DOM Lesson one</h1><p>Hello world!</p></body></html>上面所有的节点彼此间都存在关系。

除文档节点之外的每个节点都有父节点。

举例，<head> 和<body>的父节点是<html>节点，文本节点"Hello world!"的父节点是<p>节点。

大部分元素节点都有子节点。

比方说，<head>节点有一个子节点：<title>节点。

<title>节点也有一个子节点：文本节点"DOM Tutorial"。

当节点分享同一个父节点时，它们就是同辈（同级节点）。

比方说，<h1>和<p>是同辈，因为它们的父节点均是<body>节点。

节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推。

比方说，所有的文本节点都是<html>节点的后代，而第一个文本节点是<head>节点的后代。

节点也可以拥有先辈。

先辈是某个节点的父节点，或者父节点的父节点，以此类推。

比方说，所有的文本节点都可把<html>节点作为先辈节点。

HTML DOM访问节点通过DOM，您可访问HTML文档中的每个节点。

查找并访问节点你可通过若干种方法来查找您希望操作的元素：∙通过使用getElementById() 和getElementsByTagName() 方法∙通过使用一个元素节点的parentNode、firstChild以及lastChild属性getElementById() 和getElementsByTagName()getElementById() 和getElementsByTagName()这两种方法，可查找整个HTML文档中的任何HTML元素。

这两种方法会忽略文档的结构。

假如您希望查找文档中所有的<p>元素，getElementsByTagName()会把它们全部找到，不管<p>元素处于文档中的哪个层次。

同时，getElementById()方法也会返回正确的元素，不论它被隐藏在文档结构中的什么位置。

这两种方法会像您提供任何你所需要的HTML元素，不论它们在文档中所处的位置！getElementById()可通过指定的ID来返回元素：getElementById() 语法document.getElementById("ID");注释：getElementById() 无法工作在XML中。

在XML文档中，您必须通过拥有类型id的属性来进行搜索，而此类型必须在XML DTD中进行声明。

getElementsByTagName() 方法会使用指定的标签名返回所有的元素（作为一个节点列表），这些元素是您在使用此方法时所处的元素的后代。

getElementsByTagName() 可被用于任何的HTML元素：getElementsByTagName() 语法document.getElementsByTagName("标签名称");或者：document.getElementById('ID').getElementsByTagName("标签名称");实例 1下面这个例子会返回文档中所有<p>元素的一个节点列表：document.getElementsByTagName("p");实例 2下面这个例子会返回所有<p>元素的一个节点列表，且这些<p>元素必须是id为"maindiv"的元素的后代：document.getElementById('maindiv').getElementsByTagName("p");节点列表（nodeList）当我们使用节点列表时，通常要把此列表保存在一个变量中，就像这样：var x=document.getElementsByTagName("p");现在，变量x包含着页面中所有<p>元素的一个列表，并且我们可以通过它们的索引号来访问这些<p>元素。

注释：索引号从0开始。

您可以通过使用length属性来循环遍历节点列表：var x=document.getElementsByTagName("p");for (var i=0;i<x.length;i++){// do something with each paragraph}您也可以通过索引号来访问某个具体的元素。

要访问第三个<p>元素，您可以这么写：var y=x[2];parentNode、firstChild以及lastChild这三个属性parentNode、firstChild 以及lastChild 可遵循文档的结构，在文档中进行“短距离的旅行”。

请看下面这个HTML片段：<table><tr><td>John</td><td>Doe</td><td>Alaska</td></tr></table>在上面的HTML代码中，第一个<td>是<tr>元素的首个子元素（firstChild），而最后一个<td>是<tr>元素的最后一个子元素（lastChild）。

此外，<tr>是每个<td>元素的父节点（parentNode）。

对firstChild最普遍的用法是访问某个元素的文本：var x=[a paragraph];var text=x.firstChild.nodeValue;parentNode属性常被用来改变文档的结构。

假设您希望从文档中删除带有id为"maindiv"的节点：var x=document.getElementById("maindiv");x.parentNode.removeChild(x);首先，您需要找到带有指定id的节点，然后移至其父节点并执行removeChild()方法。

根节点有两种特殊的文档属性可用来访问根节点：∙document.documentElement∙document.body第一个属性可返回存在于XML以及HTML文档中的文档根节点。

第二个属性是对HTML页面的特殊扩展，提供了对<body>标签的直接访问。

HTML DOM 节点信息nodeName、nodeValue以及nodeType包含有关于节点的信息。

节点信息每个节点都拥有包含着关于节点某些信息的属性。

这些属性是：∙nodeName（节点名称）∙nodeValue（节点值）∙nodeType（节点类型）nodeNamenodeName属性含有某个节点的名称。

∙元素节点的nodeName是标签名称∙属性节点的nodeName是属性名称∙文本节点的nodeName永远是#text∙文档节点的nodeName永远是#document 注释：nodeName所包含的XML元素的标签名称永远是大写的nodeValue对于文本节点，nodeValue属性包含文本。

对于属性节点，nodeValue属性包含属性值。

nodeValue属性对于文档节点和元素节点是不可用的。

nodeTypenodeType属性可返回节点的类型。

最重要的节点类型是：一个HTML DOM 实例一个HTML DOM的实例下面这个例子向我们展示了当一个用户在文档中点击时，HTML文档的背景颜色如何被改变。

<html><head><script type="text/javascript">function ChangeColor(){document.body.bgColor="yellow"}</script></head><body onclick="ChangeColor()">Click on this document!</body></html>DOM的核心： Node由于DOM是树形结构，所以一个节点被抽象为对象Node，这是DOM的核心对象：Node的种类一共有12种，通过Node.nodeType的取值来确定（为1-12），分为：Js代码1.Node.ELEMENT_NODE (1)2.Node.ATTRIBUTE_NODE (2)3.Node.TEXT_NODE (3) //<![CDATA[ ]]>中括着的纯文本，它没有子节点4.Node.CDATA_SECTION_NODE (4) //子节点一定为TextNode5.Node.ENTITY_REFERENCE_NODE (5)6.Node.ENTITY_NODE (6) //DTD中的实体定义<!ENTITY foo “foo”>，无子节点7.Node.PROCESSING_INSTRUCTION_NODE (7) //PI，无子节点MENT_NODE (8)9.Node.DOCUMENT_NODE (9) //最外层的Root element,包括所有其它节点10.Node.DOCUMENT_TYPE_NODE (10) //DTD，<!DOCTYPE………..>11.Node.DOCUMENT_FRAGMENT_NODE (11)12.Node.NOTA TION_NODE (12) //DTD中的Nation定义❑ Node接口包含的特性/方法节点的属性nodeName 属性将返回一个字符串，其内容是给定节点的名字。