DOM对象--文档对象模型

咸鱼不咸鱼

于 2023-03-03 18:19:33 发布

阅读量88

点赞数 1

分类专栏： HTML DOM 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_53903929/article/details/129325256

版权

HTML DOM 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一 DOM简介

Document Object Model：文档对象模型；是W3C组织推荐的处理可扩展置语言的标准编程接口。它与平台和语言无关的应用程序接口(API) ,可以动态地访问程序和脚本，跟新其内容，结构和www文档的风格。文档给可进一步被处理，其结果可以加入到当前的页面。DOM是一种基于树的API文档，其要求再处理过程张整个文档都表示再存储器中。另外一种简单的API是基于事件的SAX（Simple API for XML），其可处理很大的XML文档，由于大，故不适合全部放在存储器中处理。

基于树的API：

在这里插入图片描述

自顶向下:可以知道到每颗树下的标签

自地向上:可以知道属性和内容和标签

二获取页面元素

常用方法:

document.getElementById(“id”);

document.getElementsByName(“name”);

document.getElementsByClassName(“class”);

document.getElementsByTagName(“标签名”);

<body>
    <input type="text" name="name" value="咸鱼" maxlength="6" id="test" class="cname">
    <script>
        // 通过id属性的值查找元素
        var id = document.getElementById("test");
        console.log(id);
        // 通过name属性的查找元素，因为name属性值可以重复，所以返回的是元素数组
        var name = document.getElementsByName("name");
        for(var i in name){
            console.log(name[i]);
        }
        // 通过classs属性值查找元素，因为class属性值可以重复，所以返回的是元素数组
        var className = document.getElementsByClassName("cname");
        for(var i in className){
            console.log(className[i]);
        }
        //  通过标签名查找元素，因为标签可以重复，所以返回的是元素数组
        var tagName = document.getElementsByTagName("input");
        for(var i = 0;i<tagName.length;i++){
            console.log(tagName[i]);
        }
    </script>
</body>

三操作页面元素

1 创建document对象

document.createElement(“标签名”);

2 添加document对象

(1)A.appendChild(B) ; 将B添加到 A内部的最后面

(2)A.insertBefore(B,C);将B添加到 A内部的C 的前面

代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test">
        <h1>标题1</h1>
        <p>这是一个段落</p>

    </div>
    <script>
        // 题目  在id=test中添加一个超链接到一个你喜欢的网站
        // 创建document对象
        var a = document.createElement("a");
        console.log(a);
        // 给a标签中的href属性赋值
        a.href = "http://www.baidu.com";
        // 给a标签中添加文本
        a.innerText = "百度";
        // 获取id=test的标签
        var element = document.getElementById("test");
        // 添加方式1
        // element.appendChild(a);
        // 添加方式2
        var ele = document.getElementsByTagName("p")[0];//是一个数组
        element.insertBefore(a,ele);
    </script>
</body>
</html>

3 删除document对象

（1）A.remove();将A删除

（2）A.romoveChild(B);将A内部的B删除

4 替换document对象

A.replaceChild(B,C);用B替换A内部的C

代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test">
        <h1>标题1</h1>
        <p>这是一个段落</p>

    </div>
    <script>
        // 题目  在id=test中添加一个超链接到一个你喜欢的网站
        // 创建document对象
        var a = document.createElement("a");
        console.log(a);
        // 给a标签中的href属性赋值
        a.href = "http://www.baidu.com";
        // 给a标签中添加文本
        a.innerText = "百度";
        // 获取id=test的标签
        var element = document.getElementById("test");
        var ele = document.getElementsByTagName("p")[0];//是一个数组
        // 将div标签中p标签替换成a
        element.replaceChild(a,ele);
        // 删除id=test中的 a 标签
        element.removeChild(a);
    </script>
</body>
</html>

四操作元素属性

页面元素.属性名=“值”;
设置: 标签对象.setAttribute(“属性名”,“属性值”);
获取：标签对象.getAttribute(“属性名”)；
删除：标签对象.removeAttribute(“属性名”)

<body>
    <input type="text" name="name" value="咸鱼" maxlength="6" id="test" class="cname">
    <script>
        // 方式1 设置 页面元素.属性名= "值";
        var input = document.getElementById("test");
        console.log(input);
        input.value = "好咸";
        // 方式2 设置 标签对象.setAttribute("属性名","属性值");
        input.setAttribute("maxlength","8");
        // 获取 标签属性 标签.getAttribute("属性名")
        console.log(input.getAttribute("value"));
        // 删除 标签对象.removeAttribute("属性名");
        input.removeAttribute("value");
    </script>
</body>

五操作元素样式

就近原则

标签对象.style.样式名 = “值”;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* <!--原始样式--> */
        div{
            width: 100px;
            height: 100px;
            background-color: bisque;
            padding: 40px 30px 40px 30px;
        }   
    </style>
   
</head>
<body>
    <div id="test">
        <span>测试操作元素样式</span>
    </div>
    <script>
        // 改变原本样式
        // 获取id=test的页面元素
        var id = document.getElementById("test");
        id.style.width = "200px";
        id.style.height = "200px";
        id.style.borderRadius = "50%";
        id.style.backgroundColor = "yellow";
    </script>
</body>
</html>

六操作元素内容

innerText 与 innerHTML

<body>
    <div id="test">
        <span>测试操作元素样式</span>
    </div>
    <script>
        /*操作元素内容*/ 
        // 方式一 innerText--只获取文本
        var id = document.getElementById("test");
        console.log(id.innerText);
        // 方式二 innerHTML--获取当前标签内的所有内容(文本,标签及格式,但不包括当前标签本身) 表示为一个字符创
        console.log(id.innerHTML);
         var str = "<h1>放置文本测试</h1>"
        // 方式一 innerText--设置文本，且覆盖原来的内容及标签无作用
        id.innerText = str;
        // 方式二 innerHTML--设置文本，且覆盖原来的内容及标签生效
        id.innerHTML = str;
    </script>
</body>

innerText与innerHTML之间的区别

获取时
- innerText只能获取文本内容
- innerHTML能获取文本内容及标签
设置时
- innerText会将标签当成文本放进去
- innerHTML 放进去的标签能被浏览器翻译成标签
  // 方式二 innerHTML–设置文本，且覆盖原来的内容及标签生效
  id.innerHTML = str;


innerText与innerHTML之间的区别

1. 获取时
   - innerText只能获取文本内容
   - innerHTML能获取文本内容及标签
2. 设置时
   - innerText会将标签当成文本放进去
   - innerHTML 放进去的标签能被浏览器翻译成标签

咸鱼不咸鱼

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM对象--文档对象模型

DOM介绍及使用方法
复制链接

扫一扫

专栏目录

DOM对象--文档对象模型

一 DOM简介

二 获取页面元素

三 操作页面元素

1 创建document对象

2 添加document对象

3 删除document对象

4 替换document对象

四 操作元素属性

五 操作元素样式

六 操作元素内容

“相关推荐”对你有帮助么？

二获取页面元素

三操作页面元素

四操作元素属性

五操作元素样式

六操作元素内容