DOM&BOM-w3school（2020.2.11）【js HTML DOM】

mus_木司

于 2020-02-11 16:53:15 发布

阅读量386

点赞数

分类专栏： w3cschool笔记文章标签： js dom

本文链接：https://blog.csdn.net/mus123/article/details/104265530

版权

一、js HTML DOM
（一）DOM简介
1.通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被结构化为对象树：

HTML DOM 是：
• HTML 的标准对象模型
• HTML 的标准编程接口
• W3C 标准
W3C DOM 标准被分为 3 个不同的部分：
·Core DOM - 所有文档类型的标准模型
·XML DOM - XML 文档的标准模型
·HTML DOM - HTML 文档的标准模型

总之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
2. 创建动态 HTML DOM一般用法
• 改变 HTML 元素的内容
• 改变 HTML 元素的样式（CSS）
• 对 HTML DOM 事件作出反应
• 添加和删除 HTML 元素
3. javascript 有三部分构成，ECMAScript，DOM和BOM
（二）DOM方法
1.在 DOM 中，所有 HTML 元素都被定义为对象。
HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。
HTML DOM 属性是您能够设置或改变的 HTML 元素的值。

document.getElementById("demo").innerHTML = "Hello World!";

getElementById 是方法，而 innerHTML 是属性。
2. getElementById 方法
访问 HTML 元素最常用的方法是使用元素的 id。
在上面的例子中，getElementById 方法使用 id=“demo” 来查找元素。
3. innerHTML 属性
获取元素内容最简单的方法是使用 innerHTML 属性。
innerHTML 属性可用于获取或替换 HTML 元素的内容。
innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>。
4.
在这里插入图片描述
（三）DOM文档、元素
1.HTML DOM Document 对象
文档对象代表您的网页。
如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。
2. 查找 HTML 元素

（1）通过 id 查找 HTML 元素
DOM 中查找 HTML 元素最简单的方法是，使用元素的 id。

var myElement = document.getElementById("intro");

如果元素被找到，此方法会以对象返回该元素（在 myElement 中）。
如果未找到元素，myElement 将包含 null。
（2）通过标签名查找 HTML 元素
查找 id=“main” 的元素，然后查找 “main” 中所有

元素，返回对象数组

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

（3）通过类名查找 HTML 元素
如果您需要找到拥有相同类名的所有 HTML 元素，请使用 getElementsByClassName()
返回包含 class=“intro” 的所有元素的列表，返回对象数组

var x = document.getElementsByClassName("intro");

（4）通过 CSS 选择器查找 HTML 元素
如果您需要查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，请使用 querySelectorAll() 方法。
返回 class=“intro” 的所有 <p> 元素列表

var x = document.querySelectorAll("p.intro");

（5）通过 HTML 对象选择器查找 HTML 对象
本例查找 id=“frm1” 的 form 元素，在 forms 集合中，然后显示所有元素值

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

以下 HTML 对象（和对象集合）也是可访问的：
• document.anchors
• document.body
• document.documentElement
• document.embeds
• document.forms
• document.head
• document.images
• document.links
• document.scripts
• document.title

3.改变 HTML 元素
在这里插入图片描述
（1）改变 HTML 输出流
document.write() 可用于直接写入 HTML 输出流：

<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>

千万不要在文档加载后使用 document.write()。这么做会覆盖文档。
（2）改变 HTML 内容
修改 HTML 文档内容最简单的方法是，使用 innerHTML 属性。

document.getElementById(id).innerHTML = new text

（3）改变属性的值

document.getElementById(id).attribute = new value

例如

document.getElementById("myImage").src = "landscape.jpg";

（4）改变元素css
需更改 HTML 元素的样式，请使用此语法：

document.getElementById(id).style.property = new style

例如

document.getElementById('p1').style.visibility="hidden";

更多style对象见HTML DOM Style 对象参考手册。https://www.w3school.com.cn/jsref/dom_obj_style.asp
4. 添加和删除元素
在这里插入图片描述
5. 添加事件处理程序

6. 查找 HTML 对象

（三）DOM动画
1.步骤：
（1）基础页面
（2）创建动画容器：所有动画都应该与容器元素关联
（3）为元素添加样式
应该通过 style = "position: relative" 创建容器元素。（相对定位）
应该通过 style = "position: absolute" 创建动画元素。（绝对定位）
·static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
position解释：
·fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
·relative（相对定位）：生成相对定位的元素（相对于他原来应该在的位置），通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。　　
·absolute（绝对定位）：生成绝对定位的元素（会

最低0.47元/天解锁文章

mus_木司

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
DOM&BOM-w3school（2020.2.11）【js HTML DOM】

一、js HTML DOM（一）DOM简介1.通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被结构化为对象树：HTML DOM 是：• HTML 的标准对象模型• HTML 的标准编程接口• W3C 标准W3C DOM 标准...
复制链接

扫一扫