一、查找元素
1. getElement*
使用 getElement 常用的获取方式:
1) document.getElementById(id) :通过 id 获取
2)elem.getElementsByTagName(tag) :查找具有给定标签的元素,并返回它们的集合。
3) elem.getElementsByClassName(className) :返回具有给定CSS类的元素。
4) document.getElementsByName(name) 返回在文档范围内具有给定 name 特性的元素。很少使用。
<!--document.getElementById(id)-->
<div id="elem">
<div id="elem-content">Element</div>
</div>
<script>
// document.getElementById(id)
// 获取该元素
let elem = document.getElementById('elem');
// 将该元素背景改为红色
elem.style.background = 'red';
</script>
<!--2) 3) 4) 返回的都是集合-->
<form name="my-form">
<div class="article">Article</div>
<div class="long article">Long article</div>
</form>
<script>
// 按 name 特性查找
let form = document.getElementsByName('my-form')[0];
// 在 form 中按 class 查找
let articles = form.getElementsByClassName('article');
alert(articles.length); // 2, found two elements with class "article"
</script>
2. querySelector*
使用 querySelector 常用的获取方式:
1) elem.querySelectorAll(css) : 返回 elem 中与给定 CSS 选择器匹配的所有元素
2) elem.querySelector(css) :返回给定 CSS 选择器的第一个元素,换句话说,结果与** elem.querySelectorAll(css)[0]** 相同
<!--1) elem.querySelectorAll(css)-->
<ul>
<li>The</li>
<li>test</li>
</ul>
<ul>
<li>has</li>
<li>passed</li>
</ul>
<script>
let elements = document.querySelectorAll('ul > li:last-child');
for (let elem of elements) {
alert(elem.innerHTML); // "test", "passed"
}
</script>
3. 获取特性
操作特性的方法:
- elem.hasAttribute(name) — 检查是否存在这个特性。
- elem.getAttribute(name) — 获取这个特性值。
- elem.setAttribute(name, value) — 设置这个特性值。
- elem.removeAttribute(name) — 移除这个特性。
- elem.attributes — 所有特性的集合。
例如:从文档(document)中获取带有 data-widget-name 特性(attribute)的元素,并读取它的值。
二、计算样式(getComputedStyle)
怎么给样式赋值很简单,那么怎么得到元素已有的样式呢???
<!doctype html>
<title>测试</title>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{color:#333;}
</style>
</head>
<body>
<script>
alert(document.body.style.color); // 空
</script>
</body>
</html>
获取样式值,可以用 getComputedStyle
1)语法如下:
getComputedStyle(element, [pseudo])
2)说明:
- element: 需要被读取样式值的元素。
- pseudo: 伪元素(如果需要),例如 ::before。空字符串或无参数则意味着元素本身。
<!doctype html>
<title>测试</title>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{color:#333;}
</style>
</head>
<body>
<script>
let comStyle = getComputedStyle( document.body );
alert(comStyle.color); // rgb(51, 51, 51)
</script>
</body>
</html>