首页 > 其他分享 >HTML DOM

HTML DOM

时间:2022-10-29 16:55:31浏览次数:60  
标签:DOM 元素 指定 HTML 节点 属性

HTML DOM是HTML Document Object Model(文档对象模型)的缩写,定义了访问和操作 HTML 文档的标准方法

DOM 以树结构表达 HTML 文档

 HTML DOM 是:

  • HTML 的标准对象模型
  • HTML 的标准编程接口
  • W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性以及访问它们的方法,换言之HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

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

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

节点父、子和同胞:节点树中的节点彼此拥有层级关系。

父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。

  • 在节点树中,顶端节点被称为根(root)
  • 每个节点都有父节点、除了根(它没有父节点)
  • 一个节点可拥有任意数量的子节点
  • 同胞是拥有相同父节点的节点

HTML DOM 方法:是我们可以在节点(HTML 元素)上执行的动作。

编程接口

可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问。

所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。

方法是执行的动作(比如添加或修改元素)。

属性是获取或设置的值(比如节点的名称或内容)。

HTML DOM 对象-属性

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

HTML DOM 对象-方法

方法描述
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。

标签:DOM,元素,指定,HTML,节点,属性
From: https://www.cnblogs.com/monarchwu/p/16839017.html

相关文章

  • JavaScriptDOM操作的性能优化
    浏览器的重排和重绘是比较消耗性能的操作,所以网页性能优化的手段就是减少重排和重绘的操作。比如:多次更改样式的操作合并为一次操作我们在JavaScript中修改样式,比如:constch......
  • DOM第二章 节点操作
    元素节点操作切换图片<style>p{text-align:center;width:400px;height:50px;}div{......
  • DOM第四章tab切换和自定义属性节点操作
    tab切换和自定义属性京东tab栏切换<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge">......
  • 「测试开发全栈-HTML」(12)css字体颜色属性
    CSSText(文本)属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。 用的最多的就是文本颜色,color属性用于定义文本的颜色。语法如下:div{ ......
  • HTML4学习随笔
    HTMLhtml:超文本标记语言(HyperTextMarkupLanguage)(html结构)(css表现)(js行为)<!DOCTYPEhtml><!--声明文档类型让浏览器以html的格式解析--><htmllang="en"><head......
  • HTML5学习随笔
    HTML5含义:html5是超文本语言的第五次重大修改的版本,html5里面做了很多兼容处理,能够兼容多数浏览器。和之前相比:新增了很多内容: 1.语义化标签 2.增强型表单 3.......
  • 如何在html中引入DPlayer.js视频播放插件,以及任何使用DPlayer.js插件
    主要用到了实现了:视频播放 、监听开始、结束、暂停、播放时间、切换视频官方文档:http://dplayer.js.org github:https://github.com/whiskyma/gulp-demo截图如下:html......
  • Dom树,什么是dom树?
    https://blog.csdn.net/weixin_45820444/article/details/109013996https://www.cnblogs.com/asmurmur/p/14773022.html前端不可不学的浏览器渲染机制,阿里年年问,去一个栽......
  • 一文带你了解Java中的Scanner键盘输入关键字、random 随机数关键字、System类和匿名函
    Scanner键盘输入Scanner类的功能:可以实现键盘输入数据,到程序当中。引用类型的一般使用步骤:1.导包import包路径.包名称如果需要使用目标类,和当前类位于同一个包下,......
  • day02-HTML02
    4.HTML4.3HTML基本标签4.3.9表格(table)标签基本语法:<tableborder="边框宽度"cellspacing="空隙大小"cellpadding="填充大小"></table>说明:table是表格标......