獲得元素的幾種方法,和dom中常用的事件
阿新 • • 發佈：2018-11-01
//通過id來獲取元素 使用document.getElementsById("id名") 來獲取元素
//返回值為一個元素的物件
<body> <input type="button" value="修改列表背景顏色" id="btn"> <ul id="ul1"> <li>列表</li> <li>列表</li> <li>列表</li> <li>列表</li> </ul> <script> var btnObj = document.getElementById("btn"); btnObj.onclick = function(){ document.getElementById('ul1').style.backgroundColor = 'red'; } </script>
//通過標籤名來獲取元素 tagName 使用document.getElementsByTagName("標籤名")
//返回一個nodeList陣列物件,通過對陣列進行遍歷 可以對陣列中的元素物件進行操作
//通過name屬性來獲得元素, 使用document.getElementsByName("name的屬性值")方法獲取元素
//返回的是一個偽陣列
<body> <input type="text" name="abc" value="請輸入"> <script> var liObj = document.getElementsByName("abc")[0]; //getElementsByName()方法 返回的是一個數組 console.log( liObj.getAttribute("value")); alert(liObj.value); </script> </body>
//通過類來獲得元素,使用document.getElementsByClassName("類樣式的名字)
//返回的是一個偽陣列
<style> .box{ width: 100px; height: 100px; background: red; } </style> </head> <body> <div class="box">這是第一個盒子</div> <div class="box">這是第二個盒子</div> <div class="box">這是第三個盒子</div> <div class="box">這是第四個盒子</div> <div class="box">這是第五個盒子</div> <script> var boxObj = document.getElementsByClassName("box"); for (var i = 0; i < boxObj.length; i++){ // alert(boxObj[i].innerHTML); //為每個盒子新增點選事件 boxObj[i].onclick = function(){ this.style.backgroundColor = "green"; } } </script>
//document.querySelector("選擇器的名字")
//返回一個元素物件
//document.querySelectorAll("選擇器的名字")
//返回一個偽陣列<style>
#idbox{
width: 100px;
height: 100px;
background-color: #c81623;
}
.box{
width: 100px;
height: 100px;
background-color: #2828FF;
}
</style>
<body>
<div id="idbox">這是第一個盒子</div>
<div class="box">這是第二個盒子</div>
<div class="box">這是第三個盒子</div>
<div class="box">這是第四個盒子</div>
<div class="box">這是第五個盒子</div>
<script>
//根據選擇器獲取元素
//querySelector() 一般用通過id選擇器獲取
var idSelObj = document.querySelector("#idbox");
alert(idSelObj.innerHTML);
//querySelectorAll()方法 一般通過類來獲取元素,返回一個nodeList陣列物件
var classSelObj = document.querySelectorAll(".box");
for(var i= 0; i < classSelObj.length; i++){
classSelObj[i].onclick = function(){
this.style.backgroundColor = "pink";
}
}onclick 點選事件
onfocus 聚焦事件
onblur 焦點移出事件
onmouseover 滑鼠移入事件
onmouseout 滑鼠移出