写在前面
回头瞅了瞅,已经三个月没更新了,这三个月学习进度不算快,主要都是在摸鱼,错过了寒假的黄金学习时间,好了,不在这里逼逼赖赖后悔了,还是和我赶紧一起投入学习吧。
本次学习的主要内容是dom,其实我已经看了一遍黑马前端中dom的视频了,但是还是由于缺少练笔,即使做了笔记,还是有很多不熟,尤其是最近在写轮播图,发现脑子根本跟不上代码,所以打算回来系统性的复习一下。
声明:以下笔记内容来自于黑马前端的讲解以及自身的理解,如果有误,欢迎大家指正,也欢迎大家踊跃评论。好了,现在就让我们开始吧。
获取元素
1.1如何获取页面元素
获取方式:
- 根据ID获取
- 根据标签名获取
- 通过HTML5新增的方法获取
- 特殊元素获取
以下将对其逐一进行分析
1.2根据ID获取
使用getElementById()方法可以获取带有ID的元素对象,访问HTML元素最常用的方法是使用元素的id,如果在当前document下没有找到,则会返回null,如果找到了,则返回一个匹配的Element对象
参数Id是大小写敏感的字符串
<p id="demo"></p>
<script>
//因为文档页面从上往下加载,所以我们script写道标签的下面
var element=document.getElementById('demo');
console.log(element);//返回<p id="demo"><p>
</script>
附加:console.dir(element)可以更好的打印元素的属性
1.3根据标签名获取
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。
返回的是对象的集合,以伪数组形式存储,不论是只有一个元素还是没有元素
<li>wo</li>
<li>ai</li>
<li>qian</li>
<li>duan</li>
<script>
var lis=document.getElementsByTagName('li');
console.log(lis);
//我们可以通过伪数组的形式打印其中的一个小li
console.log(lis[0]);
//我们也可以通过for循环来全部输出
for(var i=0; i<lis.length;i++){
console.log(lis[i]);
}
</script>
控制台返回的如左图
我们还可以获取某个元素(父元素)内部所有指定标签名的子元素
注意:父元素必须是单个对象(必须指明是哪一个元素对象),获取的时候不包括父元素自己
<ol id="demo">
<li>wo</li>
<li>ai</li>
<li>qian</li>
<li>duan</li>
</ol>
<script>
var ol=document.getElementsByTagName('ol');
console.log(ol[0].getElementsByTagName('li'));
//但常用的是 给父元素添加一个id
var ol=document.getElementById('demo');
console.log(ol.getElementsByTagName('li'));
</script>
1.4通过H5新增的方法获取
1.document.getElementsByClassName('类名');//根据类名返回元素对象集合
2.querySelector('选择器’) 返回指定选择器的第一个元素对象
3.querySelectorAll()返回指定选择器的所有元素对象的集合
<div class="box">盒子</div>
<div class="box">盒子</div>
<div id="nav">
<ul>
<li>2</li>
<li>3</li>
</ul>
</div>
<script>
var boxs=document.getElementsByClassName('box');
console.log(boxs);
var firstbox=document.querySelector('.box');
console.log(firstbox);
var nav=document.querySelector('#nav');
console.log(nav);
var li=document.querySelector('li');
console.log(li);
var allBox=document.querySelectorAll('.box');
console.log(allBox);
var lis=document.querySelectorAll('li');
console.log(lis);
</script>
1.5 获取特殊元素(body,html)
获取body元素
<script>
var bodyEle=document.body;
console.log(bodyEle);
</script>
获取html元素
<script>
var htmlEle=document.documentElement;
console.log(htmlEle);
</script>
好了,以上就是获取元素的四种方法。今晚继续更新事件基础。
补:事件基础内容太少了,和下下节一起明天更。