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

时间: 2018-12-15阅读: 2145标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

TS与JS中的Getters和Setter究竟有什么用?

在本文中,我们讨论了getter 和 setter 在现代 Web 开发中的实用性。它们有用吗?什么时候使用它们是有意义的?尽管我不同意 getter 和 setter 完全是一个反模式。但它们在几种情况下能带来更多的实用性。

理解js中prototype和__proto__和的区别和作用?

在js中有句话叫一切皆对象,而几乎所有对象都具有__proto__属性,可称为隐式原型,除了Object.prototype这个对象的__proto__值为null。Js的prototype属性的解释是:返回对象类型原型的引用。每个对象同样也具有prototype属性,除了Function.prototype.bind方法构成的对象外。

javascript对dom的操作总汇,js创建,更新,添加,删除DOM的方法

HTML文档在浏览器解析后,会成为一种树形结构,我们需要改变它的结构,就需要通过js来对dom节点进行操作。dom节点(Node)通常对应的是一个标题,文本,或者html属性。

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

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

JavaScript中变量提升和函数提升的意义理解

在ES6之前,Js中是没有块级作用域的,只存在全局作用域和函数作用域。变量提升即将变量声明提升到它所在作用域的最开始的部分;函数提升只有函数声明中才发生。

原生js实现数组随机排列(数组乱序)的方法.【快速洗牌算法】

在开发中遇到这样的问题,需要将一组已知数组的顺序打乱,按照以前和现在的做法,总结了以下方法。

JavaScript中的循环和作用域

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

19 个 JavaScript 常用有用的简写技术

Js中有用的简写技术:1.三元操作符、2.短路求值简写方式、3.声明变量简写方法、4.if存在条件简写方法、5.JavaScript循环简写方法、6.短路评价...

document.write和innerHTML的区别

document.write只能重绘整个页面,innerHTML可以重绘页面的一部分。 document.write是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open。

JavaScript中的魔幻代理Proxy

什么是 JavaScript 代理?通过 Proxy 我们可以拦截并改变一个对象的几乎所有的根本操作,包括但不限于属性查找、赋值、枚举、函数调用等等。利用 Proxy,我们可以拦截并不存在的属性的读取

点击更多...

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