Web APIs之DOM

最新推荐文章于 2024-07-19 15:13:24 发布

qq_43203324

最新推荐文章于 2024-07-19 15:13:24 发布

阅读量57

点赞数

分类专栏： JavaScript 文章标签： js javascript

本文链接：https://blog.csdn.net/qq_43203324/article/details/114242605

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

DOM

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

1.DOM 树

文档：一个页面就是一个文档，DOM 中使用 document 表示
元素：页面中的所有标签都是元素，DOM 中使用 element 表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示

2. 获取元素

根据 ID 获取
使用 getElementById() 方法可以获取带有 ID 的元素对象。
使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。

<body>
    <div id="time">2019-9-9</div>
    <script>
        // 1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
        // 2. get 获得 element 元素 by 通过 驼峰命名法 
        // 3. 参数 id是大小写敏感的字符串
        // 4. 返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>
</body>

根据标签名获取
使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。

document.getElementsByTagName('标签名');

通过 HTML5 新增的方法获取

1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
2. document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
3. document.querySelectorAll('选择器'); // 根据指定选择器返回

获取特殊元素（body，html）

1. doucumnet.body // 返回body元素对象
2. document.documentElement // 返回html元素对象

3.事件基础

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
简单理解：触发 — 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

var btn = document.getElementById('btn');
btn.onclick = function() {
alert('你好吗');
};

鼠标事件

4.操作元素
4.1 改变元素内容
在这里插入图片描述
4.2 常用元素的属性操作

1. innerText、innerHTML 改变元素内容
2. src、href
3. id、alt、title

4.3 表单元素的属性操作

type、value、checked、selected、disabled

4.4 样式属性操作

通过 JS 修改元素的大小、颜色、位置等样式。
	1. element.style 行内样式操作
	2. element.className 类名样式操作

qq_43203324

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web APIs之DOM

DOM文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。1.DOM 树文档：一个页面就是一个文档，DOM 中使用 document 表示元素：页面中的所有标签都是元素，DOM 中使用 element 表示节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示
复制链接

扫一扫