获取节点
1,通过document对象中的方法获取指定节点 2,通过节点元素本身的位置获取父、子、兄弟节点
document.getElementById();//id名 document.getElementsByTagName();//标签名 document.getElementsByClassName();//类名 document.getElementsByName();//name document.querySelector();//css选择符模式,返回与该模式匹配的第一个元素,结果为一个元素;如果没找到匹配的元素,则返回null document.querySelectorAll()//css选择符模式,返回与该模式匹配的所有元素,结果为一个元素列表(类数组)
innerHTML属性
类数组
是一种特殊的对象,以数组的方式呈现出来 函数参数列表也是一种类数组,例如都没有push等操作数组方法。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.myClass{
background-color: red;
}
body{
font-size: 40px;
}
</style>
</head>
<body>
<div id = "myDiv1">
我在mydiv1中
<p class="myClass" id = "myP1">我在myP1中</p>
<ul id = "ul1">
<li class="myClass" id="li1">1</li>
<li id = "li2">2</li>
<li id = "li3">3</li>
</ul>
</div>
<script>
// var mydiv1 = document.getElementById("myDiv1");//这里就是获取myDiv1
// console.log(mydiv1.innerText);// = "我是修改后的mydiv1中的内容";
// //----------------
// var liList = document.getElementsByTagName("li");
// for(var i = 0; i < liList.length; i++)
// {
// liList[i].innerText = "我是第"+i+"个li";
// }
// //----------------
// var classList = document.getElementsByClassName("myClass");
// for(var i = 0; i < classList.length; i++)
// {
// classList[i].innerText = "我是使用class的第"+i+"个元素"
// }
//-------------------
var bodyNode = document.querySelectorAll(".myClass");
console.log(bodyNode);
console.log(bodyNode[0].innerHTML);
console.log(bodyNode[1].innerHTML);
</script>
</body>
</html>