JavaScript中的Dom
【摘要】 JavaScript中的Dom,欢迎大家一起学习
- 文档:一个页面就是一个文档，DOM中使用document表示
- 元素︰页面中的所有标签都是元素，DOM中使用element表示
- 节点∶网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
DOM把以上内容都看做是对象
1. 获取页面元素
获取页面中的元素可以使用以下几种方式:
- 根据ID获取
- 根据标签名获取
- 通过HTML5新增的方法获取
- 特殊元素获取
1.1 根据ID获取页面元素
console.dir(id名) 可以帮助我们更好的查看里面的属性和方法
document.getElementByld
- Document的方法 getElementById()返回一个匹配特定ID的元素.由于元素的ID在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。
- 如果需要查找到那些没有ID的元素，你可以考虑通过CSS选择器使用querySelector()。
语法
注意：返回的是元素对象
1.2 根据标签名获取
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。
注意:
- 因为得到的是一个对象的集合，所以我们想要操作里植的元素就需要遍历。
- 得到元素对象是动态的 返回的对象的集合，以伪数组的形式
1.3 HTML5新增
1.4 获取body和html元素
<script>
// 1.获取body 元素
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);
// 2.获取html 元素
// var htmlEle = document.html;
var htmlEle = document.documentElement;
console.log(htmlEle);
</script>2. 事件三要素
事件源+事件类型+事件处理程序
执行事件的过程
<div>123</div>
<script>
// 执行事件步骤
// 点击div 控制台输出 我被选中了
// 1. 获取事件源
var div = document.querySelector('div');
// 2.绑定事件 注册事件
// div.onclick
// 3.添加事件处理程序
div.onclick = function() {
console.log('我被选中了');
}
</script>常见的鼠标操作
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）