DOM操作（1）
什么是DOM？
DOM（ document object model ）是文档对象模型，是针对于xml但是扩展用于HTML的应用程序编程接口，定义了访问和操作HTML的文档的标准。
它是W3C产业联盟制定的浏览器对程序员提供的对HTML文档操作的接口把文档中的代码翻译成一个对象模型。
在这个模型中，所有相关的标签属性注释文本等等12种数据，都翻译为一种类型的对象，统称节点对象。
这些对象之间在文档模型数据结构中存在某种关系: 根节点 父子节点 同胞节点等等。
1.只有一个根节点document 。document的子节点是html。
2.除了根节点外所有节点都有唯一的一个父节点
3.document是window对象的属性
4.全局对象模型属于BOM操作 Browser Object Model 把浏览器对外提供的接口翻译为一个对象BOM操作会在接下来的知识点讲到 它不属于标准的接口 但是浏览器厂商都提供了几乎一样的功能
5.元素的属性也是独立节点 叫属性节点 但是不是元素节点的子节点
document 和 window 之间的区别
（版权声明：本段为CSDN博主「W Y L」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/weixin_45959525/article/details/103798604）
简单来说，document是window的一个对象属性。window 对象表示浏览器中打开的窗口。如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。所有的全局函数和对象都属于 window 对象的属性和方法。
区别:
window 指窗体。document指页面。document是window的一个子对象。
获取元素的方法
系统提供的方法
<div id="box11">111</div> <div class="box22">222</div> <div class="box22">222</div> <em>动画城</em> <em>动画城</em> <br> <input type="text" name="input1" value="这是一个测试"
//H5之前的技术
//1、根据元素设置的id获取
var div11=document.getElementById("box11")
console.log(div11)//返回第一个id为box11的元素<div id="box11">111</div>,如果没有为nul
//2、根据元素设置的class名字获取
var div22=document.getElementsByClassName("box22")
console.log(div22)//HTMLCollection(2) [div.box22, div.box22],如果没有为HTMLCollection []
//3、根据元素的标签名获取
var em=document.getElementsByTagName("em")
console.log(em)//HTMLCollection(2) [em, em],如果没有为HTMLCollection []
//4、根据元素内的name属性获取
var input=document.getElementsByName("input1")
console.log(input)//NodeList [input],如果没有为NodeList []
//H5
//5、获取符合选择器的第一个元素
var box2 = document.querySelector(".box22")//
console.log(el)//<div class="box22">222</div>,没有为null
//6、获取符合选择器的全部元素
var box2a = document.querySelectorAll(".box22")//
console.log(el2)//NodeList(2) [div.box22, div.box22]，没有为NodeList []
//总结 H5的技术很好用 但是getElementById的速度是最快的 系统提供的直接获取的方式
document.body //body标签//这个经常使用，其他的看情况
document.forms //form表单们
document.anchors //a标签们 document.images //图片们
document.links //连接们
document.URL //当前文档的网址
document.anchors //a标签们 document.images //图片们
document.links //连接们
document.URL //当前文档的网址
通过关系获取
<div class="box1" id="box1"> <div class="box2">hello888 <div class="box3">3333 <div class="box4">4444</div> </div> </div> <div class="box5">hello888</div> <div class="box6">hello888</div> <div class="box7">hello888</div> <div class="box8">hello888</div> </div>
// 1、父节点
var box4 = document.querySelector(".box4")
console.log(box4.parentElement)//父元素
//<div class="box3">3333
// <div class="box4">4444</div>
//</div>
console.log(box4.parentNode)//父节点
//<div class="box3">3333
// <div class="box4">4444</div>
//</div>
//2、子节点
var box1 = document.querySelector(".box1")
console.log(box1.children)//返回装着子元素的类数组HTMLCollection(5) [div.box2, div.box5, div.box6, div.box7, div.box8]
console.log(box1.childNodes)//返回装着子元素的类数组NodeList(11) [text, div.box2, text, div.box5, text, div.box6, text, div.box7, text, div.box8, text]
//3、弟弟节点
var box2 = document.querySelector(".box2")
console.log(box2.nextElementSibling)//返回弟弟元素（跟它同级的下一个元素）<div class="box5">hello888</div>，没有为null
console.log(box2.nextSibling)//返回弟弟节点，打印#text，没有为null
//4、哥哥节点
var box6 = document.querySelector(".box6")
console.log(box6.previousElementSibling)//返回哥哥元素（跟它同级的上一个元素）<div class="box5">hello888</div>，没有为null
console.log(box6.previousSibling)//返回哥哥节点，打印#text，没有为null
//5、父节点的第一个子节点
console.log(box1.firstElementChild)//返回子元素<div class="box2">...</div>
console.log(box1.firstChild)//返回子节点#text
//6、最后一个子节点
console.log(box1.lastElementChild)//返回子元素<div class="box8">hello888</div> console.log(box1.lastChild)//返回字节点#text
console.log(box1.children[box1.children.length - 1])//返回子元素<div class="box8">hello888</div>
console.log(box1.childNodes[box1.childNodes.length - 1])//返回字节点#text
//7、获取元素是同胞中的第几个
//写函数实现功能
Object.prototype.indexof1 = function () {
var arr = this.parentElement.children
for (let i = 0; i < arr.length; i++) {
//this为<div class="box6">hello888</div>
if (arr[i] === this) {
return i
}
}
}
console.log(box6.indexof1())
//8、获父元素中的第几个元素
var son1=document.getElementById("box1").children[1]//第二个子元素
var son2=document.getElementById("box1").childNodes[1]//第二个子节点
var son3=document.querySelector(".box1").children[1]//第二个子元素
var son4=document.querySelector(".box1").childrenNodes[1]//第二个字节点 表格的隔行变色
1、静态隔行变色
<style>
tr{
width: 100%;
height: 40px;
}
td{
width: 100px;
}
</style>
<table class="table1" cellspacing="0px" border="1">
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table> var trs = document.querySelectorAll("tr")
console.log(trs)
for (var i=0;i<trs.length;i++) {
if(i%2==0) {
trs[i].style.backgroundColor='aqua'
}else if(i%2==1) {
trs[i].style.backgroundColor='aquamarine'
}
} 
2、点击单元格，这一行变色，其他行不变色
var trs = document.querySelectorAll("tr")
// console.log(tds)
for (let i=0;i<trs.length;i++) {
trs[i].onclick=function(){
trs.forEach((el)=>{
// console.log(el);
el.style.backgroundColor='white'
})
trs[i].style.backgroundColor='aquamarine'
}
} 3、点击单元格切换列
var tds = document.querySelectorAll("td")
var trs = document.querySelectorAll("tr")
for (let i=0;i<tds.length;i++) {
tds[i].onclick=function() {
tds.forEach((tds)=>{tds.style.backgroundColor='white'})
let j=tds[i].indexof1()
//获取元素是同胞中的第几个，上面在Object的原型链上添加的indexof1函数
trs.forEach((trs)=>{
trs.children[j].style.backgroundColor='aquamarine'
})
}
} 
查看8道真题和解析
投递长鑫存储等公司10个岗位