JavaScript之DOM对象

最新推荐文章于 2024-04-29 17:01:02 发布

鬼鬼不同路

最新推荐文章于 2024-04-29 17:01:02 发布

阅读量1.2k

点赞数 2

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_51892736/article/details/126591913

版权

前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

JavaScript之DOM对象

DOM概述
(Element)元素节点对象

DOM概述

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为：

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

(Element)元素节点对象

获取Element对象

HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取。

Document 对象中提供了以下获取 Element 元素对象的函数:

getElementById(“id属性”):根据id属性值获取，返回单个Element对象
getElementsByName(“name属性”):通过name属性，获取所有需要的元素，返回Element对象数组
getElementsByTagName(“标签名”):通过标签名去获取所有需要的元素，返回Element对象数组
getElementsByClassName(“class属性值”):通过class属性值去获取所有需要的元素，返回Element对象数组

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <input type="text" id="t1"/>

        <input type="checkbox" name="hobby" value="read">;
        <input type="checkbox" name="hobby" value="code">;
        <input type="checkbox" name="hobby" value="run">;

        <ul>
            <li>javaee</li>
            <li>android</li>
            <li>ios</li>
            <li>php</li>
        </ul>

        <input type="radio" name="sex" value="man" class="h1"/>
        <input type="radio" name="sex" value="woman" class="h1"/>


        <script>
         
       // 此处填写 js代码，见下面

        </script>
</body>
</html>

1.根据id属性值获取，返回单个Element对象：

var t1=document.getElementById("t1");
 alert(t1);
 //alert(document.getElementById("t1"));

在这里插入图片描述
2.通过name属性，获取所有需要的元素，返回Element对象数组：
js代码演示：

 var t2=document.getElementsByName("hobby");
alert(t2.length);

在这里插入图片描述

3.通过标签名去获取所有需要的元素，返回Element对象数组：
js代码演示：

  var arr=document.getElementsByTagName("li");
  alert(arr.length);

在这里插入图片描述

4.通过class属性值去获取所有需要的元素，返回Element对象数组：
js代码演示：

var arr=document.getElementsByClassName("h1");
alert(arr.length);

在这里插入图片描述

操作Element对象及元素对象常见属性

value

元素对象.value，获取元素对象的value属性值。
元素对象.value=“属性值”,设置元素对象的value属性值。
I
修改元素的值
代码演示：

        <input type="text" id="t1" value="你好" />
        <script>
            document.getElementById("t1");
            alert(t1.value);
            
            t1.value="你好么";
        </script>

效果如下：
在这里插入图片描述

className

元素对象.className，获取元素对象的class属性值。
元素对象.className=“属性值”,设置元素对象的class属性值。

修改元素样式

代码演示：

<span id="s1" class="ys1">今天天气好晴朗</span>
       <script>
            var s1=document.getElementById("s1");
            alert(s1.className);

            s1.className="ys2";
            alert(s1.className);
        </script>

效果如下：
在这里插入图片描述

checked

元素对象.checked，获取元素对象的checked属性值。
元素对象.checked=“属性值”,设置元素对象的checked属性值

注： HTML中checked=“checked”,JavaScript中返回true,false

修改单选/复选的选中与否

代码演示：

        <input type="checkbox" id="hobby"  />
        <script>
            //false
            var c=document.getElementById("hobby");
            alert(c.checked);

            //true
            c.checked=true;
        </script>

效果如下：
在这里插入图片描述

innerHTML

元素对象.innerHTML，获取元素对象的innerHTML属性值。
元素对象.innerHTML=“属性值”,设置元素对象的checked属性值

获取对象内容
代码演示：

        <span id="s1">今天天气好晴朗</span>

        <script>
            var c=document.getElementById("s1");
            alert(c.innerHTML);

            c.innerHTML="今天好像要下雪";

            //向span标签追加内容信息体
            s1.innerHTML+=",今天0度";
        </script>

效果如下：
在这里插入图片描述