主要内容
- 1.DOM介绍
- 2.获取DOM的方式
- 3.DOM的事件操作
1.DOM介绍
(1)什么是DOM
- DOM:文档对象模型。DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
- DOM就是由节点组成的。
(2)解析过程
- HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树,getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。
- DOM树(一切都是节点)
DOM的数据结构如下:
上图可知,在HTML当中,一切都是节点:(非常重要)
- 元素节点:HMTL标签。
- 文本节点:标签中的文字(比如标签之间的空格、换行)
- 属性节点::标签的属性。
整个html文档就是一个文档节点。所有的节点都是Object。
(3)DOM可以做什么
- 找对象(元素节点)
- 设置元素的属性值
- 设置元素的样式
- 动态创建和删除元素
- 事件的触发响应:事件源、事件、事件的驱动程序
2.获取DOM的方式
<script>
console.log(window); //加载出窗口
console.log(document); //打印出文档
console.log(document.documentElement); //打印文档中的元素
console.log(document.body); //打印文档的body
// 通过id 获取
var oDiv = document.getElementById("active");
console.log(oDiv); // 获取到该标签下的内容
// 通过标签获取,获取的伪数组 多个DOM对象
// var oTag = document.getElementsByTagName("div");//HTMLCollection 伪数组 有数组的索引和length,但是没有数组的方法
// console.log(oTag); //HTMLCollection [div#active.box, active: div#active.box]
var oTag = document.getElementsByTagName("div")[0];
console.log(oTag); // div标签
//通过类名来获取,获取的也是伪数组,多个DOM对象
var oActive = document.getElementsByClassName("box");
console.log(oActive);
for(var i = 0; i< oActive.length;i++){
//样式设置
oActive[i].style.backgroundColor = "yellow";
}
//救命稻草
var oD = document.querySelectorAll("div p");
console.log(oD);
oD .forEach(function (item, index) {
console.log(item) // <p>倚天屠龙记</p>
})
</script>
3.DOM的事件操作
(1)事件的三要素
事件的三要素:事件源、事件、事件驱动程序。
比如,我用手去按开关,灯亮了。这件事情里,事件源是:手。事件是:按开关。事件驱动程序是:灯的开和关。
再比如,网页上弹出一个广告,我点击右上角的X
,广告就关闭了。这件事情里,事件源是:X
。事件是:onclick。事件驱动程序是:广告关闭了。
于是我们可以总结出:谁引发的后续事件,谁就是事件源。
总结如下:
- 事件源:引发后续事件的html标签。
- 事件:js已经定义好了(见下图)。
- 事件驱动程序:对样式和html的操作。也就是DOM。
<title>Title</title>
<script>
/*窗口加载 1.先去加载文档 2.再去加载图片*/
window.onload = function () { //此时如果不加载窗口,文档是没有加载进来的
console.log(document);
console.log(document.getElementById('btn'));
// document.getElementById("btn").onclick = function () {
// alert(1);
// };
document.getElementById("btn").onmouseover = function(){
console.log("鼠标悬停了")
};
document.getElementById("btn").onmouseout = function(){
console.log("鼠标离开了")
}
}
</script>
</head>
<body>
<button id ="btn">点我</button>
代码书写
常见事件如下
(2)对标签值的操作
innerText
//只设置文本
var oDiv = document.getElementById('box');
oDiv.innerText= '哈哈哈哈'
innerHTML
//既可以设置文本 又可以设置标签 设置 set 获取 get 点语法(set方法和get方法)
oDiv.innerHTML = '<h3>嘿嘿嘿</h3>'
(3) 获取标签内容值
//只获取所有(当前标签和子标签)文本内容
console.log(oDiv.innerText);
//获取父标签中所有的标签元素 (子标签,空格,换行,文本)
console.log(oDiv.innerHTML);
(4)对表单控件value的操作
//设置value值 只适应于表单控件元素
document.getElementById('user').value = 'alex';
console.log(document.getElementById('user').value);
(5)对标签的css操作(样式操作)
xxx.style.css的属性key = '值'
盒子颜色的切换
var oDiv = document.getElementsByClassName('box')[0];
var isRed = true;
oDiv.onclick = function () {
if (isRed) {
//this 谁做的事件操作 this指向谁
this.style.backgroundColor = 'green';
this.style.width = '400px';
isRed = false;
} else {
this.style.backgroundColor = 'red';
isRed = true;
}
}
(6)对标签属性的操作
<script>
var oDiv = document.getElementsByClassName("box")[0];
var oBtn = document.getElementById("btn");
var isShow = true;
oBtn.onclick = function () {
if(isShow){
oDiv.id = "box1";
oDiv.title = "hhhh";
console.log(oDiv.className); //box
oDiv.className = oDiv.className+"active";
isShow = false
}else{
oDiv.className = "box";
isShow = true
}
}
</script>
(7)img标签属性的操作
- src 链接图片地址
- alt 图片加载失败的时候显示的文本
<script>
var oImg = document.getElementById("qh");
console.dir(oImg);
var oNext = document.getElementById("next");
oImg.onmouseover = function(){
//this.src 获取的是DOM对象的属性
console.log(this.src);//绝对路径
//读取出来的就是标签上的属性,通过getAttribute('');获取的标签上的属性
console.log(this.getAttribute('src'));
this.src = '1_hover.png';
this.alt = "hhhhhh"
};
oImg.onmouseout = function(){
this.src = "1.png";
this.alt = '哈哈哈'
};
oNext.onmouseover = function () {
// console.log( this.style);
this.style.backgroundPositionX = '-42px';
this.style.backgroundPositionY = '0';
}
</script>
(8)区分DOM对象属性和标签属性
//this.src 获取的是DOM对象的属性
console.log(this.src); //绝对路径
//获取出来的就是标签上的属性 通过getAttribute('');获取的标签上的属性
console.log(this.getAttribute('src'));