一 什么是DOM
DOM : 文档对象模型 它为文档提供了结构化表示 并定义了如何通过脚本来访问文档结构 . 目的就是为了能让js操作HTML元素而制定的一个规范 .
DOM树(一切都是节点):
元素节点 : HTML标签
文本节点 : 标签中的文字(比如标签之间的空格 换行)
属性节点 : 标签的属性
DOM可以做什么 : 找对象(元素节点) 设置对象的值 设置元素的样式 动他创建和删除元素 事件的触发响应 : 事件源 事件 事件的驱动程序
获取DOM的方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="box" id="box">
<p>alex</p>
</div>
<p class="box">吴老板</p>
<script type="text/javascript">
console.log(window);
console.dir(document);
console.log(document.documentElement);
console.log(document.body)
//1.通过id获取
var oDiv = document.getElementById('box');
console.log(oDiv);
// 2.通过标签获取 获取是伪数组 多个DOM对象
var oTag = document.getElementsByTagName('div')[0]; //HTMLCollection 伪数组 有数组的索引和length,但是没有数组的方法
console.log(oTag);
oTag.style.color = 'red';
// 3.通过类名获取 获取的也是伪数组 多个DOM对象
var oActives = document.getElementsByClassName('box');
console.log(oActives);
for(var i = 0; i < oActives.length; i ++){
//样式设置
oActives[i].style.backgroundColor = 'green';
}
//救命稻草
var oD = document.querySelectorAll('div p')
console.log(oD);
oD.forEach(function (item,index) {
console.log(item);
})
</script>
</body>
</html>
二 DOM中的操作:
1 js对值的处理:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">
wusir
<p>alex</p>
</div>
<input type="text" value="" id="user">
<script>
var oDiv = document.getElementById('box');
// oDiv.innerText= '<h1>哈哈哈哈</h1>';
// oDiv.innerHTML = '嘿嘿嘿嘿';
// oDiv.innerHTML = '<h3>嘿嘿嘿</h3>'
//只获取所有(当前标签和子标签)文本内容
// console.log(oDiv.innerText);
//获取父标签中所有的标签元素 (子标签,空格,换行,文本)
console.log(oDiv.innerHTML);
//设置value值 只适用于表单控件元素
document.getElementById('user').value = 'alex';
console.log(document.getElementById('user').value);
</script>
</body>
</html>
2 对 css 的操作:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
200px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var oDiv = document.getElementsByClassName('box')[0];
var isRed = true;
oDiv.onclick = function () {
if (isRed) {
console.log(this.style);
//this 谁做的事件操作 this指向谁
this.style.backgroundColor = 'green';
this.style.width = '400px';
isRed = false;
} else {
this.style.backgroundColor = 'red';
isRed = true;
}
}
</script>
</body>
3 对标签属性操作:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
200px;
height: 300px;
background-color: red;
}
#box {
background-color: yellow;
}
.active {
display: none;
}
</style>
</head>
<body>
<button id="btn">切换</button>
<div class="box"></div>
<script>
var oDiv = document.getElementsByClassName('box')[0];
var oBtn = document.getElementById('btn');
var isShow = true;
//不等待
oBtn.onclick = function () {
if (isShow) {
// 对id 对标签赋值id
// oDiv.id = 'box';
// oDiv.title = '哈哈哈';
// console.log(oDiv.className); //box
//设置类名的时候 一定要用className 因为class是个关键字
oDiv.className = oDiv.className + ' active';
isShow = false;
}else{
oDiv.className = 'box';
isShow = true;
}
}
console.log(11111);
</script>
</body>
</html>
4 .img标签属性的操作:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*重置样式*/
*{
padding: 0;
margin: 0;
}
.swiper{
1000px;
height: 460px;
margin: 0 auto;
background-color: red;
position: relative;
}
.swiper span{
position: absolute;
right: 0;
top: 50%;
41px;
height: 69px;
background: green url("./icon-slides.png") no-repeat -125px 0;
}
</style>
</head>
<body>
<div class="swiper">
<span id="next"></span>
<img src="./1.png" alt="" id="meinv">
</div>
<script>
var oImg = document.getElementById('meinv');
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 = '哈哈哈'
}
oImg.onmouseout = function () {
this.src = '1.png'
//console.log(this.getAttribute('src'))
}
oNext.onmouseover = function () {
// console.log( this.style);
this.style.backgroundPositionX = '-42px';
this.style.backgroundPositionY = '0';
}
</script>
</body>
</html>
5 .属性方法设置和获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">alex</div>
<script>
// document.getElementsByTagName('div')[0].setAttribute()
</script>
</body>
</html>
6 .对象属性和标签属性区分
# 区分DOM对象属性 和 标签属性 //this.src 获取的是DOM对象的属性 console.log(this.src); //绝对路径 //获取出来的就是标签上的属性 通过getAttribute('');获取的标签上的属性 console.log(this.getAttribute('src'));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" name="user" id="user">
<img src="./1.png" alt="" id="aImg">
男 <input type="radio" name="sex" checked="xxxxx" id="nan">
女 <input type="radio" name="sex" id="nv">
<script>
function $(idName) {
return document.getElementById(idName);
}
var oInput = document.getElementById('user');
var oImg = document.getElementById('aImg');
console.dir(oInput);//DOM对象
console.log(oInput.type);
console.log(oInput.getAttribute('type'));
console.dir(oImg);
console.log(oImg.src);
console.log(oImg.getAttribute('src'));
console.log( $('nan').checked); //对象的属性 单选框 提交后台 建议使用对象属性checked
console.log( $('nan').getAttribute('checked')); //标签上属性
</script>
</body>
</html>