11.3.16 DOM
什么是DOM?
-
document object model 文档对象模型
DOM树:
-
整个文档就是一棵树,树当中的每一个节点都是一个对象:这个对象中维系着属性信息,文本信息,关系信息
-
整个文档是从上到下依次加载的,当加载到script标签的时候,会有一个特殊的变量提升的解析方法,导致后定义的函数可以提前被调用
在页面上还有一些动作效果:根据人的行为改变的--点击,鼠标悬浮,自动改变的
js是怎么给前端的web加上动作的?
-
找到对应的标签
-
给标签绑定对应的时间
-
操作对应的标签
1. 查找标签
1.1 直接查找
var a = document.getElementById('标签的id') // 通过ID查找,直接返回一个元素对象 console.log(a) var sons = document.getElementsByClassName('标签的类名') // 通过类名查找,返回元素组成的数组 console.log(sons) sons[0] //获取到一个标签对象 var divs = document.getElementsByTagName('标签名') // 通过标签查找,返回元素组成的数组 console.log(divs) </ 通过ClassName和TagName获得的标签数组,想要使用某个标签必须通过索引获取该标签对象
1.2 间接查找
找父亲 var a = document.getElementById('baidu') console.log(a) var foodiv = a.parentNode // 获取到父节点的对象,返回一个 找儿子 var foo= document.getElementById('foo') foo.children // 获取所有的子节点,返回一个数组 foo.firstElementChild // 获取第一个子节点 foo.lastElementChild // 获取最后一个子节点 找兄弟 var son1 = document.getElementById('son1') console.log(son1) var son2 = document.getElementById('son2') console.log(son2) son1.nextElementSibling // 找下一个兄弟 返回一个对象 son1.previousElementSibling // 找上一个兄弟 返回一个对象
2. 操作本身的标签
2.1 标签的创建
var obj = document.createElement('标签名') // a div ul li span obj就是一个新创建出来的标签对象
2.2 标签的添加
父节点.appendChild(要添加的节点) //添加在父节点的儿子们之后 先创建标签 var obj = document.createElement('a') obj.innerText='JD' 获取父节点,再添加标签 var fath = document.getElementById('foo') fath.appendChild(obj) 父节点.insertBefore(要添加的节点,参考儿子节点) //添加在父节点的某个儿子之前 先创建标签 var obj = document.createElement('a') obj.innerText='JD' 获取父节点和参考节点,再添加标签 var fath = document.getElementById('foo') var seq = document.getElementById('son1') fath.insertBefore(obj,seq)
2.3 标签的删除
父节点.removeChild(要删除的子节点) 先找到父节点和要删除的子节点 var fath = document.getElementById('foo') var seq = document.getElementById('son1') fath.removeChild(seq) 子节点1.parentNode.removeChile(子节点2) 先找出子节点1,通过子节点1找到父节点,再删除子节点2 var seq = document.getElementById('son1') var seq1 = document.getElementById('son2') seq.parentNode.removeChild(seq1)
2.4 标签的替换
父节点.replaceChild(新标签,旧儿子) 先找父节点和需要替换的子节点,创建新的标签 var obj = document.createElement('a') obj.innerText='JD' var fath = document.getElementById('foo') var seq = document.getElementById('son1') fath.replaceChild(obj,seq)
2.5 标签的复制
节点.cloneNode() //只克隆一层 节点.cloneNode(true) //克隆自己和所有的子子孙孙 注意 :如果克隆出来的标签的id是重复的,那么修改之后才能应用到页面上
3. 节点的属性操作
节点对象.getAttribute('属性名') //获取标签对象
节点对象.setAttribute('属性名','属性值') //添加标签属性
节点对象.removeAttribute('属性名') //删除标签属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.odiv{
100px;
height: 100px;
background-color: lawngreen;
}
</style>
</head>
<body>
<div id="outer"></div>
<button id="b1">显示</button>
<button id="b2">隐藏</button>
</body>
<script>
// var aobj = document.createElement('a') // 1.创建标签
// var fath = document.getElementById('outer') // 2.获取父标签
// fath.appendChild(aobj) // 3.添加标签
// aobj.innerText = '百度一下'
// aobj.getAttribute('href') //获取标签对象
// aobj.setAttribute('href','http://www.baidu.com') // 4.添加标签属性
// aobj.removeAttribute('href') //删除标签属性
var b1 = document.getElementById('b1')
b1.onclick = function () {
var obj = document.getElementById('outer')
obj.setAttribute('class','odiv')
}
var b2 = document.getElementById('b2')
b2.onclick = function () {
var obj = document.getElementById('outer')
obj.removeAttribute('class')
}
// console.log(fath)
</script>
</html>
4. 节点的文本操作
节点对象.innerText = '只能写文字'
节点对象.innerHTML = '可以放标签'
5. 点的值操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" name="user" id="user">
-------------------------------------------------------
<select name="city" id="city">
<option value="1" selected>北京</option>
<option value="2">天津</option>
<option value="3">上海</option>
</select>
</body>
<script>
var inp = document.getElementById('user')
// inp.setAttribute('value','Agoni')
// inp.removeAttribute('value')
inp.value='barry'
inp.value=null
---------------------------------------------------------
var st = document.getElementById('city')
st.value // 查看值
st.value='2' // 天津
st.value='3' // 上海
</script>
</html>
6. 节点的类操作
className 获取所有样式类名(字符串) 首先获取标签对象 标签对象.classList.remove(cls) //删除指定类 标签对象.classList.add(cls) //添加类 标签对象.classList.contains(cls) //存在返回true，否则返回false 标签对象.classList.toggle(cls) //存在就删除,否则添加,toggle的意思是切换,有就删除,如果没有就加一个
7. 事件
</head>
<body>
<button id="btn">点击一下</button>
</body>
<script>
//绑定事件方法一
var btn = document.getElementById('btn') // 获取事件源
btn.onclick = function () { //绑定事件
alert('别点我') //写事件驱动程序
}
//绑定事件方法二
// btn.onclick = click
// function click() {
// alert('点我干嘛')
// }
</script>
</html>
7.1 页面广告例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.ad{
background-color: green;
position: fixed;
padding: 5px;
100%;
height: 50px;
color: yellow;
text-align: center;
line-height: 50px;
}
button{
float: right;
}
</style>
</head>
<body>
<div class="ad">
python23期皇家赌场开业了,性感荷官在线发牌
<button id="close">x</button>
</div>
<div class='content'>
我是正文内容
<img src="0.jpg" alt="">
<img src="1.jpg" alt="">
</div>
</body>
<script>
var btn = document.getElementById('close')
btn.onclick = function () {
this.parentNode.style.display = 'none'
}
</script>
</html>