<div id="box">
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="list">
<li name="laoda">1</li>
<li cuijn="haiOK">2</li>
<li>3</li>
</ul>
</div>
<input type="text" name="laoda">
<script>
**//通过id获取元素**
var div = document.getElementById('box')
**//通过类名取得元素**
var uls = document.getElementsByClassName('list'); //返回伪数组 uls.length; //2
//第一个ul
uls[0]
**//通过标签名取得元素**
//xxx.getElementsByTagName(标签名) 在xxx里面找指定标签名的元素
var lis = document.getElementsByTagName('li'); //返回伪数组 lis.length = 6;
//取得第二个ul下的所有li
var lis2 = uls[1].getElementsByTagName('li')
lis2.length //3
**//通过name属性,取得标签**
var laodamen = document.getElementsByName('laoda')
console.log(laodamen.length); //2
**//通过选择器从页面中选取元素**
//xxx.querySelector('选择器') 从xxx内,选取符合选择器的元素中的第一个
var li1 = document.querySelector('li') //文档中的第一个li
li1.style.background = 'hotpink'
//xxx.querySelectorAll('选择器) 从xxx内,选取符合选择器的所有元素,得到一个伪数组
var li_all = document.querySelectorAll('li')
for (var i = 0; i < li_all.length; i++) {
li_all[i].style.color = 'lightpink';
}
var li2InUl2 = document.querySelector('.list:nth-of-type(2) li:nth-of-type(2)')
li2InUl2.style.fontSize = '100px'
</script>
JavaScript中有关DOM取得元素节点的几种方法
最新推荐文章于 2022-11-12 00:39:42 发布