1.获取页面中的元素可以使用以下几种方式
- 根据 ID 获取
- 根据标签名获取
- 通过 HTML5 新增的方法获取
- 特殊元素获取
1.1根据ID 获取
使用getElementByld ( ) 方法可以获取带有 ID 的元素对象
<body>
<div id="time">2021-9-9</div>
<script>
1. 因为我们的文档页面从上往下加载,所以得现有标签 所以script写到标签下面
2. get 获得 element 元素 by 通过 驼峰命名法
3. 参数 id 是大小写敏感的字符串
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer); 返回的是元素对象
4. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
</script>
</body>
2 .根据标签名获取 某些(多个元素)
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合
document.getElementsByTayName ( ’ 标签名 ’ ) ;
注意;
因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历
得到元素对象是动态的
<ul>
<li>知否知否,应是等你好久1</li>
<li>知否知否,应是等你好久2</li>
<li>知否知否,应是等你好久3</li>
<li>知否知否,应是等你好久4</li>
<li>知否知否,应是等你好久5</li>
</ul>
返回的是 获取锅来元素对象的集合 以为数组的形式储存
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
console.log(typeof lis);
2.我们想依次打印里面的元素对象 我们可以采取遍历的方式
for(var i = 0; i < lis.length; i++){
console.log(lis[i])
}
3. 如果页面中只有一个li 返回的还是伪数组的形式
4. 如果页面中没有这个元素 返回的是 空 的伪数组
2.1 还可以获取某个元素(父元素)内部所有指定标签的子元素
element . getElementsByTagName( ’ 标签名 ’ );
或给 父元素设置一个 id 通过 id选到父元素 后用 id.getElementsByTagName ( ) ;
var 变量名 = document.getElementById( ’ id ’ );
var ol = document.getElementById(‘lo’);
console.log(ol.getElementsByTagName(‘li’));
注意;父元素必须是 单个对象(必须指明是哪一个元素).获取的时候不包括父元素自己。
3.通过HTML5 新增的方法获取
1. document.getElementsByClassName ( ’ 类名 ') ;// 根据类名返回元素对象集合
2.document.getquerySelector ( ’ 选择器 ’ ) ; // 根据指定选择器返回第一个元素对象
3.document.querySelectorAll( ’ 选择器 ’ ); // 根据指定选择器返回
1. getElementsByClassName 根据类名获取某些元素集合
var bx = document.getElementsByClassName('box');
console.log(bx);
2.querySelecctor 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box(类选择器) #nav(id选择器)
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
3.querySelectorAll() 返回指定选择器的所有元素对象的集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
4.获取特殊元素( body 、html)
获取body 元素
1.document.body // 返回 body 元素对象
获取 html 元素
1.document.documentElement // 返回 html 元素对象