DOM（文档对象模型）

最新推荐文章于 2024-10-12 10:41:56 发布

清风挽歌

最新推荐文章于 2024-10-12 10:41:56 发布

阅读量166

点赞数

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

本文链接：https://blog.csdn.net/zxy144/article/details/109708381

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文深入浅出地介绍了DOM模型，如何通过它访问和修改HTML元素，展示了getElementById、getElementsByTagName等方法，以及元素属性和文本内容的处理。通过实例演示了如何在实际开发中运用DOMAPI进行元素操作。

摘要由CSDN通过智能技术生成

DOM（Document Object Model）文档对象模型。定义了访问和处理HTML文档的标准方法

DOM把HTML文档呈现为带有元素、属性和文本的树形结构（节点树）

在这里插入图片描述

如果我们需要改变页面的某个元素，就需要获得对HTML文档中所有元素进行访问的入口，访问入口通过文档对象模型即可获得。DOM提供了对HTML元素进行添加、移动、改变或移除的方法和属性

DOM对象的API

浏览器加载整个HTML文档形成一个document对象，使用document对象可以访问和操作HTML文档中所有的元素

document中获取element元素的方法：

document.getElementById(“id属性值”) 根据id获得一个元素
document.getElementsByTagName(“标签名”) 根据标签名获得多个元素
document.getElementsByName(“name属性值”) 根据name属性获得多个元素
document.getElementsByClassName(“class属性值”) 根据class属性获得多个元素

element元素中获取属性的方法：

元素.属性名获得一个属性
element.getAttribute(“属性名”) 获得一个属性的值
element.setAttribute(“属性名”,“属性值”) 设置一个属性的值
element.removeAttribute(“属性名”) 删除一个属性

标签体中文本内容的获取和设置

element.innerText 获取标签中的文本内容
element.innerHTML 获取标签中的文本内容，包括其中的标签
element.innerText=“替换的内容” 设置标签中的文本内容，不解析标签
element.innerHTML=“替换的内容” 设置标签中的内容，会解析内容中的标签

动手试一试：

    var element  = document.getElementById("box1");
    var text = element.innerHTML
    console.log(text)
    var style = element.style;
    console.log(style)
    //如果已有该属性会被替换掉
    element.setAttribute('style','background-color: blue');
    // element.removeAttribute('style');
    //获取所有的p标签元素
    var ps = document.getElementsByTagName('p');
    //取出第一个p标签，修改其中的内容
    var p1 = ps.item(0);
    p1.innerHTML="<h2>456</h2>";