一、 DOM查询节点
1.1 获取元素节点（通过document对象操作）
获取document对象下的元素节点(通过document对象操作)
1、var elem=document.getElementById("box")
根据id属性获取一个元素节点
2、var elems=document.getElementsByName("box")
根据name属性获取一组元素节点
3、var elems=document.getElementsByTagName("box")
根据标签名获取一组元素节点
4、var elems=document.getElementsByClassName("box")
根据class属性获取一组元素节点（有兼容性问题。IE8以上支持）
5、var elem=document.querySelector("CSS选择器")
根据css选择器来查询，只能查询一个元素节点对象。
该方法总是返回唯一一个元素。如果满足条件的有多个元素，则只会返回第一个。
var elems=document.querySelectorAll("CSS选择器")
根据css选择器来查询，可以查询多个元素节点对象。
该方法返回一个数组对象
>>>>>>根据document对象获取元素节点
//根据ID找元素
var box=document.getElementById("box");
//根据Class找到所有元素
var cc= document.getElementsByClassName("cc");
//根据name找到所有元素
var names=document.getElementsByTagName("p");
//根据标签名找到所有元素
var imgs=document.getElementsByTagName("img")
for(var i=0;i<imgs.length;i++){
imgs[i].src="1.jpg";
imgs[i].width="200";
imgs[i].height="200";
}
>>>>>>根据document对象获取元素节点（根据css选择器）
//根据css选择器获取元素对象。如果有多个，也只返回一个
var elem=document.querySelector(".ccc");
console.log(elem)
//根据css选择器获取元素对象。返回数组
var elems=document.querySelectorAll(".ccc");
console.log(elems)
>>>>>> 图片切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width:700px;
height:400px;
border:2px solid pink;
margin:20px auto;
position:relative;
}
.box .b1{
position:absolute;
top:auto;
bottom:0px;
left:0px;
right:0px;
width:200px;
height:50px;
margin:0px auto;
}
.box .b1 button{
width:35%;
height:70%;
background-color: rgba(39, 39, 212, 0.5);
margin-left:20px;
outline: none;
}
.box .b1 button:hover{
border-radius: 50%;;
}
img{
width:100%;
height:100%;
line-height: 0px;
}
</style>
<script>
var imgUrls=["1 (1).png","1 (2).png","1 (3).png"];
window.onload=function(){
var btn1=document.getElementsByClassName("btn1")[0];
var btn2=document.getElementsByClassName("btn2")[0];
var img=document.getElementsByTagName("img")[0];
var i=0;
btn1.onclick = function (){
i--;
if(i<0){
i=imgUrls.length-1;
}
img.src="./img/"+imgUrls[i];
}
btn2.onclick = function(){
i++;
if(i>=imgUrls.length){
i=0;
}
img.src="./img/"+imgUrls[i];
}
}
</script>
</head>
<body>
<div class="box">
<img src="./img/1 (1).png">
<div class="b1">
<button class="btn1">上一页</button>
<button class="btn2">下一页</button>
</div>
</div>
</body>
</html>
1.2 获取元素节点的子节点（通过元素对象操作）
获取元素节点下的子节点(通过具体的元素节点对象操作)
1、var objs=elem.getElementsByTagName("img");
获取当前节点下的指定标签名后代元素节点。
2、var objs=elem.childNodes;
获取当前节点的所有子节点。（包含文本节点）
var objs=elem.children;
获取当前节点的所有子元素节点。 （不包含包含文本节点）
（有兼容性问题。IE8以上支持）
3、var objs=elem.firstChild;
获取当前节点的第一个子节点。（包含文本节点）
var obj=nodeElem.firstElementChild;
获取当前节点的第一个子元素节点。（不包含文本节点）
（有兼容性问题。IE8以上支持）
3、var objs=elem.lastChild;
属性,获取当前节点的最后一个子节点
var objs=elem.lastElementChild;
属性,获取当前节点的最后一个子元素节点
>>>>>> 获取元素节点的子节点
<body>
<div class="ccc">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</body>
<script>
//根据css选择器获取元素对象。如果有多个，也只返回一个
var elem=document.querySelector(".ccc");
//获取元素节点的所有子节点
//包含文本节点。空白文本文本也是文本节点
var nodes=elem.childNodes;
console.log(nodes)
//获取元素节点的所有子元素节点
var elems=elem.children;
console.log(elems)
</script>
>>>>>> 获取元素节点的第一个子节点
<body>
<div class="ccc">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</body>
<script>
//根据css选择器获取元素对象。如果有多个，也只返回一个
var elem=document.querySelector(".ccc");
//获取元素节点的第一个子节点
//包含文本节点。空白文本文本也是文本节点
var node=elem.firstChild;
console.log(node)
//获取元素节点的第一个子元素节点
var elem=elem.firstElementChild;
console.log(elem)
</script>
>>>>>> 获取元素节点的最后个子节点
<body>
<div class="ccc">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</body>
<script>
//根据css选择器获取元素对象。如果有多个，也只返回一个
var elem=document.querySelector(".ccc");
//获取元素节点的最后一个子节点
//包含文本节点。空白文本文本也是文本节点
var node=elem.lastChild;
console.log(node)
//获取元素节点的最后一个子元素节点
var elem=elem.lastElementChild;
console.log(elem)
</script>
1.3 获取元素节点的父节点或兄弟节点（通过元素对象操作）
获取父节点或兄弟节点(通过具体的元素节点对象操作)
1、var obj=elem.parentNode;
获取当前节点的父节点
(父节点不可能是文本节点，父节点肯定就是元素节点)
2、var objs=elem.previousSibling;
获取当前节点的前一个兄弟节点（包含文本节点）
var objs=elem.previousElementSibling;
属性,获取当前节点的前一个兄弟元素节点 （不包含文本节点）
（有兼容性问题。IE8以上支持）
3、var objs=elem.nextSibling;
获取当前节点的后一个兄弟节点（包含文本节点）
var objs=elem.nextElementSibling;
获取当前节点的后一个兄弟元素节点（不包含文本节点）
（有兼容性问题。IE8以上支持）
>>>>>> 获取父节点
父节点一定是元素节点
<body>
<ul class="box">
<li>南京</li>
<li class="bj">北京</li>
</ul>
<script>
var li=document.querySelector("li");
//获取父节点
var box=li.parentNode;
console.log(box)
</script>
</body>
>>>>>> 获取兄弟节点
<body>
<ul class="box">
<li>南京</li>
<li class="bj">北京</li>
<li>徐州</li>
</ul>
<script>
var bj=document.querySelector(".bj");
var p1=bj.previousSibling; //获取前一个兄弟节点
console.log(p1)
var p1=bj.previousElementSibling; //获取前一个兄弟元素节点
console.log(p1)
var p2=bj.nextSibling; //获取后一个兄弟节点
console.log(p2)
var p2=bj.nextElementSibling; //获取后一个兄弟元素节点
console.log(p2)
</script>
</body>
1.4 DOM查询其他方法
var all=document.all; 获取所有的标签对象 , 元素节点对象
var all= document.getElementsByTagName("*")
var body=document.body 获取body标签对象
var body= document.getElementsByTagName("body")[0]
var html=document.documentElement 获取html标签对象
2.3.1 通过html标签属性找节点
//获取文档中所有的标签
var doc=document.all;
for(var i=0;i<doc.length;i++){
console.log(doc[i].nodeName)
}
//获取文档中所有带有href属性的标签对象
var links=document.links;
for(var i=0;i<doc.length;i++){
links[i].href="http://www.baidu.com"
}
//根据ID找元素
var box=document.getElementById("box");
//根据Class找到所有元素
var cc= document.getElementsByClass("cc");
//根据name找到所有元素
var names=document.getElementsByTagName("c2");
//根据标签名找到所有元素
var imgs=document.getElementsByTagName("img")
for(var i=0;i<imgs.length;i++){
imgs[i].src="1.jpg";
imgs[i].width="200";
imgs[i].height="200";
}
2.3.2 通过关系找节点
通过关系（父子关系、兄弟关系）
parentNode 获取当前元素的父节点
childNode 获取当前元素的所有下一级子元素
firseChild 获取当前元素的所有子元素的第一个。
nextSibling 获取当前节点的下一个节点 （兄弟节点）
previousSibling 获取当前节点的上一个节点（兄弟节点）
>>>>>> childNodes
childsNodes获取子节点时，会获取到空文本和注释
注意：
解析成DOM树时，script标签会被移入body标签中。
空文本也占一个#text 标签
注释占一个标签
获取body下的所有子标签，获取到5个标签。
<body >
<input type="checkbox" /> 电影<br/>
</body>
<script type="text/javascript">
var body=document.getElementsByTagName("body")[0];
var childs=body.childNodes;
for(var i=0;i<childs.length;i++){
console.log(childs[i])
}
</script>
二、 DOM增删改节点
+++ 创建DOM节点
var elem = docunemt.createElement("li"); 创建元素节点
var attr = document.createAttribute("xxx") 创建属性节点
var text = document.createTextNode("121"); 创建文本节点
+++ 增删改子节点
elem.appendChild(newNode) 追加子节点
elem.insertBefore(newNode,oldNode) 在指定节点的前面添加子节点
elem.replaceChild(newNode,oldNode) 执行新的节点替换老的节点
elem.removeChild(newNode) 删除节点
elem.parentChild.remove(elem) 自杀
parentElem.remove(elem) 他杀
+++ 其他
elem.setAttribute("属性名"，"属性值") 设置属性
elem.innerHTML="" 该方法也可以实现元素的增删改。
elem.innerText=""
1） DOM增删改操作
>>>>>> 追加节点
<body>
<ul class="box">
<li>南京</li>
</ul>
<button class="btn1">追加子元素</button>
<script>
var box=document.getElementsByClassName("box")[0]
var btn1=document.getElementsByClassName("btn1")[0]
btn1.onclick=function(){
//创建 北京 文本对象
var textNode=document.createTextNode("北京");
//创建li节点对象
var li=document.createElement("li");
li.appendChild(textNode)
//追加子元素
box.appendChild(li);
}
</script>
</body>
>>>>>> 在指定的节点前面追加节点
<body>
<ul class="box">
<li class="nj">南京</li>
</ul>
<button class="btn1">在南京前面追加子元素</button>
<script>
var box=document.getElementsByClassName("box")[0]
var nj=document.getElementsByClassName("nj")[0]
var btn1=document.getElementsByClassName("btn1")[0]
btn1.onclick=function(){
//创建 北京 文本对象
var textNode=document.createTextNode("北京");
//创建li节点对象
var li=document.createElement("li");
li.appendChild(textNode)
box.insertBefore(li,nj)
}
</script>
</body>
>>>>>> 替换节点
<body>
<ul class="box">
<li>南京</li>
<li class="bj">北京</li>
</ul>
<button class="btn1">替换北京元素</button>
<script>
var box=document.getElementsByClassName("box")[0]
var bj=document.getElementsByClassName("bj")[0]
var btn1=document.getElementsByClassName("btn1")[0]
btn1.onclick=function(){
//创建 xxx 文本对象
var textNode=document.createTextNode("新元素xxx");
//创建li节点对象
var li=document.createElement("li");
li.appendChild(textNode)
//追加子元素
box.replaceChild(li,bj);
}
</script>
</body>
>>>>>> 删除节点（他杀和自杀）
<body>
<ul class="box">
<li>南京</li>
<li class="bj">北京</li>
</ul>
<button class="btn1">删除北京元素</button>
<script>
var box=document.getElementsByClassName("box")[0]
var bj=document.getElementsByClassName("bj")[0]
var btn1=document.getElementsByClassName("btn1")[0]
btn1.onclick=function(){
//自杀
//bj.parentNode.removeChild(b);
//他杀
box.removeChild(bj);
}
</script>
</body>
>>>>>> 其他
2） 使用innerHTML也可以完成DOM增删改操作
1、使用DOM方法可以完成增删改操作，使用innerHTML也可以完成增删改操作。
2、两者区别:
使用DOM方法完成增删改操作，效率比较高，每次操作都只是针对一个元素。
使用innerHTML方法完成增删改操作，效率比较低，每次操作都会重新渲染标签内的元素。
3、推荐使用innerHTML和DOM方法结合方式操作DOM
>>>>>> 使用Dom方法完成增删改操作，效率高
<body>
<ul class="box">
<li>南京</li>
<li class="bj">北京</li>
</ul>
<button class="btn1">追加元素</button>
<script>
var box=document.getElementsByClassName("box")[0]
var btn1=document.getElementsByClassName("btn1")[0]
btn1.onclick=function(){
//创建li对象
var textNode=document.createTextNode("123");
var li=document.createElement("li");
li.appendChild(textNode);
//追加
box.appendChild(li)
}
</script>
</body>
>>>>>> 使用innerHTML完成增删改操作，效率低
<body>
<ul class="box">
<li>南京</li>
<li class="bj">北京</li>
</ul>
<button class="btn1">追加元素</button>
<script>
var box=document.getElementsByClassName("box")[0]
var btn1=document.getElementsByClassName("btn1")[0]
btn1.onclick=function(){
box.innerHTML += '<li>123</li>'
}
</script>
</body>
>>>>>> 推荐使用innerHTML和DOM方法结合方式操作DOM
<body>
<ul class="box">
<li>南京</li>
<li class="bj">北京</li>
</ul>
<button class="btn1">追加元素</button>
<script>
var box=document.getElementsByClassName("box")[0]
var btn1=document.getElementsByClassName("btn1")[0]
btn1.onclick=function(){
var li=document.createElement("li")
li.innerHTML='123';
box.appendChild(li)
}
</script>
</body>
3）应用案例
1、方式一: 使用DOM完成案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
.main{
width:700px;
margin:10px auto;
}
.list{
width:700px;
text-align: center;
}
.list td{
padding:10px;
}
.f{
border:2px solid black;
width:400px;
height:150px;
margin:0 auto;
margin-top:100px;
text-align: center;
}
.f td{
box-sizing: border-box;
}
.f input[type=button], .f input[type=reset]{
width:100px;
padding:5px 0px;
margin-left:20px;
}
</style>
</head>
<body>
<div class="main">
<table class="list" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>小红</td>
<td>12</td>
<td>男</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>小红</td>
<td>12</td>
<td>男</td>
<td><a href="javascript:;">删除</a></td>
</tr>
</table>
<table class="f" >
<form>
<caption>添加新员工</caption>
<tr>
<td>姓名</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" name="age"></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="sex" value="1"> 男<input type="radio" name="sex" value="0"> 女</td>
</tr>
<tr>
<td colspan="2"><input type="button" value="添加员工"> <input type="reset" value="重置"> </td>
</tr>
</form>
</table>
</div>
<script>
//给a绑定删除事件
function bindA(){
var delBtns = document.querySelectorAll(".list a")
for(var i=0;i<delBtns.length;i++){
delBtns[i].onclick=function(){
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)
}
}
}
//给a绑定删除事件
bindA();
//新增员工
var addUserBtn = document.querySelector(".f input[type=button]")
addUserBtn.onclick=function(){
var inputs = document.querySelectorAll(".f input");
var name=inputs[0].value;
var age=inputs[1].value;
var sex=inputs[2].checked?inputs[2].value:(inputs[3].checked?inputs[3].value:0);
//创建列
var nameTd=document.createElement("td");
nameTd.innerHTML=name;
var ageTd=document.createElement("td");
ageTd.innerHTML=age;
var sexTd=document.createElement("td");
sexTd.innerHTML=(sex==1?'男':'女');
var delTd=document.createElement("td");
delTd.innerHTML='<a href="javascript:;">删除</a>';
//创建行
var tr=document.createElement("tr");
tr.appendChild(nameTd);
tr.appendChild(ageTd);
tr.appendChild(sexTd);
tr.appendChild(delTd);
//将行元素添加到列表中
var list=document.getElementsByClassName("list")[0];
list.firstElementChild.appendChild(tr);
//重置表单
for(var i=0;i<3;i++){
inputs[i].value='';
}
//重新绑定事件
bindA();
}
</script>
</body>
</html>
2、方式二:使用innerHTML完成案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
.main{
width:700px;
margin:10px auto;
}
.list{
width:700px;
text-align: center;
}
.list td{
padding:10px;
}
.f{
border:2px solid black;
width:400px;
height:150px;
margin:0 auto;
margin-top:100px;
text-align: center;
}
.f td{
box-sizing: border-box;
}
.f input[type=button], .f input[type=reset]{
width:100px;
padding:5px 0px;
margin-left:20px;
}
</style>
</head>
<body>
<div class="main">
<table class="list" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>小红</td>
<td>12</td>
<td>男</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>小红</td>
<td>12</td>
<td>男</td>
<td><a href="javascript:;">删除</a></td>
</tr>
</table>
<table class="f" >
<form>
<caption>添加新员工</caption>
<tr>
<td>姓名</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" name="age"></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="sex" value="1"> 男<input type="radio" name="sex" value="0"> 女</td>
</tr>
<tr>
<td colspan="2"><input type="button" value="添加员工"> <input type="reset" value="重置"> </td>
</tr>
</form>
</table>
</div>
<script>
//给a绑定删除事件
function bindA(){
var delBtns = document.querySelectorAll(".list a")
for(var i=0;i<delBtns.length;i++){
delBtns[i].onclick=function(){
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)
}
}
}
//给a绑定删除事件
bindA();
var addUserBtn = document.querySelector(".f input[type=button]")
addUserBtn.onclick=function(){
var inputs = document.querySelectorAll(".f input");
var name=inputs[0].value;
var age=inputs[1].value;
var sex=inputs[2].checked?inputs[2].value:(inputs[3].checked?inputs[3].value:0);
var tr=document.createElement("tr");
tr.innerHTML=" <td>"+name+"</td>" +
" <td>"+age+"</td>" +
" <td>"+(sex==1?'男':'女')+"</td>" +
" <td><a href=\"javascript:;\">删除</a></td> ";
var list=document.getElementsByClassName("list")[0];
list.firstElementChild.appendChild(tr);
//重置表单
for(var i=0;i<3;i++){
inputs[i].value='';
}
//重新绑定事件
bindA();
}
</script>
</body>
</html>
三、 DOM操作CSS样式
3.1 读取或设置元素的行内样式
+++ 读取或设置元素的行内样式
元素.style.样式名 = 样式值
1) 如果CSS样式名中含有 【 - 】 ,则需将样式名转换为驼峰语法。
background-color == > div.style.backgroundColor
border-top-width == > div.style.borderTopWidth
2) 通过该方法设置或读取的样式都是行内样式。
a、无法读取样式表中样式。
b、无法覆盖 !important 样式
3) 用于读取当前元素的行内样式。如果没有设置值，则获取为空字符串。
>>>>>> 读取或设置元素的行内样式。
<div id="box" style="width:100px;height:100px;">
ss
</div>
<script>
var box=document.getElementById("box");
//设置元素的行内样式
box.style.width='200px';
box.style.backgroundColor="red";
//获取元素的行内样式
console.log( box.style.width) //200px
console.log( box.style.color) //''
console.log( box.style.backgroundImage) //''
</script>
>>>>>> 如果CSS样式名中含有 【 - 】 ,则需将样式名转换为驼峰语法。
<div id="box" style="width:100px;height:100px;"> </div>
<script>
var box=document.getElementById("box");
//设置元素的行内样式
box.style.width='200px';
box.style.backgroundColor="red";
box.style.borderTopStyle="solid";
box.style.borderTopWidth="10px";
</script>
>>>>>> 读取元素的行内样式。如果没有设置值，则获取为空字符串。
<head>
<style>
#box{
color:red;
}
</style>
</head>
<body>
<div id="box" style="width:100px;height:100px;background-color: red;"> </div>
<script>
var box=document.getElementById("box");
//读取行内样式，虽然内嵌标签里面有color属性，但是行内标签没有color属性，所以未''，即空字符串
console.log(box.style.color);
//读取行内样式
console.log(box.style.backgroundColor);
</script>
</body>
3.2 读取元素当前显示的样式
【所谓的显示样式,指的是浏览器最终使用的那个样式，即浏览器计算后的样式】
方式一:元素.currentStyle.样式名
1) 读取元素显示的样式。如果没有设置值，则会获取该样式的默认值。
比如：没有设置width,则会获取到width的默认值auto。
2) 只有IE浏览器支持，其余不支持
方式二:window.getComputedStyle(元素,null)
参数:
第一个参数:获取样式的元素对象
第二个参数: 一般传null
响应:
该方法返回一个对象，对象中封装了当前元素对应的样式 。
1) 读取元素显示的样式。如果没有设置值，则会读取该样式的真实的值，而不是默认值。
比如：没有设置width,则不会获取width的默认值auto，而是元素的真实的宽度。
2) 该方法是window的方法，可以省略window调用。getComputedStyle(元素,null)
3) 支持IE8以上浏览器，以及其他浏览器
1）元素.currentStyle.样式名
>>>>>> 读取元素显示的样式。而不是行内样式。
所谓显示的样式，即最终浏览器使用的样式，属于计算后的样式。
<head>
<style>
#box{
color:red;
border:10px solid red;
}
</style>
</head>
<body>
<div id="box" style="color:blue;"> </div>
<script>
var box=document.getElementById("box");
//用于读取元素当前显示的
console.log(box.currentStyle.color); //blue
//用于读取元素当前显示的值。如果没有设置值，则获取该样式的默认值
console.log(box.currentStyle.width); //auto
</script>
>>>>>> 读取元素显示的样式。如果没有设置值，则获取该样式的默认值。
<head>
<style>
#box{
color:red;
border:10px solid red;
}
</style>
</head>
<body>
<div id="box" style="color:blue;"> </div>
<script>
var box=document.getElementById("box");
//用于读取元素当前显示的值
console.log(box.currentStyle.color); //blue
//用于读取元素当前显示的值。如果没有设置值，则获取该样式的默认值
console.log(box.currentStyle.width); //auto
</script>
>>>>>> 只有IE版本浏览器支持，不支持其他浏览器
该属性只在IE版本浏览器中使用，其余的浏览器不适用。
2）getComputedStyle(元素,null)
>>>>>> getComputedStyle(元素,null)是window的方法
<script>
var box=document.getElementById("box");
//用于读取元素当前显示的值
console.log(window.getComputedStyle(box,numm).color); //blue
//用于读取元素当前显示的值
console.log(getComputedStyle(box,numm).color); //blue
</script>
>>>>>> 读取元素显示的样式。而不是行内样式。
虽然内嵌标签和行内标签都设置了color样式，但是浏览器最终使用了行内color样式。
<head>
<style>
#box{
color:red;
border:10px solid red;
}
</style>
</head>
<body>
<div id="box" style="color:blue;"> </div>
<script>
var box=document.getElementById("box");
// var styObj=window.getComputedStyle(box,null);
var styObj=getComputedStyle(box,null);
//用于读取元素当前显示的值
console.log(styObj.color); //blue
//用于读取元素当前显示的值
console.log(styObj.border); //10px solid rgb(255, 0, 0)
</script>
</body>
>>>>>> 用于读取元素当前显示的样式。如果没有设置值，则获取该样式的真实值
<head>
<style>
#box{
color:red;
border:10px solid red;
}
</style>
</head>
<body>
<div id="box" style="color:blue;"> </div>
<script>
var box=document.getElementById("box");
// var styObj=window.getComputedStyle(box,null);
var styObj=getComputedStyle(box,null);
//用于读取元素当前显示的值
console.log(styObj.color);
//用于读取元素当前显示的值,如果没有设置值，则获取该样式的真实值
console.log(styObj.width);
</script>
</body>
3）区别【元素.currentStyle.样式名 与 getComputedStyle() 的区别】
元素.currentStyle.样式名
1) 只支持IE浏览器
2) 读取元素当前显示的样式。如果没有设置，则读取该样式默认的值。
【比如元素没有设置width,获取width显示值，则获取的是 auto。】
getComputedStyle() 支持IE8以上浏览器和其他浏览器。
1) 支持IE8以上浏览器和其他浏览器
2) 读取元素当前显示的样式。如果没有设置，则读取该样式真实的值，而不是默认值。
【比如元素没有设置width,获取width显示值，则获取的是元素的真实宽度，而不是width】
>>>>>> 元素.currentStyle.样式名。读取的样式没有设置，则获取的是样式的默认值
<div id="box" style="color:blue;"> </div>
<script>
var box=document.getElementById("box");
//读取元素显示的样式值。如果没有设置该样式，则获取的是样式的默认值
console.log(box.currentStyle.width); //auto
console.log(box.currentStyle.color); //blue
</script>
>>>>>>getComputedStyle() 。读取的样式没有设置，则获取的是样式的真实值，而不是样式的默认值
<div id="box" style="color:blue;"> </div>
<script>
var box=document.getElementById("box");
//读取元素显示的样式值。如果没有设置该样式，则获取的不是样式的默认值，而是样式的真实值
console.log(getComputedStyle(box,null).width); //
console.log(getComputedStyle(box,null).color); //blue
</script>
4）读取元素当前显示的样式【兼容写法】
<div id="box" style="color:blue;"> </div>
<script>
//读取元素显示的样式，兼容性写法
function getStyle(obj,name){
//如果使用if(getComputedStyle)则如果不兼容会报错。
//原因：访问变量不存在则会报错，返回对象的属性不存在，会返回undefined
if(window.getComputedStyle){
//IE8以上浏览器或其他浏览器有该属性
return window.getComputedStyle(obj,null)[name];
}else{
//IE8以下浏览器没有该属性
return obj.currentStyle[name];
}
}
console.log(getStyle(box,'width'))
</script>
3.3 读取元素滚动状态的大小
+++ 读取元素滚动状态的大小
elem.clientHeight
elem.clientWidth 返回元素可见区域的大小（排除滚动栏所占的大小）。类比为相框的大小
1、返回的值是不带px的数字，可参与计算。
2、包括内容区、内边距
elem.scrollWidth
elem.scrollHeight 返回元素滚动区域的大小（排除滚动栏所占的大小）。类比为画布的大小
1、返回的值是不带px的数字，可参与计算。
2、包括内容区、内边距
elem.offsetHeight
elem.offsetWidth 返回元素完整的大小。
1、返回的值是不带px的数字，可参与计算。
2、包括内容区、内边距
+++ 读取元素滚动条滚动的距离
elem.scrollLeft 获取水平滚动条滚动的距离
elem.scrollTop 获取垂直滚动条滚动的距离
+++ 滚动条等式
滚动区域的大小-可见区域的大小=滚动的距离
//满足此等式，则代表垂直滚动条到底了
1、elem.scrollHeight - elem.scrollTop=elem.clientHeight
//满足此等式，则代表水平滚动条到底了
2、elem.scrollWidth - elem.scrollLeft=elem.clientWidth
1）读取元素不同状态的大小
元素可见区域的大小指的就是相框的大小。
元素滚动区域的大小指的就是画布的大小。
元素完整的大小指的就是元素本身的大小。
>>>>>> 元素可见区域的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width:500px;
height:500px;
background-color: red;
overflow: auto;
}
.box2{
width:200px;
height:700px;
background-color: blue;
}
</style>
<script>
window.onload=function(){
var btn = document.getElementsByClassName("btn")[0]
var box = document.getElementsByClassName("box")[0]
btn.onclick=function(){
console.log("元素可见区域的大小")
console.log(box.clientHeight);
console.log(box.clientWidth);
}
}
</script>
</head>
<body>
<button class="btn">获取大小</button>
<div class="box">
<div class="box2"></div>
</div>
</body>
</html>
>>>>>> 元素滚动区域的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width:500px;
height:500px;
background-color: red;
overflow: auto;
}
.box2{
width:200px;
height:700px;
background-color: blue;
}
</style>
<script>
window.onload=function(){
var btn = document.getElementsByClassName("btn")[0]
var box = document.getElementsByClassName("box")[0]
btn.onclick=function(){
// console.log("元素可见区域的大小")
// console.log(box.clientHeight);
// console.log(box.clientWidth);
console.log("元素滚动区域的大小")
console.log(box.scrollHeight);
console.log(box.scrollWidth);
}
}
</script>
</head>
<body>
<button class="btn">获取大小</button>
<div class="box">
<div class="box2"></div>
</div>
</body>
</html>
>>>>>> 元素完整的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width:500px;
height:500px;
background-color: red;
overflow: auto;
}
.box2{
width:200px;
height:700px;
background-color: blue;
}
</style>
<script>
window.onload=function(){
var btn = document.getElementsByClassName("btn")[0]
var box = document.getElementsByClassName("box")[0]
btn.onclick=function(){
// console.log("元素可见区域的大小")
// console.log(box.clientHeight);
// console.log(box.clientWidth);
console.log("元素完整的大小")
console.log(box.offsetHeight);
console.log(box.offsetWidth);
}
}
</script>
</head>
<body>
<button class="btn">获取大小</button>
<div class="box">
<div class="box2"></div>
</div>
</body>
</html>
2）读取滚动条滚动的距离
elem.scrollLeft 获取水平滚动条滚动的距离
elem.scrollTop 获取垂直滚动条滚动的距离
1、垂直滚动条滚动到底了
elem.scrollHeight - elem.scrollTop=elem.clientHeight //垂直滚动条到底了
2、水平滚动条滚动到底了
elem.scrollWidth - elem.scrollLeft=elem.clientWidth //水平滚动条到底了
>>>>>> 读取垂直滚动条滚动的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width:500px;
height:500px;
background-color: red;
overflow: auto;
}
.box2{
width:200px;
height:700px;
background-color: blue;
}
</style>
<script>
window.onload=function(){
var btn = document.getElementsByClassName("btn")[0]
var box = document.getElementsByClassName("box")[0]
btn.onclick=function(){
//获取垂直滚动条滚动的距离
console.log(box.scrollTop);
//获取水平滚动条滚动的距离
// console.log(box.scrollLeft);
}
}
</script>
</head>
<body>
<button class="btn">获取大小</button>
<div class="box">
<div class="box2"></div>
</div>
</body>
</html>
>>>>>> 读取水平滚动条滚动的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width:500px;
height:500px;
background-color: red;
overflow: auto;
}
.box2{
width:700px;
height:200px;
background-color: blue;
}
</style>
<script>
window.onload=function(){
var btn = document.getElementsByClassName("btn")[0]
var box = document.getElementsByClassName("box")[0]
btn.onclick=function(){
//获取垂直滚动条滚动的距离
// console.log(box.scrollTop);
//获取水平滚动条滚动的距离
console.log(box.scrollLeft);
}
}
</script>
</head>
<body>
<button class="btn">获取大小</button>
<div class="box">
<div class="box2"></div>
</div>
</body>
</html>
3）滚动条等式
>>>>>> 满足垂直滚动条等式，则代表滚动到底了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width:500px;
height:500px;
background-color: red;
overflow: auto;
}
.box2{
width:200px;
height:700px;
background-color: blue;
}
</style>
<script>
window.onload=function(){
var box = document.getElementsByClassName("box")[0]
box.onscroll=function(){
if(box.scrollHeight-box.clientHeight == box.scrollTop){
alert("滚动到底了")
}
}
}
</script>
</head>
<body>
<button class="btn">获取大小</button>
<div class="box">
<div class="box2"></div>
</div>
</body>
</html>
>>>>>> 满足水平滚动条等式，则代表滚动到底了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width:500px;
height:500px;
background-color: red;
overflow: auto;
}
.box2{
width:700px;
height:200px;
background-color: blue;
}
</style>
<script>
window.onload=function(){
var box = document.getElementsByClassName("box")[0]
box.onscroll=function(){
if(box.scrollWidth-box.clientWidth == box.scrollLeft){
alert("滚动到底了")
}
}
}
</script>
</head>
<body>
<button class="btn">获取大小</button>
<div class="box">
<div class="box2"></div>
</div>
</body>
</html>
4）应用案例
在注册时，我们必须下滑到最后，才可以点击
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width:800px;
margin:10px auto;
}
.tw{
width:700px;
height:500px;
overflow: auto;
margin-bottom:20px;
}
</style>
<script>
window.onload=function(){
var box=document.getElementsByClassName("tw")[0];
var input=document.getElementsByTagName("input")[0]
box.onscroll=function(){
if(box.scrollHeight-box.clientHeight==box.scrollTop){
input.disabled=false;
input.focus();
alert("到底了")
}
}
}
</script>
</head>
<body>
<div>
<h1>欢迎亲爱的用户注册</h1>
<div class="tw">
你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热你好的你在我行注册的额热热热</div>
</div>
<div>
<input type="checkbox" disabled="true"> 我已阅读并同意该注册条纹
</div>
</div>
</body>
3.4 其他
elem.offsetParent
返回开启了定位的离自己最近的祖先元素。
如果没有，则返回body。
elem.offsetLeft
elem.offsetTop 当前元素相对于定位元素的偏移量
<style>
#box1{
width:200px;
height:200px;
background-color: red;
position: relative;
}
#inner{
width:50px;
height:50px;
background-color: blue;
position: relative;
top:10px
}
</style>
<script>
window.onload=function(){
var inner=document.getElementById("inner");
var pp=inner.offsetParent;
console.log(pp);
console.log(inner.offsetLeft)
console.log(inner.offsetTop);
}
</script>
<body>
<div id="box1">
<div id="inner"></div>
</div>
</body>
四、DOM操作注意事项
1）元素绑定事件函数，事件函数中this指向的是绑定该函数的元素对象
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var liElems=document.getElementsByTagName("li");
for(var i=0;i<liElems.length;i++){
liElems[i].onclick=function(){
console.log(this)
}
}
</script>
2）在for循环中绑定事件函数，索引值不能直接使用。
在for循环中绑定事件函数，索引值不能直接使用。
原因:for循环是在页面加载时执行,事件函数是在事件触发时执行。
当事件函数执行时，for循环早就已经执行完毕了。此时索引值就是个固定值。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var liElems=document.getElementsByTagName("li");
//for循环在页面加载后立即执行
//元素绑定的事件函数是在触发事件时才会执行。
//当事件函数执行时，for循环早就执行完毕。
for(var i=0;i<liElems.length;i++){
liElems[i].onclick=function(){
console.log(i)
}
}
</script>
2）取消超链接默认行为，即阻止跳转。
点击超链接以后，超链接默认会跳转页面。
如果我不希望出现默认行为，则使用
<a href="javascript:;">
4）DOM新增的节点如果想绑定事件，则需手动绑定。
四、其他
onscroll 事件
elem.focus() 获取焦点
elem.disabled=false; 可以设置元素是否禁用
三、应用案例
删除节点
<body>
<input type="button" value="新增按钮" onclick="add()"/>
</body>
<script type="text/javascript">
var num=0;
//创建节点
function add(){
var ins=document.createElement("input");
ins.setAttribute("type","button");
ins.setAttribute("value","按钮"+(num++));
var body=document.getElementsByTagName("body")[0];
body.appendChild(ins);
}
</script>
>>>>>> 插入节点
<body>
<table>
<tr>
<td><input type="file" /></td>
<td> <a href="#" >删除附件</a></td>
</tr>
<tr id="b">
<td><input type="button" onclick="add()" value="添加附件"/> </td>
</tr>
</table>
</body>
<script type="text/javascript">
var num=0;
//创建节点
function add(){
var input=document.createElement("input");
input.setAttribute("type","file");
var a=document.createElement("a");
a.innerHTML="删除附件";
var td1=document.createElement("td");
td1.appendChild(input);
var td2=document.createElement("td");
td2.appendChild(a);
var tr=document.createElement("tr");
tr.appendChild(td1);
tr.appendChild(td2);
var table=document.getElementsByTagName("tbody")[0];
var old=document.getElementById("b");
table.insertBefore(tr,old);
}
</script>
>>>>>> 删除节点
<body>
<table>
<tr>
<td><input type="file" /></td>
<td> <a href="#" onclick="remove(this)">删除附件</a></td>
</tr>
<tr id="b">
<td><input type="button" onclick="add()" value="添加附件"/> </td>
</tr>
</table>
</body>
<script type="text/javascript">
var num=0;
//创建节点
function add(){
var input=document.createElement("input");
input.setAttribute("type","file");
var a=document.createElement("a");
a.innerHTML="删除附件";
a.setAttribute("href","#");
a.setAttribute("onclick","remove(this)");
var td1=document.createElement("td");
td1.appendChild(input);
var td2=document.createElement("td");
td2.appendChild(a);
var tr=document.createElement("tr");
tr.appendChild(td1);
tr.appendChild(td2);
var table=document.getElementsByTagName("tbody")[0];
var old=document.getElementById("b");
table.insertBefore(tr,old);
}
function remove(obj){
var o=obj.parentNode.parentNode.parentNode;
var o2=obj.parentNode.parentNode;
o.removeChild(o2)
}
</script>
>>>>>> removeChild在循环中的用法
removeChild在删除父类的子元素集合时，子元素集合的长度也发生变化，所以不能使用常规的for循环。可以使用下面的方法清空子元素集合。
<body>
<select onchange="clean(this)">
<option>江苏</option>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
</body>
<script type="text/javascript">
function clean(obj){
var arr=obj.childNodes;
//特殊用法
for(var i=0;i<arr.length;){
obj.removeChild(arr[i])
}
}
</script>
2.5 其他细节
2.5.1 Select标签对象 – 下拉框
select标签对象应与onchange事件进行绑定。用户选定选项时，触发事件。
select标签对象的属性selectedIndex，用于获取选定选项的索引值。
<body>
<select >
<option>江苏</option>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
</body>
<script type="text/javascript">
var sel=document.getElementsByTagName("select")[0];
sel.onchange=function(){
console.log(sel.selectedIndex)
}
</script>
清空select中的内容
方式一：
<body>
<select >
<option>江苏</option>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
</body>
<script type="text/javascript">
var sel=document.getElementsByTagName("select")[0];
sel.onchange=function(){
sel.options.length=0; //清空option
}
</script>
方式二：
<body>
<select >
<option>江苏</option>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
</body>
<script type="text/javascript">
var sel=document.getElementsByTagName("select")[0];
sel.onchange=function(){
var arr=sel.childNodes;
for(var i=0;i<arr.length;){
sel.removeChild(arr[i])
}
}
</script>
2.5.2 table的特殊之处
一个表格至少有一个tbody，即使我们没有加上该标签，浏览器在解析时，也会加上该标签。所以我们在查找table中元素的父元素时，要特殊处理。
我们在写一个表格时，固定格式为
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
浏览器解析格式为:
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
2.6 函数中this的用法
函数中直接使用this关键字，this指向的是window对象；
函数中传入this关键字，this指向的是绑定该方法的对象。
>>>>>> 通过JS注册事件，关联方法的this对象指的是被绑定的对象本身
<body>
<input type="button" id="s1">
<script type="text/javascript">
document.getElementById("s1").onclick=function(){
console.log(this);
}
</script>
</body>
>>>>>> 直接在HTML注册事件，关联方法的this对象指的是window对象
函数中直接使用this关键字，由于this指向的是window对象，没有parentNode属性，所以报错。
<body>
<input type="button" id="s1" onclick="demo()" value="点击">
<script type="text/javascript">
function demo(){
console.log(this);
}
</script>
</body>
>>>>>> 直接在HTML注册事件，并传入this关键字，this指向的是被绑定的对象本身。【方法一定要有参数】
<body>
<input type="button" value="删除" onclick="remove(this)" />
</body>
<script type="text/javascript">
function remove(obj){
console.log(obj)
var o=obj.parentNode;
o.removeChild(obj)
}
</script>
2.6 操作CSS样式
>>>>>> 借助文档，操作CSS样式
span.style.font="12px";
div.style.backgroundColor="red";
js操作css样式，是使用style属性来进行操作。我们应根据开发者文档来进行查看。
>>>>>> 模拟四位验证码
<body>
<span></span><br/>
<input type="button" style="width:100px;background-color:pink;" value="看不清，换一个">
</body>
<script type="text/javascript">
var span=document.getElementsByTagName("span")[0];
var bu=document.getElementsByTagName("input")[0];
bu.onclick=function(){
var arr=["a","b","我","是","谁","c"];
console.log(arr)
var str="";
for(var i=0;i<4;i++){
var index=Math.floor(Math.random()*arr.length)
str+=arr[index];
}
console.log(str)
span.innerHTML=str;
//js操作css样式
span.style.fontSize="14px";
span.style.color="red";
span.style.backgroundColor="black";
span.style.textDecoration="line-through"
}
</script>
三、其他
3.1 下拉框绑定的事件
下拉框推荐绑定onchangge事件。即当下拉框选择后触发
<select id="s">
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>徐州</option>
</select>
<script type="text/javascript">
document.getElementById("s").onchange=function(){
}
</script>
3.2 获取下拉框选定的值
3.2.1 直接获取下拉框选中的对象的value值
<select id="s">
<option >选择城市</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="xz">徐州</option>
</select>
<script type="text/javascript">
document.getElementById("s").onchange=function(){
var v=this.value;
alert(v)
}
</script>
3.2.2 直接获取下拉框的选中的对象
<select id="s">
<option >选择城市</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="xz">徐州</option>
</select>
<script type="text/javascript">
document.getElementById("s").onchange=function(){
var index=this.selectedIndex;
console.log(this[index])
}
</script>
三、案例：二级联动
<body>
省份 <select onchange="showcity(this)">
<option>江苏</option>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
城市 <select>
<option>城市</option>
</select>
</body>
<script type="text/javascript">
function showcity(obj){
var cityss=[["南京","徐州","邳州"],["黑将","三墩镇"]];
//获取下拉框选中的索引值
var index=obj.selectedIndex;
var citys=cityss[index];
var ins=document.getElementsByTagName("select")[1];
//清空ins中的城市
var cs=ins.childNodes;
console.log(cs);
for(var i=0;i<cs.length;){
ins.removeChild(cs[0])
}
console.log(cs)
//添加ins中的城市
for(var i=0;i<citys.length;i++){
var opt=document.createElement("option");
opt.innerHTML=citys[i];
ins.appendChild(opt);
}
}
</script>
3774
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
