JS DOM 文档对象模型（一）

最新推荐文章于 2024-04-29 21:05:31 发布

skyshinezy

最新推荐文章于 2024-04-29 21:05:31 发布

阅读量60

点赞数

文章标签： js

本文链接：https://blog.csdn.net/skyshinezy/article/details/117702893

版权

上回说道：

函数：可以封装一些代码或者功能，在调用的时候才会执行，提升代码的复用性

函数的声明：function：函数名（形参列表）{执行代码；return 值：//值可以是具体的某个值}

函数的调用：var result=函数名（实参列表）：//result根据函数返回值而调动

数组：用于存储同一类型的事物；数组下标：表示元素在数组当中的位置，从0开始；数组的长度（length）：通过数组的length属性可以获取到数组的元素

从根本上讲，DOM操作就是在使用js操作文档元素（标签元素、标签属性元素等）

JavaScript 能够访问和改变 HTML 文档的所有元素：

能改变页面中的所有 HTML 元素
能改变页面中的所有 HTML 属性
能改变页面中的所有 CSS 样式
能删除已有的 HTML 元素和属性
能添加新的 HTML 元素和属性
能对页面中所有已有的 HTML 事件作出反应
能在页面中创建新的 HTML 事件

Document 对象

js为我们专门提供了一个文档对象（Document）来操作文档元素

查找HTML元素

document.getElementById(id)：通过元素 id 来查找元素

/* 查找id="str1" */
var test = document.getElementById("str1");

document.getElementsByTagName(name)：通过标签名来查找元素

/* 查找所有<p>元素 */
var x = document.getElementsByTagName("p");


/* 查找 id="main" 的元素，然后查找 "main" 中所有 <p> 元素 */
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

document.getElementsByClassName(name)：通过类名来查找元素

/* 查找包含 class="str1" 的所有元素的列表 */
var x = document.getElementsByClassName("str1");

改变HTML元素

.innerHTML：改变元素的 inner HTML

<html>
<body>

    <p id="p1">Hello World!</p>

    <script>
        document.getElementById("p1").innerHTML = "hello!";
    </script>

</body>
</html>

.attribute：改变 HTML 元素的属性值

<!DOCTYPE html>
<html>
<body>

    <img id="Image" src="照片路径">

    <script>
        document.getElementById("Image").src = "另一个照片路径";
    </script>

</body>
</html>

.setAttribute(attribute, value)：改变 HTML 元素的属性值
.style.样式：改变 HTML 元素的样式

<html>
<body>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
</script>

<p>上面的段落已被脚本改变。</p>

</body>
</html>

添加和删除元素

document.createElement(element)：创建 HTML 元素
document.removeChild(element)：删除 HTML 元素
document.appendChild(element)：添加 HTML 元素
document.replaceChild(element)：替换 HTML 元素
document.write(text)：写入 HTML 输出流

skyshinezy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS DOM 文档对象模型（一）

从根本上讲，DOM操作就是在使用js操作文档元素（标签元素、标签属性元素等）JavaScript 能够访问和改变 HTML 文档的所有元素：能改变页面中的所有 HTML 元素能改变页面中的所有 HTML 属性
复制链接

扫一扫