day02 js DOM的操作: 对样式的操作 对标签属性的操作 对值的操作 对DOM对象的操作
一.DOM的操作
1.对标签的'样式属性'操作
即标签的style属性
1.1.this.style
this.style.width = '400px';
this.style.float = 'left';
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<style>
.box{
width: 100px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id="box" class="box"></div>
<p>bajie</p>
<script>
var objDiv = document.getElementsByClassName('box')[0]; //Elements 获取的是伪数组, 不是对象, 用下标[0]取出对象
objDiv.onclick = function () {
console.log(this.style); //这里的style获取的是: 行内的对象
this.style.backgroundColor = 'green';
this.style.width = '400px';
this.style.float = 'left';
}
</script>
</body>
</html>
1.2.this.style.backgroundPosition = "0px 0px";
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<style>
.box{
width: 100px; /*能用css写的尽量不要用js, 因为js会产生性能消耗*/
height: 260px;
/*background: url(./image/timi.jfif) no-repeat 0px 0px;*/
background: url(./image/timi.jfif) no-repeat -162px 0px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var objDiv = document.getElementsByClassName('box')[0];
objDiv.onmouseover = function () {
this.style.backgroundPosition = "0px 0px";
};
objDiv.onmouseout = function () {
this.style.backgroundPosition = "-162px 0px";
};
</script>
</body>
</html>
2.对标签的属性操作
this.id
this.className
this.src
this.alt
this.href
this.title
this.type
this.name
上面这些对应对象的get和set方法, 有助于理解js的底层语法,比如this.src,可以写成
get方法: this.getAttribute('src')
set方法: this.setAttribute('src', './image/2.jpg')
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div class="box"></div>
<img src="./image/1.jpg" alt="shop" class="shop" width="100" id="shop">
<script>
var objImg = document.getElementById('shop');
objImg.onmouseover = function () {
//this.src = "./image/2.jpg";
console.log(this.getAttribute('src')); //和上面方法用哪个都行: 用上面的比较简单的方法就行了
this.setAttribute('src', './image/2.jpg');
};
objImg.onmouseout = function () {
this.src = "./image/1.jpg";
}
</script>
</body>
</html>
3.对值的操作
this.innerText 获取或设置的都只是"文本"
this.innerHTML 获取或设置的是"文本"和"标签"
this.value 特殊的,单闭合标签的值操作用这个,如表单控件
<body>
<button id="btn"><span>隐藏</span></button>
<input type="text" value="bajie" id="input">
<script>
document.getElementById('btn').onclick = function () {
console.log(this.innerHTML); //获取的是: <span>隐藏</span> innerHTML:获取的是父标签下面的所有文本和所有子标签
console.log(this.innerText); //获取的是: 隐藏 innerText:获取的是父标签下面的所有文本(文字)
// this.innerHTML = '<span>单击</span>'; //设置的是"单击" innerHTML设置时,会把内容用html解析,再设置
this.innerText = '<span>单击</span>'; //设置的是"<span>单击</span>" innerText设置时,原样设置, 不解析
};
console.log(document.getElementById('input').value);
document.getElementById('input').value = '八戒'; //表单控件的值比较特殊, 标签行内的值保持不变, 不会变成你给设置的值
</script>
</body>
4.对DOM对象的操作(增删改查)
4.1.什么是DOM
文档对象模型: DOM为文档提供了结构化的标准, 并定义了如何通过脚本js来访问文档结构.
4.2.DOM的作用
目的其实就是为了能让js操作html元素而制定的一个规范
4.3.DOM的组成
DOM就是由节点组成的,DOM树:
在html中一切都是节点, 所有的节点都是对象object
元素节点: html标签
文本节点: 标签中的文本(包括标签之间的换行, 空格)
属性节点: 标签的属性
4.4.解析过程:
html加载完毕, 渲染引擎会在内存中把html文档,生成一个DOM树,getElementById是获取DOM树上的元素节点.然后操作时修改的是该元素的属性
4.5.DOM可以做什么:
找对象: 元素节点
设置元素的属性值
设置元素的样式
动态创建和删除元素
事件的触发响应: 事件源,事件,事件的驱动程序
4.6.DOM节点的获取,三种方式
document.getElementById('box')
document.getElementsByClassName('box')[0]
document.getElementsByTagName('div')[0]
4.7.DOM访问关系的获取:
DOM的节点不是孤立的, 因此可以通过DOM节点之间的相对关系对它们进行访问,是属性
爷爷
父辈 父辈
老大 老二 老大 老二
4.7.1.获取父节点
this.parentNode
4.7.2.获取兄弟节点
this.nextSibling 下一个节点(包括标签, 空文档, 换行节点):正常两个兄弟之间肯定是有换行的,那么可能不是我想获取的,而是 #text
this.nextElementSibling 下一个元素节点(只找标签,不找空格和换行)
this.previousSibling 上一个节点
this.peiviousElementSibling 上一个节点
4.7.3.获取一个子节点
this.firstChild 第一个节点
this.firstElementChild 第一个节点
this.lastChild 最后一个节点
this.lastElementChild 最后一个节点
4.7.4.所有子节点
this.childNodes 标准属性, 返回子节点的集合(包括元素节点, 所有属性, 文本节点), 是w3c标准
this.children 非标准属性, 返回子元素节点的集合,只返回html节点, 甚至不返回文本节点
4.8.浏览器的兼容性 IE6/7/8
var a = oLaoda.nextElementSibling || oLada.nextSibling;
IE6/7/8中获取children: 包含注释节点(也就是这些版本的时候: 不要写注释)
4.9.增
4.9.1.创建DOM
创建子标签: var objChild = document.createElement('div'); //这里的标签名字可以是任意一个, 但是要让他语义化, 就不能任意创建标签名
把子标签追加到父标签里面: objFather.appendChild(objChild);
4.9.2.定时器
可以让DOM的创建延时加载, 就可以明显看到子盒子是通过js后加上去的, 这种效果
setTimeout函数的两个参数: 1.回调函数 2.超时时间单位是毫秒(意思是: 2秒后执行回调函数里面的代码)
回调函数只会被执行一次
setTimeout(
function () {
... },2000
);
<body>
<button id="btn">隐藏</button>
<div class="box" id="box"></div>
<script>
setTimeout(
function () {
var objFather = document.getElementById('box'); //获取父盒子
var objChild = document.createElement('div'); //创建DOM,即子盒子
objChild.className = 'child'; //给子盒子加属性:className
objChild.style.width = '200px'; //给子盒子加样式:style
objChild.style.height = '200px';
objChild.style.backgroundColor = 'red';
objFather.appendChild(objChild); //父节点.appendChild(子元素对象)
objChild.style.backgroundColor = 'green'; //子标签属性可以在追加后改, 也可以在追加前更改
},2000
);
</script>
</body>
4.9.3.控制盒子的显示与隐藏
方式一: 控制style.display属性显示隐藏
方式二: 控制className对元素显示隐藏, 使用的也是display属性
有个问题: 一和二初始化的时候有渲染开销
应用: 网页中频繁性的切换建议这两种, 如导航栏
方式三: 对元素的创建和销毁
有个问题: 这个的渲染开销比上面两种大的多
应用: 网页中少量的切换建议使用这个, 如登录注册
4.10.接口
就是api, 就是一个url地址, 后端就是写这个的, 前端要拿到这个接口
4.11.选项卡: 点击的选项卡变色, 其他不变色
点一个按钮: 如何让其他按钮不变, 可以利用排他思想: 先让所有的按钮都不变, 然后选中的变化
<head>
<title>Document</title>
<style>
.active{
background-color: red;
}
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
var objBtns = document.getElementsByTagName('button');
for(var i=0; i<objBtns.length; i++){
objBtns[i].onclick = function () {
for(var j=0; j<objBtns.length; j++){ //重置所有按钮
objBtns[j].className = '';
}
this.className = 'active'; //选中的变化
}
}
</script>
</body>
5.介绍两个事件
onmouseover和onmouseenter的区别
onmouseover: 调用的时机: 当鼠标悬浮这个元素的时候被调用,当鼠标悬浮这个元素的子元素时也被调用一次
onmouseout:
onmouseenter: 调用的时机: 只是在鼠标悬浮这个元素的时候被调用, 悬浮在子元素上时没有这个事件
onmouseleave:
<head>
<title>Document</title>
<style>
.father{
height: 50px;
width: 50px;
background-color: red;
position: relative;
}
.child{
height: 200px;
width: 200px;
background-color: green;
position: absolute;
top: 50px;
display: none;
}
</style>
</head>
<body>
<div class="father">
<div class="child"></div>
</div>
<script>
var objFather = document.getElementsByClassName('father')[0]; //用伪数组取其中一个对象时, 这个下标别忘记写
objFather.onmouseenter = function () {
console.log(this.children[0]);
this.children[0].style.display = 'block';
};
objFather.onmouseleave = function () {
this.children[0].style.display = 'none';
}
</script>
</body>