一般意义上讲,JS包含DOM、BOM和ECMAScript,DOM和BOM可以看作是Web API,主要用于操作页面,ECMAScript是传统意义上的一门包含语法的语言,类似于Java,C。
首先,我们应该知道什么是DOM(document object model),由W3C制定标准,文档对象模型,这样可能太抽象了。
简单说,一个页面就是一个文档document,里边的内容都是对象,这样就构建了一个DOM树,一个大的模型。所有标签都是元素element,页面中的内容都是节点node,这些都是对象。
值得一提的是,console.dir()这个方法可以打印元素对象,查看全部的属性和方法。
本次分享:DOM的元素操作方法
一、获取页面基本元素(5种)
1. 通过ID获取:document.getElementById("test1");
【注】没有任何兼容问题 ,ID的值区分大小写,返回值是元素对象。
2. 通过标签名获取:document.getElementsByTagName("li");
【注1】返回的是一个伪数组(只有一个li也是伪数组,没有li时是空伪数组),无兼容问题。
【注2】如果有父元素ol,获取ol中的li: ol[0].getElementsByTagName('li'),ol也是通过标签拿到的,所以也是伪数组,但提取时必须是单个的,所以是ol[0]。
3.(H5新增)通过类名获取:document.getElementsByClassName("test2");
【注】得到一个伪数组,不能直接操作,一般都是遍历,IE678不兼容。
4.(H5新增)通过选择器获取:document.querySelector(" ");//常用!!!!!
【注】有很多重复的选择器名时,querySelector("选择器") 只能得到里边的第一个,标签选择器,类选择器,ID选择器,属性选择器都可以,IE67不兼容。
5.(H5新增)选择器遍历获取:document.querySelectorAll(" ");
【注】针对上条不能全部获取的情况,这个会返回指定选择器的所有元素。
二、获取页面特殊元素(2种)
1. 获取body:document.body;
2. 获取html:document.documentElement;//注意不是document.html
三、操作页面常见元素(7种)
1. 改变元素内容:
element.innerText = " "或function();(不识别HTML标签,会去除空格和换行)
element.innerHTML = " "或function();(W3C制定,识别HTML标签,保留空格和换行)
【注】两个属性都是可读写的,可以获取里边的元素console.log(p.innerHTML)
2. 改变元素属性(固有属性):比如 img.src、img.href、img.title等
3. (特殊)表单的元素属性:type、value 、checked、selected、disabled
4. 改变样式属性:
行内样式:element.style(驼峰写法backgroundColor)
类名样式:element.className//适用于修改样式比较多
5. 获取属性值:
element.id(获取自身带有的属性,比如<div id = "test"></div>中的id是原本就有的)
element.getAttribute("id")(获取自定义的属性,比如<div data-index = "test"></div>就是自定义的)
【注】自定义属性的说明:它的出现是为了保存和使用数据,要用data-作为开头并且赋值,dataset是一个集合,存放了所有以data开头的属性,比如我们定义了一个data-index,那么就可以直接通过dataset.index去访问。
6. 更改属性值:
element.id = "新值"
element.setAttribute("属性","值")//主要针对自定义属性
7. 移除属性值:element.removeAttribute("属性")//主要针对自定义属性
四、操作页面节点元素(8种)
逻辑性更强!!!!
节点的3个属性:
nodeType:元素节点为1,属性节点2,文本节点3,文本包含文字空格换行等。
nodeName
nodeValue
1. 父节点:node.parentNode//得到的是亲爸爸,而不是叔叔,爷爷
2. 子节点:node.childNodes
【注】会获取所有的节点,包括文本(这个就很坑),所以用node.children(不会有副作用)
3. 获取首末子节点:先用firstChild和lastChild(包括文本),然后用firstElementChild和lastElementChild(但IE9才支持),最后用children[0]和children[node.children.length-1]
4. 兄弟节点:node.previousSibling和node.nextSibling(包括文本),所以用nextElementSibling和lastElementSibling
5. 动态创建节点:document.createElement('tagName');//创建之后要添加才有效果
6. 添加节点:node.appendChild(child);//添加到父节点的子节点列表末尾,类似于css的after
7. 删除节点:node.removeChild(child);
8. 复制节点:node.cloneNode();//这个括号为空或false时,称为浅拷贝,不会复制节点中的内容,为true时就为深拷贝。
【注】克隆之后记得使用node.appendChild()来添加!!!!
五、三种动态创建元素的区别
document.write()//使用较少,页面加载完毕后调用此方法,会导致页面的全部重绘。
element.innerHTML//元素写入法,拼接字符串时效率比较低,可以考虑使用数组
document.createElement()//节点创建法,结构清晰
六、DOM操作的一些小案例
<body>
<h3>案例1:分时问候,分时间显示不同的图片和问候语</h3>
<div class="example1">
<img src=" ">
</div>
<script>
var img = document.querySelector('img');
var date = new Date();
var second = date.getSeconds();
if(second<20){
img.src = './DOM/fengyun001.jpeg'
}
if(second>=20&&second<40){
img.src = './DOM/fengyun002.jpeg'
}
if(second>40){
img.src = './DOM/fengyun003.jpeg'
}
</script>
</body>
<body>
<h3>案例2:密码明文</h3>
<div class="example1">
<input type="password" name=" " id=" ">
<button>显示密码</button>
</div>
<script>
var btn = document.querySelector("button");
var pass = document.querySelector("input");
var flag = 0;//通过标志位来进行切换
btn.addEventListener('click',function(){
if(flag == 0){
pass.type = 'text';
btn.innerHTML = '隐藏密码';
flag = 1;
}
else{
pass.type = 'password';
btn.innerHTML = '显示密码';
flag = 0;
}
})
</script>
</body>
<body>
<h3>案例4:密码提示错误</h3>
<div class="example1">
<input type="text" name=" " >
<p>请输入6-8位密码</p>
</div>
<script>
var ptext = document.querySelector("p");
var pass = document.querySelector("input");
pass.addEventListener('blur',function(){
if(pass.value.length>=6 && pass.value.length<=8){
ptext.innerHTML = '验证通过';
ptext.style.color='green';
}
else{
ptext.innerHTML = '验证失败';
ptext.style.color='red';
}
})
</script>
</body>
<style>
body{
background: url() no-repeat ;
background-size: cover;
}
.example1{
display: flex;
justify-content: center;
}
h3 {
color:blueviolet;
text-align: center;
}
img{
width:200px;
margin:5px;
}
</style>
<body>
<h3>案例5:百度换肤</h3>
<div class="example1">
<img src="./DOM/fengjing001.jpg">
<img src="./DOM/fengjing002.jpg">
<img src="./DOM/fengjing003.jpeg">
</div>
<script>
var imgs = document.querySelectorAll('img');
for(var i = 0;i<imgs.length;i++){
imgs[i].addEventListener('mouseover',function(){
document.body.style.backgroundImage = 'url('+this.src+')';
})
}
</script>
</body>
<body>
<h3>案例6:表格各行变色</h3>
<div class="example1">
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>11</td>
<td>男</td>
<td>60</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>男</td>
<td>60</td>
</tr>
<tr>
<td>张三</td>
<td>13</td>
<td>男</td>
<td>60</td>
</tr>
<tr>
<td>张三</td>
<td>14</td>
<td>男</td>
<td>60</td>
</tr>
</tbody>
</table>
</div>
<script>
var trs = document.querySelector('tbody').querySelectorAll('tr');
for(var i =0;i<trs.length;i++){
trs[i].addEventListener('mouseover',function(){
this.style.backgroundColor = 'green';
}),
trs[i].addEventListener('mouseout',function(){
this.style.backgroundColor = 'white';
})
}
</script>
</body>
<body>
<h3>案例7:全选按钮</h3>
<div class="example1">
<table>
<thead>
<tr>
<th><input type="checkbox"></th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>11</td>
<td>男</td>
<td>60</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>12</td>
<td>男</td>
<td>60</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>13</td>
<td>男</td>
<td>60</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>14</td>
<td>男</td>
<td>60</td>
</tr>
</tbody>
</table>
</div>
<script>
var input1 = document.querySelector('thead').querySelector('input');
var input2 = document.querySelector('tbody').querySelectorAll('input');
input1.addEventListener('click',function(){
for(var i = 0; i<input2.length;i++){
input2[i].checked = this.checked;
}
})
</script>
</body>