JS-DOM-节点-获取元素-文档结构-元素的属性
1 回顾
1.1 内置构造函数 Function
Function 的实例的属性和方法：lengthcall()applay()bind()
1.2 BOM
1. windownamelengthinnerWidthinnerHeightalert()confirm()prompt()open()close()print()scrollTo()scrollBy()setInterval()clearInterval()setTimeout()clearTimeout()2. historylengthback()forward()go()3.locationhrefprotocolhostnameporthostpathnamesearchhashreload()assign()replace()4. navigatoruserAgent5. screenwidthheihgt
2 DOM 介绍
**MDN 文档对象模型手册：**/zh-CN/docs/Web/API/Document_Object_Model
1）DOM 英文全称“Document Object Model”，译为“文档对象模型”。
2）DOM 是一个与平台和编程语言无关的接口，通过这个接口程序和脚本可以动态的访问和修改文档的内容、结构和样式。
3 Node 节点
3.1 五大节点类型
document 文档节点 nodeType:9element元素节点 nodeType:1 nodeName 获取元素的标签名attribute 属性节点 nodeType:2text 文本节点 nodeType:3comment 注释节点 nodeType:8
3.2 节点的属性
nodeName获取节点的名字nodeValue获取节点的值nodeType获取节点的类型，用数字表示
// document节点console.log(document); //#docunmentconsole.log('节点名字：',document.nodeName); //#docunmentconsole.log('节点值：',document.nodeValue); //nullconsole.log('节点类型：',document.nodeType); //9// element元素节点var ele = document.getElementById('box')console.log(ele); //<div></div>console.log('节点名字：',ele.nodeName); //DIVconsole.log('节点值：',ele.nodeValue); //nullconsole.log('节点类型：',ele.nodeType); //1
4 获取元素
① 通过 ID 名
document.getElementById('ID名');
总结：
方法返回一个元素对象。如果没有满足条件的元素返回 null。
// 根据ID名获取元素var boxEle = document.getElementById('box');console.log(boxEle);
② 通过标签名
// 从文档中获取document.getElementsByTagName('标签名');// 从元素的后代中获取element.getElementsByTagName('标签名');
总结：
方法返回一个 HTMLCollection 类型的对象，这是一个伪数组对象，里面的成员是元素对象。如果没有满足条件的元素，返回空的集合。
③ 通过类名（了解，IE8 + 支持）
// 从文档中获取document.getElementByClassName('类名');// 从元素的后代中获取element.getElementsByClassName('类名');
总结：
方法返回一个 HTMLCollection 类型的对象，这是一个伪数组对象，里面的成员是元素对象。如果没有满足条件的元素，返回空的集合。
// 从文档中获取所有类名是item的元素//var pItems = document.getElementsByClassName('item');// 从box元素的后代中获取类名是item的元素var boxEle = document.getElementById('box');var pItems = boxEle.getElementsByClassName('item');console.log(pItems);console.log(pItems[0]);//pItems[1].style.border = '2px solid red'// 给每个p元素进行操作，遍历集合for (var i = 0; i < pItems.length; i ++) {pItems[i].style.border = '2px solid red';}
④ 通过 name 属性值 （了解）
// 从文档中获取document.getElementsByName('name属性的值');
总结：
方法返回一个 NodeList 类型的对象，与 HTMLCollection 相似，也是伪数组，里面的元素是元素对象。如果没有满足条件的元素，返回空集合。
// 从文档中获取所有类名是name的元素var pItems = document.getElementsByName('fangfang');console.log(pItems);console.log(pItems[0]);//pItems[1].style.border = '2px solid red'// 给每个p元素进行操作，遍历集合for (var i = 0; i < pItems.length; i ++) {pItems[i].style.border = '2px solid red';}
⑤ 使用选择器获取元素 (推荐)
// 从文档中获取document.querySelector('选择器')；document.querySelectorAll('选择器');// 从元素的后代中获取element.querySelector('选择器');element.querySelectorAll('选择器');
总结：
querySelector() 方法返回一个元素对象，如果满足条件的元素有多个只取第一个，如果没有满足条件的元素返回 null。querySeleorAll() 方法返回 NodeList 集合，如果没有满足条件的元素返回空集合。
var ele = document.querySelector('#box');// var ele = document.querySelector('#box .item');// var ele = document.querySelector('[name="fangfang"]');console.log(ele);// 获取元素的集合var eles = document.querySelectorAll('#box p');var eles = document.querySelectorAll('#box');console.log(eles);var es = ele.querySelectorAll('p')console.log(els);
⑥ 获取所有的元素
document.all
总结：获取文档中所有的元素，是个 HTMLCollection 类型的集合
**注意：**使用 document.all 可以判断IE还是非IE，这是一个语法糖。
if (document.all) {document.write('我是IE浏览器！');} else {document.write('我不是IE');}
5 文档结构（元素关系）
5.1 节点树
childNodes获取所有子节点的集合，是个 NodeList 类型的对象firstChild获取第一个子节点lastChild获取最后一个子节点previousSibling获取紧邻在前面的兄弟节点nextSibling获取紧邻在后面的兄弟节点parentNode获取父节点 html与父元素不一样
// 获取第二个div元素var boxEle = document.querySelector('.box:nth-of-type(2)')console.log(boxEle)// 获取子节点console.log('boxEle的所有子节点：', boxEle.childNodes);console.log('boxEle的第一个子节点：', boxEle.firstChild);console.log('boxEle的最后一个子节点：', boxEle.lastChild);console.log('boxEle的第二个子节点：', boxEle.childNodes[1]);// 获取兄弟节点console.log('前面的一个兄弟节点：', boxEle.previousSibling.previousSibling);console.log('后面的一个兄弟节点：', boxEle.nextSibling);// 获取父节点console.log('父节点：', boxEle.parentNode);console.log('父节点的父节点：', boxEle.parentNode.parentNode);
5.2 元素树
children获取所有子元素的集合，是个 HTMLCollection 类型的数据firstElementChild获取第一个子元素lastElementChild获取最后一个子元素previousElementSibling获取紧邻在前面的兄弟元素nextElementSibling获取紧邻在后面的兄弟元素parentElement获取父元素
// 获取第二个div元素var boxEle = document.querySelector('.box:nth-of-type(2)');console.log(boxEle);// 获取子元素console.log('boxEle所有的子元素：', boxEle.children);console.log('boxEle的第一个子元素：', boxEle.firstElementChild);console.log('boxEle的最后一个子元素：', boxEle.lastElementChild);console.log('boxEle的第二个子元素：', boxEle.children[1]);console.log('前面的兄弟元素：', boxEle.previousElementSibling);console.log('后面的兄弟元素：', boxEle.nextElementSibling);console.log('父元素：', boxEle.parentElement);
6 元素的属性操作
6.1 读写内置属性
元素.属性名;
// 获取到img元素var imgEle = document.querySelector('#myImg');// 获取元素中某个属性的值console.log(imgEle.alt);console.log(imgEle.title);console.log(imgEle.width);// 5s之后，换一张图片setTimeout(function(){imgEle.src = 'images/小乐.jpg';},5000);// 获取按钮元素var btn = document.querySelector('#btn')// 给按钮元素监听事件btn.onclick = function() {imgEle.width += 20; //（宽度大20px)}
6.2 读写自定义属性
元素.getAttribute('属性名') 读取属性的值，如果不存在概述返回 nulll元素.setAttribute('属性名', '值') 设置属性的值，如果属性不存在会添加该属性
注意：
getAttribute() 和 setAttribute() 可以操作写在标签上的所有属性，不论内置的还是自定义的。如果要操作的属性是内置，使用
.属性名的方式；如果要操作的属性是自定义的再使用 getAttribute() 和 setAttribute()。
// 获取到 img 元素var imgEle = document.querySelector('#myImg');// 获取自定义属性的值console.log('自定义属性 loadpic 的值：', imgEle.loadpic);console.log('自定义属性 loadpic 的值：', imgEle.getAttribute('loadpic'));// 设置自定义属性的值：// imgEle.loadpic = '大悲不只有双下巴';imgEle.setAttribute('loadpic', '大悲不只有双下巴');// getAttribute() 和 setAttribute() 不仅仅可以操作自定义属性console.log(imgEle.getAttribute('alt'), imgEle.alt);console.log(imgEle.getAttribute('height'), imgEle.height);console.log(imgEle.getAttribute('width'), imgEle.width);console.log(imgEle.getAttribute('src'), imgEle.src);
6.3data-*形式的自定义属性
HTML5标准建议标签中的自定义属性都是data-message、data-group-name这样的形式，此种形式的自定义属性，DOM 提供了快捷的操作方式：
元素.dataset.属性名; // 可读可写imgEle.dataset.message; // 对应的是 data-messag 属性imgEle.dataset.gorupName; // 对应的是 data-group-name 属性
// 获取到 img 元素var imgEle = document.querySelector('#myImg');// 获取标准自定义属性的值console.log(imgEle.getAttribute('data-message'));console.log(imgEle.dataset.message);console.log('');console.log(imgEle.dataset.groupName);// 修改标准自定义属性的值imgEle.dataset.message = '大悲脸大';imgEle.dataset.groupName = 'B组';
