一、DOM操作---获取元素
1.1获取元素的方法
方法 | 作用 |
getElementById | 根据id名获取元素 |
[ele/document].getElementsByTagName | 根据标签名获取元素 |
[ele/document].getElementsByClassName(className) | 根据类名获取(不兼容ie6~8) |
document.getElementsByName() | 根据name属性获取元素 |
[ele/document].querySelector() | 根据选择器获取 (选择器第一个满足选择器条件的) |
[ele/document].querySelectorAll() | 根据选择器获取(选择所有满足选择器条件的,返回nodeList(类数组对象)) |
document.head | 获取Head元素对象 |
document.body | 获取body元素对象 |
document.documentElement | 获取html元素对象 |
document.documentElement.clientHeight/clientWidth | 获取一屏幕的高度或者宽度,兼容所有的浏览器 |
children | 获取所有子元素的集合 |
firstElementChild | 获取第一个子元素 |
lastElementChild | 获取最后一个子元素 |
previousElementSibling | 获取上一个兄弟元素 |
nextElementSibling | 获取下一个兄弟元素 |
1.2示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>京东商城</title>
</head>
<body>
<div id="box">aaa</div>
<h1>111</h1>
<img src="" alt="" />
<p>段落1</p>
<p class="one">段落2</p>
<p class="one">段落3</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore,
atque! Vero natus dolores deleniti est! Repellendus laboriosam, dolor
delectus dolorem facere mollitia recusandae dolorum fuga, commodi, natus
sit? Aliquam, sit!
</p>
<div id="box2">
<p class="one">段落5</p>
<p>段落6</p>
用户名:<input type="text" name="username" value="" /> <br />
</div>
<!-- 表单标签 -->
用户名:<input type="text" name="username" value="" /> <br />
密码:<input type="password" name="pwd" value="" />
</body>
<script>
//获取元素(标签)的方法---9
//1. 通过id获取,id可以直接获取 document.getElementById("id名")
console.log(document.getElementById("box"));
console.log(box);
结果图1:
//2.通过标签名获取[ele/document].getElementsByTagName("标签名") 集合
console.log(document.getElementsByTagName("p"));
console.log(box2.getElementsByTagName("p"));
结果图2:
//3.通过类名获取[ele/document].getElementsByClassName("class名") 集合
console.log(document.getElementsByClassName("one"));
console.log(box2.getElementsByClassName("one"));
结果图3:
//4.通过name(表单)获取document.getElementsByName("name值") 集合
console.log(document.getElementsByName("username"));
结果图4:
//5.通过选择器获取 *****
//[ele/document].querySelector("选择器") 只能获取第一个符合条件的元素
//[ele/document].querySelectorAll("选择器") 获取满足条件的集合
console.log(document.querySelector("#box"));
console.log(document.querySelector("#box2 p"));
console.log(document.querySelectorAll("#box2 p"));
console.log(box2.querySelectorAll("p"));
console.log(document.querySelectorAll("input"));
console.log(document.querySelectorAll(".one"));
结果图5:
//6.获取head标签
console.log(document.head);
结果图6:
//7.获取body标签
console.log(document.body);
结果图7:
//8.获取html标签
console.log(document.documentElement);
结果图8:
//获取屏幕的高度或者宽度 clientHeight高度 clientWidth宽度
console.log(
document.documentElement.clientHeight || document.body.clientHeight
);
console.log(
document.documentElement.clientWidth || document.body.clientWidth
);