主要内容
- 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标签属性的操作
-
-
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)
//this.src 获取的是DOM对象的属性 console.log(this.src); //绝对路径 //获取出来的就是标签上的属性 通过getAttribute('');获取的标签上的属性 console.log(this.getAttribute('src'));