js dom是什么?_JS中的DOM知识概览

时间: 2018-12-15阅读: 1640标签: js知识

DOM 是什么?

文档对象模型,是针对 html 和 XML 文档的一个 API (应用程序编程接口), 描绘了一个层次化的节点树。 

D: document

当 web 浏览器浏览一个页面的时候,DOM 就在幕后把你编辑的网页文档转换成一个文档对象。(这也是为什么浏览器打开一个 html 文档显示的是丰富的内容,而在文本编辑器打开显示的是 html 源码的原因)

O: object

JavaScript 中宿主对象 window 中的一个属性:document。 document 对象主要处理网页内容。

M: model

DOM 把一份文档表示为一棵树。如文档:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <h3>
      <a href="#">标题</a>
    </h3>
    <p>内容</p>
  </body>
</html>

上面介绍到 DOM 可以将任何的 html 与 xml 描绘成一个由多层节点构成的树。 而DOM 的每个节点都有 nodeType , nodeName 和 nodeValue 属性,可以通过这些属性了解节点的具体信息。 


Node类型

除IE外所有浏览器都可以访问这个类型(因为IE中的DOM对象都是以COM对象的形式实现的),而且js中的所有节点类型都继承自Node类型。

nodeName/nodeValue/nodeType

nodeName--节点的名称:  

元素节点 nodeName 是标签名称
属性节点 nodeName 是属性名称
文本节点 nodeName 的值是 "#text"
文档节点 nodeName 的值是 "#document"
 注意:nodeName 的值是大写字母 

 nodeValue--节点值:

文本节点 nodeValue 是全部文本
属性节点 nodeValue 是属性的值。
文档节点和元素节点 nodeValue 的值是null。

nodeType--节点的类型:

元素节点 nodeType 值是1
 属性节点 nodeType 值是2
文本节点 nodeType 值是3
注释节点 nodeType 值是8
文档节点 nodeType 值是9


Document - 文档节点

nodeType: 9
nodeName: #document
nodeValue: null

JavaScript 通过 Document 类型表示文档。在浏览器中,document 对象是 HTMLDocument(继承自 Document 类型)的一个实例,表示整个 HTML 页面。而且 document 对象是 window 对象的一个属性。

可尝试在 chrome 浏览器控制台中打出:

console.log(document.nodeType);
< 9
console.log(document.nodeName);
< #document
console.log(document.nodeValue);
< null


Element - 元素节点

nodeType: 1
nodeName: 元素的标签名
nodeValue: null

文本段落的 nodeName:p
链接的 nodeName:a
元素可以包含其他元素,如标题包含链接等。
 html是根元素,唯一一个不能被包含在其他元素里面的元素。


Text - 文本节点

nodeType: 3
nodeName: #text
nodeValue: 节点所包含文本

页面中,我们看到的文字都是一个个文本节点。如:

<p>文本</p>
<!-- 这里的"文本"就是一个文本节点。-->

<p> </p>
<!-- 这里 p 标签包含一个空格,也是一个文本节点。 -->

文本节点总是被包含在元素节点的内部。但并非所有的元素节点都包含文本节点。如:ul、 img


Attr - 属性节点

属性就是存在于元素的 attributes 属性中的节点。通俗的讲,属性节点用来对元素做出更具体的描述。

nodeType: 2
nodeName: 属性的名称
nodeValue: 属性的值

例如:ti例如:title, align, alt ...


Comment - 注释节点

nodeType: 8
nodeName: #comment
nodeValue: 注释的内容

如:<!-- 注释注释 --> 就是一个注释节点


DOM 常用属性

childNodes: 获取任何一个元素的所有类型的节点,不仅仅是元素节点,还有文本节点、注释节点等。 

nodeType: 节点类型值,总共有 12 中可取值 

nodeName: 节点名称 

nodeValue: 一个节点的值 

firstChild: 元素的第一个元素 

lastChild: 元素的最后一个元素 

innerHTML: 读、写某给定元素里的 HTML 内容


DOM 常用方法

查找元素

getElementById :

通过 ID 查找元素。

函数参数为 ID 的值,如果元素存在,返回 document 对象,不存在返回 null。

<div id="ts" ></div>
var ele = document.getElementById('ts');

getElementsByClassName:

通过 class 名称查找元素
函数参数为 class 的值,如果元素匹配到,返回的是 document 对象集合,不匹配则返回空数组。


