JS 核心之 DOM_框架

DOM 的全称是" Document Object Model "，中文意思为“文档对象模型”。

就像 JS 中所有的对象都继承自 Object 一样，浏览器提供一个原生的节点对象 Node （Node 是一个函数）， DOM 的所有节点都继承自 Node ，Node 又继承自 Object，因此它们具有一些共同的属性和方法。

一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。

顶层的 根节点 html 属于 Document 节点，代表整个文档；

第二层级和第三层级的属于 Element 节点，即网页的各种 HTML 标签；

第四层级的属于 Text 节点，即标签之间或标签包含的文本。

页面中的节点，通过上述不同的构造函数，构造出相应的对象。

由此可以看出 DOM 的主要作用 ：DOM 是 JavaScript *** 作网页的接口，它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种 *** 作（如增删改查）。

DOM 有自己的国际标准，目前通用版本是 DOM 3。

Node 属性有很多，用到时可以查询文档。

如果一个属性是函数，那么这个属性也叫做方法；即方法是函数属性。

document对象是文档的根节点，windowdocument属性就指向这个对象。

通过 DOM API 获取到的 elements 都是伪数组。

Element 对象对应网页的 HTML 元素。每一个 HTML 元素在 DOM 树上都会转化成一个 Element 节点对象。

DOM 提供两种节点集合，用于容纳多个节点： NodeList 和 HTMLCollection 。这两种集合都属于接口规范。许多 DOM 属性和方法，返回的结果是 NodeList 实例或 HTMLCollection 实例。

节点对象除了继承 Node 接口以外，还会继承其他接口。

改成w=woffsetWidth;

js获取Html元素的实际宽度高度

第一种情况就是宽高都写在样式表里，就比如#div1{width:120px;}。这中情况通过#div1stylewidth拿不到宽度，而通过#div1offsetWidth才可以获取到宽度。

第二种情况就是宽和高是写在行内中，比如style="width:120px;"，这中情况通过上述2个方法都能拿到宽度。

小结，因为idoffsetWidth和idoffsetHeight无视样式写在样式表还是行内，所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过idstyleatrr来获取。

现在的前端制作很少直接把样式写style里了，都是写在样式表里。如果你要获取的样式没有相对应的（就像#div1stylewidth对应#div1offsetWidth），就只能分别针对不用浏览器来获取样式表的属性了，可以试着搜索“JS 获取样式属性”之类的。

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>

documentgetElementById("p1")innerHTML="New text!";

//内容变更为new text

documentgetElementById("p1")stylecolor="blue";

//蓝色

</script>

</body>

</html>

jsp中

<tr>

<th align="left" width="20%" style="width: 170px; ">分享文案编辑：</th>

</tr>

<tr>

<td class="form_table_content" ><input name="wshopshare"

id="wshopshare_1" type="text" style="width: 440px; ">

</td>

</td>

</tr>

点击一次添加按钮页面多一个文本框

————————————————————————————————————————

JS中

$("#content1")

append(

'<table id="1_'//id=1_type

+ type

+ '"><tr><td>分享语句'

+ type

+ '</td></tr><tr>'

+ '<td><div id="wshopshare"></div></td>'

+ '<td><input name="wshopshare" id="wshopshare" type="text" style="width: 440px; "></td>'

+ '<td></td>'

+ '<td><button type="button" id="del1" onclick="componentdeleteAll(\'1\');">删除</button></td>'

+ '</tr></table>');

每个Img规定一个ID；

点击一个按钮获取src

js中：

function aa(){

var img1 = documentgetElementById("img1")src;

//别的一样获取。这样获取的src是绝对路径

}

或者这样：

function aa(){

var img1 = documentgetElementById("img1")getAttribute("src");

//跟上面效果一样。

}

W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文档的API，为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM，JavaScript根本没有Web页面和构成页面元素的概念。文档中的每个元素都是DOM的一部分，这就使得JavaScript可以访问元素的属性和方法。

DOM独立于具体的编程语言，通常通过JavaScript访问DOM，不过并不严格要求这样。可以使用任何脚本语言来访问DOM，这要归功于其一致的API。表3-1列出了DOM元素的一些有用的属性，表3-2列出了一些有用的方法。

<html>

<head>

<meta

以上就是关于JS 核心之 DOM全部的内容，包括:JS 核心之 DOM、js中关于获取元素属性的方法（object.style.width）、JS里面的DOM *** 作是什么等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/9382201.html

JS 核心之 DOM

发表评论

评论列表（0条）