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><!-- 先⽣成⼀个html⽂件，⽂件内容如下:--><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">钟南⼭：⾮洲如果预防得好，天热时疫情会下降另外，会上有外籍⼈⼠提问：假如你现在去⾮洲，⾸先要做的是什么？钟南⼭表⽰：现在要做的是防护，防⽌蔓延是最重要的。
javascript的组成 ecmascript标准
JavaScript主要由三部分组成：ECMAScript标准，DOM（文档对象模型）和BOM（浏览器对象模型）。
ECMAScript标准：ECMAScript是JavaScript的核心，定义了语言的基本语法，数据类型，运算符，控制流，错误处理等。
ECMAScript标准由ECMA国际（欧洲计算机协会）制定和维护。
DOM（文档对象模型）：DOM是JavaScript用来操作和获取HTML和XML文档内容的一种接口。
它将整个文档转换为一个由对象构成的模型，这些对象可以由JavaScript程序来操作。
DOM定义了这些对象应有的属性和方法，以及这些对象之间应有的关系。
BOM（浏览器对象模型）：BOM提供了独立于任何特定文档的对象，这些对象允许开发者控制浏览器窗口，与浏览器交互，以及处理与浏览器相关的任务。
例如，window对象就是BOM的一部分，提供了控制浏览器窗口的方法（如alert()和prompt()）和属性（如location和status）。
总的来说，ECMAScript标准定义了JavaScript的基本语法和功能，DOM提供了操作和获取HTML和XML文档内容的接口，而BOM则提供了与浏览器交互的功能。
详解Javascript中DOM的范围
详解Javascript中DOM的范围前⾔为了让开发⼈员更⽅便地控制页⾯，DOM定义了“范围”(range)接⼝。
通过范围可以选择⽂档中的⼀个区域，⽽不必考虑节点的界限(选择在后台完成，对⽤户是不可见的)。
在常规的DOM操作不能更有效地修改⽂挡时，使⽤范围往往可以达到⽬的。
本⽂将详细介绍DOM范围，下⾯来⼀起看看吧。
创建范围Document类型中定义了createRange()⽅法。
在兼容DOM的浏览器中，这个⽅法属于document对象。
使⽤hasFeature()或者直接检测该⽅法，都可以确定浏览器是否⽀持范围[注意]IE8-浏览器不⽀持var supportsRange = document.implementation.hasFeature("Range", "2.0");var alsoSupportsRange =(typeof document.createRange == "function");如果浏览器⽀持范围，那么就可以使⽤createRange()来创建DOM范围，如下所⽰var range = document.createRange();与节点类似，新创建的范围也直接与创建它的⽂档关联在⼀起，不能⽤于其他⽂档。
创建了范围之后，接下来就可以使⽤它在后台选择⽂档中的特定部分。
⽽创建范围并设置了其位置之后，还可以针对范围的内容执⾏很多种操作，从⽽实现对底层DOM树的更精细的控制每个范围由⼀个Range类型的实例表⽰，这个实例拥有很多属性和⽅法。
下列属性提供了当前范围在⽂档中的位置信息startContainer：包含范围起点的节点(即选区中第⼀个节点的⽗节点)startoffset：范围在startContainer中起点的偏移量。
如果startContainer是⽂本节点、注释节点或CDATA节点，那么startoffset就是范围起点之前跳过的字符数量。
JS操作DOM元素属性和方法
JS操作DOM元素属性和方法JavaScript是一种强大的脚本语言，它可以通过操作DOM（Document Object Model）来改变网页的结构和内容。
在JavaScript中，我们可以使用一些属性和方法来操作DOM元素。
1.获取DOM元素在JavaScript中，我们可以使用getElementById、getElementsByClassName、getElementsByTagName等方法来获取DOM元素。
这些方法返回一个NodeList对象，通过索引来访问其中的元素。
2.修改DOM元素的属性通过JavaScript，我们可以修改DOM元素的属性。
比如，使用setAttribute方法可以设置元素的属性值，使用getAttribute方法可以获取元素的属性值。
3.修改DOM元素的样式JavaScript也可以修改DOM元素的样式。
通过style属性，我们可以修改元素的样式属性，比如颜色、字体大小、背景颜色等。
4.添加和删除DOM元素使用JavaScript，我们可以动态地添加和删除DOM元素。
createElement方法用于创建新的元素节点，而appendChild方法则可以将新的元素节点插入到指定的父元素中。
另外，removeChild方法可以删除指定的子元素。
5.修改DOM元素的内容JavaScript可以通过innerHTML属性来修改DOM元素的内容。
可以直接将HTML代码或文本赋值给innerHTML属性，从而改变元素的显示内容。
6.绑定事件处理程序通过JavaScript，我们可以为DOM元素绑定事件处理程序。
可以通过addEventListener方法来监听元素的事件，比如点击事件、鼠标移动事件等。
当事件触发时，会执行对应的处理函数。
7.访问和修改DOM元素的子节点通过childNodes属性，我们可以访问DOM元素的子节点。
childNodes返回一个数组，包含元素的所有子节点。
JavaScript DOM基本操作(思维导图)
JavaScript DOM基本操作获取节点documentgetElementById语法document.getElementById(元素ID)功能通过元素ID获取节点getElementsByName语法document.getElementsByName(元素name属性)功能通过元素的name属性获取节点getElementsByTagName语法document.getElementsByTagName(元素标签)功能通过元素标签获取节点节点指针firstChild语法父节点.firstChild功能获取元素的首个子节点lastChild语法父节点.IastChild功能获取元素的最后一个子节点childNodes语法父节点childNodes功能获取元素的子节点列表previousSibling语法兄弟节点.previousSibling功能获取已知节点的前一个节点nextSibling语法兄弟节点.nextSibling功能获取已知节点的后一个节点parentNode语法子节点.parentNode功能获取已知节点的父节点节点操作创建节点createElement语法document.createElement(元素标签)功能创建元素节点createAttribute语法documer.createAttribute(元素属性)功能创建属性节点createTextNode语法document.createTextNode(文本内容)功能创建文本节点插入节点appendChild语法appendChild(所添加的新节点)功能向节点的子节点列表的末尾添加新的子节点insertBefore语法insertBefore(所要添加的新节点，已知子节点)功能在已知的子节点前插入一个新的子节点替换节点replaceChild语法replaceChild(要插入的新元素，将被替换的老元素)功能将某个子节点替换为另一个复制节点cloneNode语法需要被复制的节点.cloneNode(true/false)功能创建指定节点的副本参数true复制当前节点及其所有子节点false仅复制当前节点删除节点removeChild语法removeChild(要删除的节点)功能删除指定的节点属性操作获取属性getAttribute语法元素节点.getAttribute(元素属性名)功能获取元素节点中指定属性的属性值设置属性setAttribute语法元素节点.setAttribute(属性名,属性值)功能创建或改变元素节点的属性删除属性removeAttribute语法元素节点.removeAttribute(属性名)功能删除元素中的指定属性文本操作insertData(offset,String)从offset指定的位置插入stringappendData(string)将string插入到文本节点的末尾处deleteDate(offset,count)从offset起删除count个字符replaceData(off,count,string)从off将count个字符用string替代splitData(offset)从offset起将文本节点分成两个节点substring(offset,count)返回由offset起的count个节点。
JS操作DOM元素属性和方法
JS操作DOM元素属性和方法JavaScript是一种强大的编程语言，它可以用来操作HTML文档中的DOM（文档对象模型）元素。
DOM是将HTML文档表示为一个树状结构，每个HTML元素都是DOM树的一个节点，可以通过JavaScript来访问和操作这些节点的属性和方法。
1.获取DOM元素：2.修改DOM属性：通过JavaScript，可以直接修改DOM元素的属性值，例如修改元素的style属性、className属性和innerHTML属性等。
这些属性可以用来改变元素的样式、类名和内容等。
3.创建和添加新的DOM元素：通过JavaScript，可以使用createElement方法来创建一个新的DOM元素，并使用appendChild方法将其添加到指定的父元素中。
这样可以动态地向HTML文档中添加新的元素。
4.删除DOM元素：通过JavaScript，可以使用removeChild方法来删除指定的DOM元素。
这样可以在不刷新整个页面的情况下，动态地删除不需要的DOM元素。
5.修改DOM元素的样式：通过JavaScript，可以直接修改DOM元素的样式属性，例如修改元素的背景颜色、字体大小和边框样式等。
这样可以实现动态改变元素的样式效果。
6.绑定和响应事件：通过JavaScript，可以通过addEventListener方法将事件绑定到DOM元素上，并在事件发生时执行相应的处理函数。
这样可以实现对用户操作的响应，例如点击事件、鼠标移动事件和键盘事件等。
7.查询和修改DOM元素的位置信息：通过JavaScript，可以使用offsetLeft、offsetTop、clientWidth 和clientHeight等属性来查询元素的位置和尺寸信息。
这样可以实现根据元素的位置来进行相应的布局和排列。
8.查询和修改DOM元素的父子关系：通过JavaScript，可以使用parentNode、childNodes和nextSibling等属性来查询和修改DOM元素的父子关系。
js操作dom节点的方法
js操作dom节点的方法JavaScript提供了许多操作DOM节点的方法，以下是一些常用的方法：1. `getElementById(id)`：根据指定的ID获取一个DOM节点。
2. `getElementsByClassName(className)`：根据指定的类名获取一个包含多个DOM节点的NodeList对象。
3. `getElementsByTagName(tagName)`：根据指定的标签名获取一个包含多个DOM节点的NodeList对象。
4. `querySelector(selector)`：根据指定的CSS选择器获取一个DOM节点。
5. `querySelectorAll(selector)`：根据指定的CSS选择器获取一个包含多个DOM节点的NodeList对象。
6. `appendChild(node)`：将指定的节点添加到当前节点的子节点列表末尾。
7. `insertBefore(node, referenceNode)`：在指定参考节点之前插入指定的节点。
8. `removeChild(node)`：从当前节点中删除指定的子节点。
9. `replaceChild(newNode, oldNode)`：将指定旧节点替换为新节点。
10. `setAttribute(name, value)`：设置指定节点的属性值。
11. `removeAttribute(name)`：删除指定节点的属性。
12. `textContent`：获取或设置指定节点的文本内容。
13. `innerHTML`：获取或设置指定节点的HTML内容。
14. `classList`：用于添加、删除、切换和检查元素的类名。
这些方法可以帮助您在JavaScript中操作DOM节点，以实现动态更改网页内容、样式和结构的目的。
JavaScript中的DOM操作和事件处理
JavaScript中的DOM操作和事件处理DOM操作和事件处理是JavaScript编程中非常重要的部分。
DOM （文档对象模型）是指将HTML文档转换成对象模型，通过JavaScript 代码来操作这些对象，实现动态的网页功能。
一、DOM操作1.获取元素：通过getElementById、getElementsByClassName、getElementsByTagName等方法获取页面上的元素。
例如：```var element = document.getElementById("myElement");```2.创建元素：通过createElement方法来创建新的元素，可以指定标签名称，然后可以添加到文档中。
```var newElement = document.createElement("div");```3.修改元素属性：可以使用DOM元素的属性来修改元素的各种属性，如id、class、style等。
```element.className = "new-class";element.style.color = "red";```4.修改元素内容：可以使用innerHTML属性来修改元素的显示内容。
```element.innerHTML = "新的内容";```5.添加子元素：可以使用appendChild方法将一个元素添加为另一个元素的子元素。
```parentElement.appendChild(childElement);```6.删除元素：可以使用removeChild方法将一个元素从文档中移除。
```parentElement.removeChild(childElement);```7.修改元素样式：可以使用style属性来修改元素的各种样式。
```element.style.color = "red";element.style.backgroundColor = "blue";```二、事件处理1.注册事件：使用addEventListener方法来注册事件，指定事件类型和对应的处理函数。
用Javascript DOM实现网页幻灯片动画实例
用Javascript DOM实现网页幻灯片动画实例吴瑕（四川职业技术学院计算机科学系，四川遂宁629000）摘要：在Web应用成为绝对主流的大背景下，友好的动画交互可以给访客带来更好的浏览体验,因此网站前端开发的重要性也越来越凸显。
本文就对网站前端开发的一个经典实例进行介绍：用Javascript DOM脚本在网站主页实现幻灯片动画。
关键词：Javascript DOM；幻灯片动画中图分类号：G642文献标识码：A文章编号：1009-3044(2021)04-0207-02开放科学（资源服务）标识码（OSID）：1引言由于大多数访客都会首先访问网站主页，所以在主页加入一些友好的动画效果让页面更加炫酷，是当前网站前端开发的一种流行趋势。
因此网站前端开发技术也是网站开发人员学习和应用的一个重点技术。
本文就对教学中实现的一个Javas⁃cript DOM主页幻灯片动画进行详细介绍。
2设计与实现2.1布局主页先通过编写HTML完成主页内容，再通过CSS定义布局和颜色。
主页效果如图1所示，当鼠标经过导航条，导航条下面的图片以幻灯片播放效果快速流畅的切换成对应图片，如图2，当鼠标移动到“Live”，图片切换成对应小图。
当鼠标放到“in⁃tro”段落中的链接上时，也会触发同样的幻灯片动画。
HTML 代码如下：<header><imgsrc="images/logo.gif"alt="Jay Skript and the Domsters" /><nav><ul><li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li><li><a href="photos.html">Photos</a></li><li><a href="live.html">Live</a></li><li><a href="contact.html">Contact</a></li></ul></nav></header><article><h1>Welcome</h1><p id="intro">Welcome to theofficial website of Jay Skriptand the Domsters.Here,you can<a href="about.html">learn more about the band</a>…</p></article>因为本文重点介绍JS实现，考虑到篇幅，CSS代码省略。
JavaScript操作DOM元素中的class属性
JavaScript操作DOM元素中的class属性1.内置属性与⾃定义属性在JavaScript中，元素的属性是可读取的，并且可以分为⾃定义属性与内置属性。
内置属性是元素⾃带的⼀些属性，包括 id、class等，⾃定义属性是我们⾃⼰给元素定义的属性，为了⽅便在页⾯中保存与读取数据，两种属性在读取⽅法上有所区别。
2.操作属性属性的读取：①element.属性；②element.getAttribute('属性')；属性的设置：①element.属性 = 属性值；② element.setAttribute('属性'， '属性值')；属性的移除：element.removeAttribute('属性')；内置属性上述⽅法都可以⽤，但要注意class属性的写法，详见后述；⾃定义属性的读取都只能利⽤第②种，移除两种通⽤。
3.class属性的读取读取：①element.className；②element.getAttribute('class' );设置：①element.className = "类名"；②element.setAttribute('class', '类名');具体原理⽬前还不清楚，后述再补充！通过实例发现当利⽤element.setAttribute('className', '类名')进⾏属性值设置时，会发现此操作会在元素中新建⼀个⾃定义属性className，值就是操作中赋的值。
例如：1 <div class = "one"></div>2 <script>3var e = document.querySelector('div');4 console.log(e.className); //输出 one5 console.log(e.class); //输出 undefind6 e.setAttribute('className', 'two');7 console.log(e.className); //输出one8 console.log(e.getAttribute('class')); //输出one9 console.log(e.getAttribute('className')); //输出two10 </script>。
javascriptDOM操作节点的遍历
javascriptDOM操作节点的遍历⼀、通过javascript的遍历可以由⼀个节点来查找它的⼦节点（childNodes）、兄弟节点(nextSibling/previousSibling)和⽗节点(parentNode)。
代码说明：<ul id="myul"><li>1</li><li>2</li><li>3</li><li>4</li></ul>1、获取ul的所有⼦节点——childNodes<script>var ul=document.getElementById('myul');for(var i=0;i<ul.childNodes.length;i++){console.log(ul.childNodes[i]);}</script>2、因为通过1获取了ul的所有的⼦节点，所以就可以直接通过childNodes来直接访问它⾥⾯的⼦节点提醒：1、childNodes最后获得的是⼀个数组对象childNodes[i] 2、这⾥所获得的素有⼦节点也包括空⽩节点，看截图所以，访问第⼀个li： ul.childNodes[1]或者ul.childNodes.item(1)第⼆个li： ul.childNodes[3]或者ul.childNodes.item(3)第三个li： ul.childNodes[5]或者ul.childNodes.item(5)第四个li： ul.childNodes[7]或者ul.childNodes.item(7)3、访问到了第⼀个li，就可以通过第⼀个li节点来访问后⾯⼀个或者前⾯⼀个，那就是nextSibling/previousSibling所以：第⼆个li：ul.childNodes[1].nextSibling.nextSibling(不要忘了之间的空⽩节点);第⼀个li: ul.childNodes[3].previousSibling.previousSibling4、当然我们也可以直接通过firstChild和lastChild来访问ul的第⼀个节点和第⼆个节点5、访问到⼦节点，直接parentNode找到⽗节点⼆、解决空⽩节点的问题1、在js⾥⾯添加⼀个判断<script>var ul=document.getElementById('myul');for(var i=0;i<ul.childNodes.length;i++){if(ul.childNodes[i].nodeType==1){console.log(ul.childNodes[i]);}}</script>这样控制台打印出的结果就是4个li⼦元素2、还是上⾯的例⼦获得所有li: ul.children获得⼀个数组第⼀个li：ul.children[0]或者ul.children.item(0)或者ul.firstElementChild;兄弟li：nextElementSibling/previousElementSibling最后⼀个li：lastElementChild。
js中获取dom节点的方法
JavaScript 中获取 DOM 节点的方法在 JavaScript 中，获取 DOM 节点是操作 DOM 的基础，本文介绍了几种常用的获取 DOM 节点的方法。
下面是本店铺为大家精心编写的5篇《JavaScript 中获取 DOM 节点的方法》，供大家借鉴与参考，希望对大家有所帮助。
《JavaScript 中获取 DOM 节点的方法》篇11. 使用 DOM API 获取节点DOM API 提供了多种获取节点的方法，包括:- document.getElementById(id):通过元素的 id 获取元素节点。
- document.getElementsByClassName(className):通过元素的类名获取元素节点。
- document.querySelector(selector):通过 CSS 选择器获取元素节点。
- document.querySelectorAll(selector):通过 CSS 选择器获取所有匹配的元素节点。
例如:```const idElement = document.getElementById("my-element"); const classElement =document.getElementsByClassName("my-class")[0];const selectorElement =document.querySelector(".my-selector");const selectorElements =document.querySelectorAll(".my-selector");```2. 使用 jQuery 获取节点jQuery 是一个流行的 JavaScript 库，它提供了一些方便的方法来获取 DOM 节点，包括:- $(id):通过元素的 id 获取元素节点。
javascript——DOM之元素的创建删除实例
javascript——DOM之元素的创建删除实例创建元素：document.createElement(标签名称);删除元素：⽗级.removeChild(要删除的元素);追加⼦元素：⽗级.appendChild(要添加的元素)在指定元素前⾯插⼊⼀个新元素：⽗级.insertBefore(新的元素，被插⼊的元素)HTML部分：<body><input type="text" id="text1"><input type="button" id="btn" value="留⾔"><ul id="ul1"></ul></body>JS部分：window.onload = function(){var oText = document.getElementById('text1');var oBtn = document.getElementById('btn');var oUl = document.getElementById('ul1');oBtn.onclick = function(){// 通过document.createElement创建livar oLi = document.createElement('li');// 然后把⽂本框的value值赋给lioLi.innerHTML = oText.value;//通过document.creatElement创建avar oA = document.createElement('a');//给a添加href和innerHMTLEoA.href = 'javascript:;';oA.innerHTML = '删除';//给a链接添加单击事件oA.onclick = function() {// ⽗级.removeChild(要删除的元素); 删除元素oUl.removeChild(this.parentNode);}//接着通过appendChild添加⼦元素⽗级.appendChild(要添加的元素)oLi.appendChild(oA);// 接着清空⽂本框的value值oText.value = '';// ⽗级.insertBefore(新的元素，被插⼊的元素) ⽅法在指定元素前⾯插⼊⼀个新元素// oUl.insertBefore( oLi ,oUl.children[0] );/*兼容处理在ie下如果第⼆个参数的节点不存在，会报错在其他标准浏览器下如果第⼆个参数的节点不存在，则会以appendChild的形式进⾏添加*/if ( oUl.children[0] ) {oUl.insertBefore( oLi, oUl.children[0] );} else {oUl.appendChild( oLi );}};};。
- 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 属性将返回一个字符串，其内容是给定节点的名字。