js和dom是什么关系?

JavaScript015

js和dom是什么关系?,第1张

js 即 JavaScript ,是一种网页脚本语言,可以在网页上实现一些动态效果。

DOM 是HTML文档结构,其实就是为了能让js操作html元素而制定的一个规范,dom 的根本就是 document 对象,改对象有很多属性和方法,例如创建节点、复制节点、移除节点、修改属性等。

DOM(即 Document Object Mode) 是 W3C(万维网联盟)的标准。

DOM 定义了访问 HTML 和 XML 文档的标准:“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分:

核心 DOM - 针对任何结构化文档的标准模型

XML DOM - 针对 XML 文档的标准模型

HTML DOM - 针对 HTML 文档的标准模型

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

根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:

整个文档是一个文档节点

每个 HTML 元素是元素节点

HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点

注释是注释节点

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树。通过 HTML DOM,树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素(节点)均可被修改,也可以创建或删除节点。

DOM 处理中的常见错误是希望元素节点包含文本。

举个栗子:<title>DOM 教程</title>,元素节点 <title>,包含值为 "DOM 教程" 的文本节点。

可通过节点的 innerHTML 属性来访问文本节点的值。

一些常用的 HTML DOM 方法:

getElementById(id) - 获取带有指定 id 的节点(元素)

appendChild(node) - 插入新的子节点(元素)

removeChild(node) - 删除子节点(元素)

一些常用的 HTML DOM 属性:

innerHTML - 节点(元素)的文本值

parentNode - 节点(元素)的父节点

childNodes - 节点(元素)的子节点

attributes - 节点(元素)的属性节点

DOM操作示例

<html>

    <body>

        <p id="p1">Hello World!</p>

        <script>

            document.getElementById("p1").innerHTML="New text!"

            //内容变更为new text

            document.getElementById("p1").style.color="blue"

            //蓝色

        </script>

    </body>

</html>

dom属性是文档对象模型DOM全称 Document Object Model,它允许脚本(js)控制Web页面、窗口和文档,是W3C组织推荐的处理可扩展标志语言的标准编程接口,DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。

dom的意思

dom属性是节点(HTML元素)的值,您能够获取或设置。可通过JavaScript(以及其他编程语言)对HTMLDOM进行访问。所有HTML元素被定义为对象,而编程接口则是对象方法和对象属性。方法是您能够执行的动作比如添加或修改元素。