javascript之DOM对象
2023-09-15 21:41
DOM基本概念
DOM（Document Object Model）文档对象模型，是W3C组织推荐的一套用于处理HTML的标准编程接口。
DOM又称为文档树模型，因为整个HTML文档是一个树形的结构
DOM中常见的概念:
文档document：一个网页可以称为文档节点node：网页中的所有内容都是节点（标签、属性、文本、注释等）元素element：网页中的标签
DOM初体验
document.getElementById("box")的作用是根据页面中元素的id来获取元素
在DOM中，想要操作一个元素，首先需要先获取到这个元素才能进行操作。
var div = document.getElementById('main');console.dir(div);
关于console.log和console.dir的区别
console.log打印一个元素的时候，是以标签的形式进行展示的console.dir打印一个元素的时候，是以对象的形式进行展示的
在DOM中，页面标签的属性和DOM对象的属性是一一对应的，因此我们可以通过修改DOM对象的属性来修改标签的属性。
//html内容
//结果：div标签的title属性就发生了更改
使用getElementById的注意事项
如果id不存在，会返回null在DOM中，document.getElementById("box")方法需要写在html内容的后面，保证页面加载完成之后才能获取到内容。部分浏览器，如果元素设置了id属性，可以直接使用（但是不是规范，不推荐）
当getElementById返回null的时候，null.onclick就会报错
mdn地址
getElementsByTagName
通过标签名获取元素
var divs = document.getElementsByTagName('div');
注意：返回值有没有获取到元素，都是一个伪数组，即便元素只有一个
querySelector和querySelectorAll
强大并且常用的根据querySelector是CSS选择器获取页面元素的
document.querySelector('www.centurytheatre.net')
缩小查找范围
document.getElemntsByTagName("div")表示获取页面中所有的div元素，范围太大了，可以使用box.getElementsByTagName("div")表示获取box中所有的div元素，范围更小。document.getElementById("demo")表示获取页面中id为box的元素，没有box.getElementById("demo")这种用法。
练习：
隔行变色
事件的基本使用
事件：触发-响应机制
事件三要素：
事件源:触发事件的元素事件名称: click 点击事件事件处理程序:事件触发后要执行的代码(函数形式)
注册事件的基本语法：
var box = document.getElementById('box');
box.onclick = function() {console.log('代码会在box被点击后执行');
};
注意：事件处理程序并不是立马执行，而是当事件触发的时候在会执行（浏览器会自动调用）
练习：
点击按钮，切换图片
修改标签的属性
在DOM中，页面标签的属性和DOM对象的属性是一一对应的，因此我们可以通过修改DOM对象的属性来修改标签的属性。
标签的alt，title，src，width，height等属性，可以直接通过对象进行修改。
如果是class属性，在js中class是关键字，因此对应的是className属性
练习：
【案例：二维码案例】
鼠标经过事件与鼠标离开事件
onmouseover:当鼠标经过时触发
onmouseout:当鼠标离开时触发
事件中的this
当在事件中表示当前元素的时候，可以使用this
var btn = document.getElementById("btn");
btn.onclick = function() {this.value = "哈哈";
}
练习：
阻止a标签跳转
对于a标签来说，默认的行为就是进行页面跳转，如果不想让a标签进行跳转，可以在注册事件中使用return false
var link = document.getElementById("link");
link.onclick = function() {alert("呵呵");return false;
}
innerText && innerHTML
美女相册案例
var imgs = document.getElementById("imgs");
var links = imgs.getElementsByTagName("a");
var bigImg = document.getElementById("bigImg");
var des = document.getElementById("des");
for(var i = 0; i < links.length; i++) {links[i].onclick = function () {bigImg.src = this.href;des.innerText = this.title;return false;}
}
mdn地址
getElementsByTagName
通过标签名获取元素
var divs = document.getElementsByTagName('div');
注意：返回值有没有获取到元素，都是一个伪数组，即便元素只有一个
querySelector和querySelectorAll
强大并且常用的根据querySelector是CSS选择器获取页面元素的
document.querySelector('www.centurytheatre.net')
缩小查找范围
document.getElemntsByTagName("div")表示获取页面中所有的div元素，范围太大了，可以使用box.getElementsByTagName("div")表示获取box中所有的div元素，范围更小。document.getElementById("demo")表示获取页面中id为box的元素，没有box.getElementById("demo")这种用法。
练习：
隔行变色
事件的基本使用
事件：触发-响应机制
事件三要素：
事件源:触发事件的元素事件名称: click 点击事件事件处理程序:事件触发后要执行的代码(函数形式)
注册事件的基本语法：
var box = document.getElementById('box');
box.onclick = function() {console.log('代码会在box被点击后执行');
};
注意：事件处理程序并不是立马执行，而是当事件触发的时候在会执行（浏览器会自动调用）
练习：
点击按钮，切换图片
修改标签的属性
在DOM中，页面标签的属性和DOM对象的属性是一一对应的，因此我们可以通过修改DOM对象的属性来修改标签的属性。
标签的alt，title，src，width，height等属性，可以直接通过对象进行修改。
如果是class属性，在js中class是关键字，因此对应的是className属性
练习：
【案例：二维码案例】
鼠标经过事件与鼠标离开事件
onmouseover:当鼠标经过时触发
onmouseout:当鼠标离开时触发
事件中的this
当在事件中表示当前元素的时候，可以使用this
var btn = document.getElementById("btn");
btn.onclick = function() {this.value = "哈哈";
}
练习：
阻止a标签跳转
对于a标签来说，默认的行为就是进行页面跳转，如果不想让a标签进行跳转，可以在注册事件中使用return false
var link = document.getElementById("link");
link.onclick = function() {alert("呵呵");return false;
}
innerText && innerHTML
美女相册案例
var imgs = document.getElementById("imgs");
var links = imgs.getElementsByTagName("a");
var bigImg = document.getElementById("bigImg");
var des = document.getElementById("des");
for(var i = 0; i < links.length; i++) {links[i].onclick = function () {bigImg.src = this.href;des.innerText = this.title;return false;}
}