DOM：是当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
把文档中的代码翻译成一个对象模型
在这个模型中 所有相关的标签属性注释文本等等12种数据 都翻译为一种类型的对象 统称节点对象
这些对象之间在文档模型数据结构中存在某种关系: 根节点 父子节点 同胞节点等等
1.只有一个根节点document
2.除了根节点外所有节点都有唯一的一个父节点
3.document是window对象的属性
4.全局对象模型属于BOM操作 Browser Object Model 把浏览器对外提供的接口翻译为一个对象
BOM操作会在接下来的知识点讲到 它不属于标准的接口 但是浏览器厂商都提供了几乎一样的功能
5.元素的属性也是独立节点 叫属性节点 但是不是元素节点的子节点
本图来自（w3school）
DOM操作详细介绍请访问：https://www.w3school.com.cn/js/js_htmldom_elements.asp
在 DOM 中，所有 HTML 元素都被定义为对象。
编程界面是每个对象的属性和方法。
属性是您能够获取或设置的值（就比如改变 HTML 元素的内容）。
方法是您能够完成的动作（比如添加或删除 HTML 元素）。
访问 HTML 元素最常用的方法是使用元素的 id。
var div1=document.getElementById("m1") 依靠id来获取元素节点/如果没有就返回null（不是id选择器）
var arr=document.getElementsByClassName("m2") 依靠calss来获取元素节点（不是class选择器）
var inps=document.getElementsByTagName("i") 依靠标签的名字来获取元素节点（不是标签名选择器）
var arr=document.getElementsByName("food1") 依靠name属性的值
H5自带的
var el=document.querySelector(".m2") 若符合选择器的第一个元素/null
var arr=document.querySelectorAll(".box2") 符合选择器的所有元素/[]
document.body body标签 document.forms form表单们 document.anchors a标签们 document.images 图片们 document.links 连接们 document.URL 当前文档的网址通过关系获取节点
hello2box34
1.父级 父元素和父节点是同一个
var re=document.getElementById("box4").parentElement//父元素
var re=document.getElementById("box4").parentNode//父节点
console.log(re)
2.子级 子元素和子节点不一定是同一个
var son1=document.getElementById("box1").children//返回值是子元素们 没有返回空数组
console.log(son1)
var son1=document.getElementById("box1").childNodes //返回值是子节点们 没有返回空数组
console.log(son1)
3.兄弟
var re = document.getElementById("box4").nextSibling//下一个兄弟节点 没有返回null
console.log(re)
var re = document.getElementById("box2").nextElementSibling//下一个兄弟元素 没有返回null
console.log(re)
var re=document.getElementById("box3").previousSibling//上一个兄弟节点 没有返回null
console.log(re)
var re=document.getElementById("box3").previousElementSibling //上一个兄弟元素 没有返回null
console.log(re)
4.第1个子节点
var son1=document.getElementById("box1").firstChild
var son2=document.getElementById("box1").firstElementChild
console.log(son1,son2)
5.最后一个子节点
var son1=document.getElementById("box1").lastChild
var son2=document.getElementById("box1").lastElementChild
console.log(son1,son2)
6.获取自己是父元素中的第几个子元素/节点
自己实现这个方法:调用者是父元素中的第几个元素 .index()
Object.prototype.index2=function() {
console.log(this)
var arr=this.parentElement.childNodes
for (let i = 0;i
if(this==arr[i]){
return i
}
}
}
var index=document.getElementById("box4").index2()
console.log(index)
7.父元素中的第几个子元素/节点
var son1=document.getElementById("box1").children[1]//第二个子元素
var son2=document.getElementById("box1").childNodes[1]//第二个子节点
元素无text，没有返回null。节点有text，没有返回null。
1.父节点
2.子节点
返回值是子元素们 没有返回空数组(上面个图)
返回值是子节点们 没有返回空数组(上面个图)
总的图
3.兄弟节点
4.第一个子节点
5.最后一个子节点
6.1当为childNodes时（子节点）
从0开始数
Object.prototype.index2 = function () {
console.log(this)
var arr = this.parentElement.childNodes
for (let i = 0; i < arr.length; i++) {
if (this == arr[i]) {
return i
}
}
}
var box = document.querySelector("#box6")
console.log(box.index2())
结果
6.2当为children时（子元素）
Object.prototype.index1=function(){
console.log(this)
var arr=this.parentElement.children
for(let i=0;i
if(arr[i]===this){
return i
}
}
}
var box = document.querySelector("#box6")
console.log(box.index1())
结果
7.父元素中的第几个子元素/节点
html
Document
| xxx | xxx | xxx | xxx |
| xxx | xxx | xxx | xxx |
| xxx | xxx | xxx | xxx |
| xxx | xxx | xxx | xxx |
script
结果
第一种
var imgs=document.getElementsByTagName("img")
var srcarr=["https://blog.csdn.net/qq_53566222/article/details/填你自己的地址","https://blog.csdn.net/qq_53566222/article/details/填你自己的地址","https://blog.csdn.net/qq_53566222/article/details/填你自己的地址"]
for(let i=0;i
imgs[i].onclick=function(){
document.body.style.backgroundImage=`url("${srcarr[i]}")`
}
}
第二种
document.body.style.backgroundImage=`url("https://blog.csdn.net/qq_53566222/article/details/填你自己的地址")`
var imgs=document.getElementsByTagName("img")
imgs[0].onclick=function(){
document.body.style.backgroundImage=`url("${imgs[0].src}")`或者你自己的地址
}
imgs[1].onclick=function(){
document.body.style.backgroundImage=`url("${imgs[1].src}")`或者你自己的地址
}
imgs[2].onclick=function(){
document.body.style.backgroundImage=`url("${imgs[2].src}")`或者你自己的地址
}
效果
Document - Google Chrome
暑期编程PK赛 得CSDN机械键盘等精美礼品！
