DOM查找
Posted shihaiying
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM查找相关的知识，希望对你有一定的参考价值。
㈠什么是DOM？
DOM：document object model，是W3C（万维网联盟）的标准，是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容，接口和样式。
对网页进行增删改查的操作。
㈡DOM查找
⑴按ID属性，精确查找一个元素对象
var elem = document.getElementById("id") 效率非常高！！
•注意：一定要注意大小写的规范，因为js里面大小写是非常敏感的。
①强调：getElementById只能用在document上
②何时：只用于精确查找一个元素
③问题：不是所有元素都有ID
④案例：
<ul id="myList">
<li id="m1">首页</li>
<li id="m2">企业介绍</li>
<li id="m3">联系我们</li>
</ul>
var ul = document.getElementById(‘myList‘);
console.log(ul);
⑵按标签名查找
var elems = parent.getElementsByTagName("tag");
查找指定parent节点下的所有标签为tag的子代节点
•强调：①可用在任意父元素上
②不仅查直接子节点，而且查所有子代节点
③返回一个动态集合
即使只找到一个元素，也返回集合
必须用[0]，取出唯一元素
•问题：不但找直接，而且找所有子代
•案例
<ul id="myList">
<li id="m1">首页</li>
<li id="m2">企业介绍</li>
<li id="m3">联系我们</li>
</ul>
var ul = document.getElementById(‘menuList‘);
var list = ul.getElementsByTagName(‘li‘);
console.log(list);
⑶通过name属性查找
document.getElementsByName(‘name属性值‘)
• 可以返回DOM树中具有指定name属性值的所有子元素集合。
•案例
<form id="registerForm">
<input type = "checkbox" name="boy"/>
<input type = "checkbox" name="boy"/>
<input type = "checkbox" name="boy"/>
</form>
var list = document.getElementsByName(‘boy‘);
console.log(typeof list);
⑷通过class查找
查找父元素下指定class属性的元素
var elems = parent.getElementsByClassName("class");
•有兼容性问题：IE9+
•案例
<div id = "news">
<p class = "mainTitle">新闻标题1</p>
<p class = "subTitle">新闻标题2</p>
<p class = "mainTitle">新闻标题3</p>
</div>
var div = document.getElementById(‘news‘);
var list = div.getElementsByClassName(‘mainTitle‘);
console.log(list);
㈤通过CSS选择器查找
元素选择器
类选择器
ID选择器
后代选择器
子代选择器
群组选择器
①只找一个元素
var elem = parent.querySelector("selector")
•强调：selector支持一切css中的选择器
•强调：如果选择器匹配的有多个，只返回第一个
②找多个
var elems = parent.querySelectorAll("selector")
•强调：selector API返回的是非动态集合
㈢随机验证码案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#code{
width: 100px;
height: 50px;
background-color: lightblue;
font-size: 44px;
letter-spacing: 5px;
}
</style>
</head>
<body>
<script>
function createRandCode(){
var chars=[‘a‘,‘b‘,‘c‘,‘1‘,‘2‘,‘3‘];
var randcode="";
for(var i=0;i<3;i++){//3位随机码
var randpos =Math.floor(Math.random() * (chars.length-1));
randcode+= chars[randpos];
}
document.getElementById("code").innerHTML=randcode;
}
</script>
<div id="code"></div>
<button onclick="createRandCode()">验证码</button>
</body>
</html>
效果图：
以上是关于DOM查找的主要内容，如果未能解决你的问题，请参考以下文章