JavaScript（2）-DOM

无敌的小周

已于 2022-04-17 14:19:56 修改

阅读量642

点赞数 1

分类专栏：前端基础文章标签： js JavaScript BOM webapps

于 2022-04-12 12:35:09 首次发布

本文链接：https://blog.csdn.net/weixin_52972575/article/details/124085663

版权

一. 简介

文档对象模型（Document Object Model）是处理可扩展标记语言（HTML，XML）的标准变成接口。

DOM树

文档对象模型指的就是将这个文档中的内容都看成对象。

二.获取元素

根据ID获取

<body>
<div id="time">2022-4-11</div>
<script>
//因为文档页面从上往下加载，先得有标签，所以script写到标签的下面
var timer = document.getElementById('time');
alert(typeof timer); //object
console.log(timer);
console.dir(timer);
</script>
</body>

根据标签名获取

<body>
<div id="time" class="ti">2022-4-11</div>
<div>2022-4-12</div>
<script>
var timer = document.getElementsByTagName('div');
console.log(timer); //object
//返回的是伪数组，不支持push pop操作
</script>
</body>

document是获取页面上所有的

如何单独获取某个父标签下的子标签

<body>
<ol id="l1">
    <li></li>
    <li></li>
    <li></li>
</ol>
<script>
var elements = document.getElementsByTagName('ol');
var lis = elements[0].getElementsByTagName('li');
console.log(lis);


var l = document.getElementById('l1');
var liss = l.getElementsByTagName('li');
console.log(liss);
</script>
</body>

根据类名获取元素

var l = document.getElementsByClassName('box1');

指定选择器获取元素

querySelector

指定选择器，可以是标签，类名或id。只返回符合条件的第一个元素
<box class="box1" id="box11">a</box>
var boxs = document.querySelector('#box11');
var boxs = document.querySelector('.box1');
querySelectorAll

指定选择器，可以获取所有符合条件的元素
var boxs = document.querySelectorAll('.box1');

特殊元素获取

获取body和html

//获取body
var b = document.body;
console.log(b);
//获取html
var h = document.documentElement;
console.log(h);

三.事件

事件基础

事件由三部分组成：事件源，事件类型，事件处理程序

事件源：触发的对象，比如按钮

事件类型：如何触发，比如鼠标点击，鼠标经过等

事件处理程序：通过函数赋值的方式完成
<body>
<button id="btn">A</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function () {
    alert("B");
}
</script>
</body>

给多个事件源绑定事件

<body>

<button>A</button>
<button>B</button>
<button>C</button>
<button>D</button>
<button>E</button>

<script>
var btns = document.getElementsByTagName('button');
for(var i = 0; i < btns.length; i++){
    btns[i].onclick = function (){
        //其他的按钮颜色失去
        for(var i = 0; i < btns.length; i++){
            btns[i].style.color = '';
        }
        //当前按钮颜色变色
        this.style.color = 'red';
    }
}
</script>
</body>

排他思想：首先先排除其他人，再设置自己的样式2

注册事件（绑定事件）

传统注册方式

利用on开头的，如onclick

btn.onclick = function(){} 这种方式一个元素同一个事件只能设置一个处理函数，后面的会覆盖掉前面的，因为这种方式是赋值方式

方法监听注册

同一个事件可以添加多个监听器
<body>
<button>tap me</button>


<script>
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
    alert('oops');
})
    /*
    * 第一个参数 type 事件类型字符串 如click，mouseover
    * 第二个参数 listener  事件处理函数，当事件发生时，会调用改监听函数
    * 第三个参数 useCapture  可选参数，是一个布尔值，默认是false
    * */
</script>
</body>

删除事件（解绑事件）

传统注册方式

btn.onclick = null 赋值为null即可

方法监听注册
<body>
<button>tap me</button>


<script>
var btn = document.querySelector('button');
btn.addEventListener('click',fn);
function fn(){
    alert('oops');
    btn.removeEventListener('click',fn);
}
</script>
传入函数的时候需要传入有名字的函数，这样后面才能解绑。

DOM事件流

事件流描述的是从页面中接收事件的顺序。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

最低0.47元/天解锁文章

无敌的小周

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
JavaScript（2）-DOM

一. 简介文档对象模型（Document Object Model）是处理可扩展标记语言（HTML，XML）的标准变成接口。DOM树文档对象模型指的就是将这个文档中的内容都看成对象。获取元素根据ID获取根据标签名获取特殊元素获取事件基础操作元素节点操作...
复制链接

扫一扫