python之路_前端基础之JS（3）
DOM(document object model)对象把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树)，定义了访问和操作HTML文档的标准方法。
一、查找标签
1、直接查找标签
总共有如下四种直接查找的方式：
document.getElementById(“idname”) //通过id名 document.getElementsByTagName(“tagname”) //通过标签名 document.getElementsByName(“name”) //通过name名 document.getElementsByClassName(“name”) //通过class名
上述四种查找中，因为id的唯一性，得到结果就是对应标签对象。但是对于其他三种方式，因为其不唯一性，得到是包含满足条件的对象数组，通过数组索引可以取到相应的element对象，注意即使结果就一个对象，它也是一个对象数据。
<body>
<div id="div1">
<div class="div2">i am div2</div>
<div name="yuan">i am div2</div>
<div id="div3">i am div2</div>
<p>hello p</p>
</div>
<script>
/*通过document对象可以查找任何级别的对象*/
var div1=document.getElementById("div1");
/*通过查找到的element对象（必须是id对象）查找其子级标签时，不支持通过id和name查找*/
//支持;
var ele= div1.getElementsByTagName("p");
alert(ele.length);
//支持
var ele2=div1.getElementsByClassName("div2");
alert(ele2.length);
//不支持
var ele3=div1.getElementById("div3");
alert(ele3.length);
//支持
var ele3_=document.getElementById("div3");
console.log(ele3_)
//不支持
var ele4=div1.getElementsByName("yuan");
alert(ele4.length)
//支持
var ele4_=document.getElementsByName("yuan")
alert(ele4_.length)
</script>
</body>
</html>
2、导航查找
导航查找即是通过通过某个标签定位其他标签，主要属性如下：
'''
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nexElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
'''
实例如下：
<script> var ele1=document.getElementById("div1"); var child=ele1.children; alert(child.length) ; //结果为4，得到是一个对象数组 var first=ele1.firstElementChild; console.log(first); //得到第一个孩子对象：<div class="div2">i am div2</div> var last=ele1.lastElementChild; console.log(last); //得到最后一个孩子对象： <p>hello p</p> var ele2=document.getElementById("div3"); var parent=ele2.parentElement; console.log(parent); //获得父级对象 var next=ele2.nextElementSibling; console.log(next); //得到下一个紧挨的兄弟对象：<p>hello p</p> var privous=ele2.previousElementSibling; console.log(privous); //得到上一个紧挨的兄弟对象：<div name="yuan">i am div2</div> </script>
二、标签操作
1、文本操作
取值操作：
innerText主要取得元素内的纯文本内容，而innerHTML则取得元素内包含所有的东西，包含文本和子元素，实例如下：
<body>
<div class="c1">
<span>hello</span>
</div>
<script>
var ele=document.getElementsByClassName("c1")[0];
console.log(ele.innerText); //输出结果为：hello
console.log(ele.innerHTML); //输出结果为：<span>hello</span>
</script>
</body>
赋值操作：
如下两种赋值，均是首先对标签内的所有的内容（包含子标签）进行清空，然后将进行赋值，不同的是innerText赋值的内容中即使有标签的内容，标签也会当做文本显示，即不识别标签，而innerHTML会识别标签，只显示文本内容，实例如下：
<body>
<div class="c1">
<span>hello</span>
</div>
<script>
var ele=document.getElementsByClassName("c1")[0];
ele.innerText="<a href=\"\">hello</a>"; //屏幕显示：“<a href="">hello</a>”
ele.innerHTML="<a href=\"\">hello</a>"; //屏幕显示：“hello”，<a>还是标签
</script>
</body>
2、属性操作
包括属性的设置和获取，实例如下：
<body>
<div class="c1 c2" id="d1">egon</div>
<script>
var ele=document.getElementsByClassName("c1")[0];
// 原生JS支持：
console.log(ele.getAttribute("class")); //获得class属性名：c1 c2
ele.setAttribute("egon","周末"); //设置属性：egon=周末
// DHTML语法：
console.log(ele.id); //获得id属性名：d1
ele.id="d2"; //设置属性：id=d2
</script>
</body>
3、class操作
包含获取class属性的名字、增加class名字和移除class名字，结合css，可以控制布局效果，应用实例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color: red;
}
.c2{
background-color: green;
}
.c3{
line-height: 60px;
}
</style>
</head>
<body>
<div class="c1 c2">egon</div>
<script>
var ele=document.getElementsByClassName("c1")[0];
console.log(ele.className); // "c1 c2"
ele.classList.add("c3"); //将c3加入到class属性下，实现c3的css效果
ele.classList.remove("c2"); //将c2从class属性下移除，去除c2的css效果
</script>
</body>
</html>
4、改变css
通过：element.style.css属性=“属性值”，语法设置改变css，实例如下：
<body>
<p id="d1">hello</p>
<button>change</button>
<script>
var ele_button=document.getElementsByTagName("button")[0];
var ele_p=document.getElementById("d1");
/* 给button按钮绑定一个事件，点击后，设置css中的color和fonsize属性*/
ele_button.onclick=function () {
ele_p.style.color="red";
ele_p.style.fontSize="24px"
}
</script>
</body>
5、获取选中value值
应用实例如下：
<body>
<form action="">
<input type="text" id="user" value="123">
<select name="pro" id="s1">
<option value="1">111</option>
<option value="2">222</option>
<option value="3">333</option>
</select>
</form>
<script>
var ele_user=document.getElementById("user");
console.log(ele_user.value);//123
ele_user.value="hello"; //更改value值
var ele_s1=document.getElementById("s1");
console.log(ele_s1.value) //当前选中对应的value值
</script>
</body>
三、绑定事件
1、事件类型
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开
onselect 文本被选中。
onsubmit 确认按钮被点击。
2、绑定事件
方式一：在标签内设置事件类型，让其调用相应的函数。将如下左侧菜单应用实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.left{
float: left;
width: 20%;
height: 800px;
background-color: #c0cddf;
}
.right{
float: left;
width: 80%;
height: 800px;
background-color: #9add7f;
}
.item{
padding: 10px;
}
.title{
padding: 10px;
color: white;
background-color: #2459a2;
text-align: center;
}
.con{
padding: 5px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="left">
<div class="item">
<div class="title" onclick=fool(this)>菜单一</div>
<div class="con">
<p>111</p>
<p>111</p>
<p>111</p>
</div>
</div>
<div class="item">
<div class="title" onclick=fool(this)>菜单二</div>
<div class="con hide">
<p>222</p>
<p>222</p>
<p>222</p>
</div>
</div>
<div class="item">
<div class="title" onclick=fool(this)>菜单三</div>
<div class="con hide">
<p>333</p>
<p>333</p>
<p>333</p>
</div>
</div>
</div>
<div class="right"></div>
<script>
function fool(self) {
self.nextElementSibling.classList.remove("hide");
var ele_title=document.getElementsByClassName("title");
for (var i=0;i<ele_title.length;i++){
if(ele_title[i]!=self){
ele_title[i].nextElementSibling.classList.add("hide");
}
}
}
</script>
</body>
</html>
方式二：通过如下形式：“标签对象.事件类型=function(){}”，绑定事件，触动事件时执行function函数，应用实例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li class="item">111</li>
<li class="item">222</li>
<li class="item">333</li>
</ul>
<script>
var ele=document.getElementsByClassName("item");
for (var i=0;i<ele.length;i++){
ele[i].onclick=function() {
alert(this.innerText) //this不可以使用ele[i]代替，for循环只是完成了事件的绑定，并未触动事件，当抽动事件的时候i=3
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号