一、使用属性获取元素对象
通过Document对象的属性获取元素对象
属性 | 说明 | 返回 |
activeElement | 返回一个代表当前带有键盘焦点元素的对象 | HTMLelement |
body | 返回一个代表body元素的对象 | HTMLelement |
head | 返回一个代表head元素的对象 | HTMLelement |
forms | 返回代表所有form对象的 | HTMLCollection |
images | 返回所有img对象 | HTMLCollection |
links | 返回所有有href属性的对象 | HTMLCollection |
scripts | 所有script | HTMLCollection |
<!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>
img{
width: 300px;
}
</style>
</head>
<body>
<img src="rectangle.png" alt=""id="rectangle">
<p>长方形(rectangle)也叫矩形,是一种平面图形,是有一个角是直角的平行四边形。</p>
<img src="triangle.png" alt="" id="triangle">
<p>三角形(triangle)是由同一平面内不在同一直线上的三条线段‘首尾’顺次连接所组成的封闭图形,在数学、建筑学有应用。</p>
<script>
var images = document.images;
for(var i = 0;i < images.length;i++){
document.write(images[i].id);
document.write("<br/>");
}
</script>
</body>
</html>
三、搜索元素
方法 | 说明 | 返回 |
getElementById | 返回带有指定id的元素 | HTMLElement |
getElementsByClassName | 返回带有指定类名的元素集合 | HTMLElement[] |
getElementsByName | 返回带有指定name值的元素集合 | HTMLElement[] |
getElementsByTagName | 返回带有指定标签的元素集合 | HTMLElement[] |
querySelector() | 返回带有指定选择器的元素 | HTMLElement |
querySelectorAll() | 返回带有指定选择器的元素集合 | HTMLElement[] |
四、导航
属性 | 说明 | 返回 |
childNodes | 返回子元素组 | HTMLElement[] |
firstChild | 返回第一个子元素 | HTMLElement |
hasChildNodes() | 是否有子元素 | boolean |
lastChild | 返回最后一个子元素 | HTMLElement |
nextSibiling | 下一个兄弟节点 | HTMLElement |
parentNode | 返回父节点 | HTMLElement |
previousSibiling | 之前一个的兄弟节点 | HTMLElement |