首页 > 其他分享 >DOM文档对象模型

DOM文档对象模型

时间:2022-09-29 23:01:50浏览次数:48  
标签:DOM 模型 元素 HTML 文档 document 节点

目录

​DOM的概念​

​HTML DOM 的方法和属性​

​代码举例​


DOM的概念

DOM,全称Document Object Model,是一个平台和语言都中立的接口,可以使程序和脚本能够动态访问和更新文档的内容、结构以及样式。

在网站页面中有许多页面的元素,当页面到达浏览器时浏览器会为页面创建一个顶级的Document object文档对象,接着生成各个子文档对象,每个页面元素对应一个文档对象,每个文档对象包含属性、方法和事件。可以通过JS脚本对文档对象进行编辑从而修改页面的元素。也就是说,客户端的脚本程序可以通过DOM来动态修改页面内容,从客户端获取DOM中的数据并在本地执行。

 

在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

DOM文档对象模型_html

HTML DOM 的方法和属性

一些常用的 HTML DOM 方法:

  • getElementById(id) - 获取带有指定 id 的节点(元素)
  • appendChild(node) - 插入新的子节点(元素)
  • removeChild(node) - 删除子节点(元素)

一些常用的 HTML DOM 属性:

  • innerHTML - 节点(元素)的文本值
  • parentNode - 节点(元素)的父节点
  • childNodes - 节点(元素)的子节点
  • attributes - 节点(元素)的属性节点

代码举例

改变html内容

x=document.getElementById("demo")  //查找元素
x.innerHTML="Hello JavaScript"; //改变内容

改变html的图像

element=document.getElementById(“image”);
element.src=”img/1.jpg”;

改变html的样式

x=document.getElementById("demo")  //找到元素
x.style.color="#ff0000"; //改变样式

创建新的html元素

<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>

删除已有的 HTML 元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

 



标签:DOM,模型,元素,HTML,文档,document,节点
From: https://blog.51cto.com/csnd/5724377

相关文章

  • 编码规范(本文档属于半成品)
     引言1.1  编写目的这是一份旨在增强团队的开发协作,提高代码质量和打造开发基石的编码风格规范。目前其中包含了HTML、JavaScript和css/scss几个部分。 1.2  项目背......
  • Javadoc转换chm帮助文档的四种方法总结
     1)将现有的html文件集(比如api)制作成chm文档​​​​​​http://www.blogjava.net/lishunli/archive/2010/01/07/308618.html​​ 我建议使用javadoc2chm,看上去最......
  • 使用 TensorFlow 缩短模型部署
    使用TensorFlow缩短模型部署如何使用TensorFlow简化ML模型部署和服务Imagegeneratedby稳定扩散fromprompt“CoolmachinelearningandAIstuff”.ü通......
  • wangEditor改造word文档快速发帖,一键转存
    ​这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下)<%@ page language="java" i......
  • 如何通过 Java 代码隐藏 Word 文档中的指定段落
    在编辑Word文档时,我们有时需要将一些重要信息保密。因此,可以隐藏它们以确保机密性。在本文中,将向您介绍如何通过Java程序中的代码隐藏Word文档中的特定段落。下面是......
  • python 生成伪随机数函数 random
    """random函数:出一个伪随机数具体怎么做?一般我们会考虑先查找python官方自带的文档在IDLE的右上角点击HELP-->PythonDoc(F1)-->点击左上角的索引-->输入我们要......
  • 分布式机器学习中的数据并行(Data Parallelism)和模型并行(model parallelism)
    分布式机器学习中的数据并行(DataParallelism)和模型并行(modelparallelism)前言:现在的模型越来越复杂,参数越来越多,其训练集也在剧增。在一个很大的数据集集中训练一......
  • 你能想到的数据模型建模选项,这里都有
    现在是开始着手搭建数据模型的时候了。BW/4HANA提供的信息对象犹如智能建筑材料,这些建筑材料有很多配置选项,可以根据需求智能地进行变形。搭建的数据仓库模型也一样,BW/4HANA......
  • 数维图API文档 SovitJS编辑器集成API方法
    SovitChart、Sovit2D、Sovit3D已经在众多行业领域被使用,也受到了大家的一致好评,为了更好的二次开发,不少用户想把我们的编辑器集成在自己的系统中,强烈要求我们开放API接口,经......
  • 深度学习:文本分类模型中的“蒸”功夫
    作者:Xingzhe.AI来自:行者AI 前言2018年Bert的横空出世给自然语言处理带来了巨大的突破,Bert及其衍生模型在多个文本处理下游任务中达到了SOTA的结果。但是这样的提升是......