创建元素

createElement:

作用: 创建新元素
函数只接受一个参数,即要创建函数的标签名。
创建一个<div>元素代码如下:

var $div = document.createElement('div');

元素被创建后,可以为其添加更多的子节点,或者操作元素特性等。
虽然这个元素已经存在并且已经拥有了自己的 DOM 属性,但它还不是任何一颗 DOM 树的组成部分,它只是游荡在 JavaScript 世界里的一个孤儿。它这种情况称为文档碎片,还无法显示在浏览器的画面中。
可可以使用 appendChild 添加到 DOM 树中 。

appendChild:

作用:将节点添加到另一个节点的末端
函数参数只有一个,为即将被添加的节点。
如:

<div id="test"></div>

var div = document.createElement('div');
var ele = document.getElementById('test');

ele.appendChild(node);

createTextNode:

作用:创建新文本节点
函数只接受一个函数,即要插入节点中的文本。
创建一个文本节点并添加到新元素中的代码如下:

var textNode = document.createTextNode('hello node!');
var div = document.createElement('div');
div.appendChild(textNode);


总结

DOM(文档对象模型),是针对 HTML 和 XML 文档的一个 API (应用程序编程接口), 描绘了一个层次化的节点树。
DOM 的 5 种节点类型:文档、元素、文本、属性、注释。
DOM 常用属性介绍。

DOM 常用方法介绍,分为两类:操作元素、查找元素。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1599

关闭

js不同数据类型下的toString()与toLocaleString()的输出差异

toString()与toLocaleString()方法主要针对对象Object转换为字符串,如果是基本类型调用它们的时候,先会把基本类型实例化为对应的对象类型,然后在转换为字符串。这篇文章主要讲解不同数据类型下的toString()与toLocaleString()的输出差异。

JS方法整理_js常用函数大全

都是日常工作中使用的一些js方法,整理出来以便大家学习使用。主要包括:Js获取页面地址参数 、千分位 、判断是否数字 、图片按比例压缩、截取指定字节数的字符串、判断是否微信 、获取时间格式的几个举例 、获取字符串字节长度 、对象克隆、深拷贝 ...

js词法作用域和作用域的理解_什么是javascript词法作用域?

JavaScript引擎在代码执行前会对其进行编译:第一步编译阶段,第二步运行阶段。词法作用域:定义在词法阶段的作用域,即书写代码时函数声明的位置决定的。词法分析器处理代码时会保持作用域不变

await在forEach不起作用解决

我们知道await这个机制肯定是没问题的,如果真的有问题肯定不会轮到我测出来,那么其实剩下来的问题只能是for遍历的原因了。lodash的forEach和[].forEach不支持await,如果非要一边遍历一边执行await,可使用for-of

javascript的Object. hasOwnProperty方法

hasOwnProperty() 方法会返回一个布尔值,指示对象自身属性中(非继承属性)是否具有指定的属性,如果 object 具有带指定名称的属性,则 hasOwnProperty 方法返回 true,否则返回 false。

JavaScript中的行为委托

行为委托简单来说就是一种设计模式,不同于传统的构造函数的类式设计。这里每个例子会通过构造函数,class和行为委托来不同实现,不过不会评论class,是否使用class取决于你的观点。

WebSocket的原理及WebSocket API的使用,js中如何运用websocket

WebSocket是HTML5下一种新的协议,为解决客户端与服务端实时通信而产生的技术。其本质是先通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接

JavaScript中奇特的~运算符

本次分享一下并不是很常用的按位非运算符~的原理以及一点点用法。产生式 UnaryExpression : ~ UnaryExpression 按照下面的过程执行:令 expr 为解释执行 UnaryExpression 的结果。令 oldValue 为 ToInt32(GetValue(expr))。返回 oldValue 按位取反的结果。

JavaScript中的循环和作用域

JavaScript有一个特点,也许会让开发者头痛, 是与循环和作用域相关的.const。最简单的方案是用 let 声明、另外一个非常普遍的解决这个问题是使用pre-ES6代码, 同时它被称作即时调用函数表达式(IIFE)

js的解析的两个阶段_预解析阶段、执行阶段

js不像C语言那样只要编译一次之后成.exe文件之后就不用在编译可以直接使用了,js是一种解释型语言,js同理是边解析边执行。js的解析分为两个阶段 1.预解析阶段 2.执行阶段。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!