目录
1.元素节点
innerHTML 获取元素节点标签间的内容
id； className ；tagName 获取元素节点的标签名；name
1.1Id节点
document.getElementById("div1");
1.2 TagName节点
document.getElementByTagName
参数：标签名
功能：获取当前页面上所有符合该标签名标准的元素节点
返回值：数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementsByTagName("li");
alert(oDiv);//[object HTMLCollection]
alert(oDiv.length);//8
var oli=document.getElementById("ul1");
var oLi=oli.getElementsByTagName("li");
alert(oLi.length);//4
for(var i=0;i<oLi.length;i++){
alert(oLi[i].innerHTML);// 1111 333 444 555
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>11111</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
<ol>
<li>11111</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ol>
</body>
</html>1.3 Name节点
document.getElementsByName()
参数：name的值
返回值：数组
只有文本输入框的元素节点才有
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementsByName("hello");
alert(oDiv.length);
}
</script>
</head>
<body>
<div name="hello">
</div>
<span name="hello"></span>
<input name="hello">
</body>
</html>1.4 ClassName节点
document.getElementsByClassName()
参数：calss
返回值：数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementsByClassName("box");
alert(oDiv.length);
}
</script>
</head>
<body>
<ul id="ul1">
<li>11111</li>
<li class="box">333</li>
<li>444</li>
<li>555</li>
</ul>
<ol>
<li>11111</li>
<li class="box">333</li>
<li>444</li>
<li class="box">555</li>
</ol>
</body>
</html>1.5 封装函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <style>
#div1{
background-color: red;
width:300px;
}
</style> -->
<script type="text/javascript">
//封装函数简化操作，css选择器,id,.className,tagName,name=xxx,
function $(vArg){
switch(vArg[0]){
case "#"://id
return document.getElementById(vArg.substring(1));
break;
case "."://className
return document.getElementsByClassName(vArg.substring(1));
break;
default:
var str=vArg.substring(0,5);
if(str=="name="){
return document.getElementsByName(vArg.substring(5));
}else{
return document.getElementsByTagName(vArg);
}
break;
}
}
window.onload=function(){
alert($("#div1").innerHTML);
alert($(".box").length);
alert($("div").length);
alert($("name=hello").length);
}
</script>
</head>
<body>
<div id="div1">11111</div>
<div class="box">222</div>
<div class="box">3333</div>
<div name="hello">4444</div>
</body>
</html>2.获取当前样式
getComputedStyle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#div1{
background-color: red;
width:300px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");
// alert(oDiv.stytle.width);
//获取当前有效样式
alert(getComputedStyle(oDiv)["width"]);
}
</script>
</head>
<body>
<div id="div1" ></div>
</body>
</html>3.操作当前节点元素
setAttribute，removeAttribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--
set/getAttribute()
removeArribute()
操作当前元素节点中某个属性
-->
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");
oDiv.setAttribute("title","xxx");
oDiv.removeAttribute("name");
}
</script>
</head>
<body>
<div id="div1" title="hello" name="world" class="box">11111</div>
</body>
</html>