DOM|BOM
1.获取元素
getElementById 通过id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="" id="time">20245/19</div>
</body>
<script >
let timer = document.getElementById('time')
console.log(timer);
</script>
</html>
- 因为我们文档页面从上往下加载,所以先得有标签 所以我们script 写到标签的下面.
- get 获得 element 元素 by 通过 驼峰命名法 .
- 参数id 是大小写敏感的字符串.
- 返回一个元素对象
1.运行结果
<div class="" id="time">20245/19</div>
2.通过console.log(typeof timer);来检测数据类型
返回 object
3.我们可以使用console,dir('time')带印我们返回的元素对象,更好的查看里面
的属性和方法
2.getElementsByTagName 根据标签名获取
使用getElementById() 方法可以返回有指定标签名的对象集合.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>11111111111</li>
<li>22222222222</li>
<li>33333333333</li>
<li>44444444444</li>
<li>55555555555</li>
</ul>
</body>
<script>
let box = document.getElementsByTagName('li')
console.log(box);
//遍历
for(let i=0 ;i<box.length;i++){
console.log(box[i]);
}
</script>
</html>
- 返回的是 获取过来元素对象的集合 以伪数组的形式存储的
- 若我们获取第一个元素 可以 console.log( box[0] )
- 若我们想依次获取打印里面的元素,可以采用遍历的方式
- 如果页面中只有一个li 返回还是以伪数组的形式存储的
- 如果没有li 返回空的伪数组的形式
1.返回结果:
HTMLCollection(5) [li, li, li, li, li]
2.console.log( box[0] )返回结果:
<li>11111111111</li>
3. <li>11111111111</li>
<li>22222222222</li>
<li>33333333333</li>
<li>44444444444</li>
<li>55555555555</li>
3.通过H5新增的方法获取
document.getElementByclassName(`类名`);//根据类名返回对象集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">盒子</div>
<div class="box">盒子</div>
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</body>
<script>
let boxs = document.getElementsByClassName('box')
console.log(boxs);
</script>
</html>
3.document.querySelector('选择器') ; //根据指定选着器返回第一个元素对象;(H5新增)
## document.querySelector('选择器') //返回选择器的第一个元素对象
//切记里面的选着器需要加符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">盒子</div>
<div class="box">盒子</div>
<div class="nav" id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
let firstBox = document.querySelector('.box');
console.log(firstBox);
//注意要加.来说明是类名选着器
// id 要加 #
let navBox = document.querySelector('#nav')
console.log(navBox);
let li =document.querySelector('li')
console.log(li);
</script>
</body>
</html>
consle:
1. <div class="box"><font __transmart="">盒子</font></div>
2. <div class="nav" id="nav">
<ul>
<li><font __transmart="">首页</font></li>
<li><font __transmart="">产品</font></li>
</ul>
</div>
3.<li><font __transmart="">首页</font></li>
document.querySelector('选择器') ;
只能选着第一个,假设我想要第二个盒子怎么办呢?
就要用到 documen.querySelectorAll('选择器')
documen.querySelectorAll('选择器') //根据指定选择器返回,指定选择器的所有元素集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div class="nav" id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
let boxs = document.querySelectorAll('.box');
console.log(boxs);
//这样子就获取了.box全部集合;
//想获取第二个很简单,只要
//第一个: box[0];
//第二个; box[1];
console.log(boxs[1]);
</script>
<style>
</style>
</body>
</html>
console:
NodeList(2)[div.box, div.box]
获取body ,html元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//获取body元素
var bodyEle =document.body;
console.log(bodyEle); //返回body对象
//获取html元素
var html = document.documentElement
console.log(html) //返回html对象
</script>
</body>
</html>
