原生jsdom

㈠ js和dom是什么关系

BOM是浏览器对象模型，用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。
DOM是文档对象模型，用来获取或设置文档中标签的属性，例如获取或者设置input表单的value值。
BOM的内容不多，主要还是DOM。

由于DOM的操作对象是文档（Document），所以dom和浏览器没有直接关系。

㈡ 常见的DOM操作有哪些

前言

DOM（Document Object Model）即文档对象模型，针对 HTML 和 XML 文档的 API（应用程序接口）。DOM 描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。DOM 脱胎于 Netscape 及微软公司创始的 DHTML（动态 HTML），但现在它已经成为表现和操作页面标记的真正跨平台、语言中立的方式。

阅读目录

基本概念
节点创建型api
页面修改型API
节点查询型API
节点关系型api
元素属性型api
元素样式型api

总结

文本整理了javascript操作DOM的一些常用的api，根据其作用整理成为创建，修改，查询等多种类型的api，主要用于复习基础知识，加深对原生js的认识。

基本概念

在讲解操作DOM的api之前，首先我们来复习一下一些基本概念，这些概念是掌握api的关键，必须理解它们。

Node类型

DOM1级定义了一个Node接口，该接口由DOM中所有节点类型实现。这个Node接口在JS中是作为Node类型实现的。在IE9以下版本无法访问到这个类型，JS中所有节点都继承自Node类型，都共享着相同的基本属性和方法。

Node有一个属性nodeType表示Node的类型，它是一个整数，其数值分别表示相应的Node类型，具体如下：

Node.ELEMENT_NODE:1
Node.ATTRIBUTE_NODE:2
Node.TEXT_NODE:3
Node.CDATA_SECTION_NODE:4
Node.ENTITY_REFERENCE_NODE:5
Node.ENTITY_NODE:6
Node.PROCESSING_INSTRUCTION_NODE:7
Node.COMMENT_NODE:8
Node.DOCUMENT_NODE:9
Node.DOCUMENT_TYPE_NODE:10
Node.DOCUMENT_FRAGMENT_NODE:11
Node.NOTATION_NODE:12

假设我们要判断一个Node是不是元素，我们可以这样判断
if(someNode.nodeType == ){ console.log("Node is a element"); }
这些Node类型中，我们最常用的就是element，text，attribute，comment，document，document_fragment这几种类型。
我们简单来介绍一下这几种类型：

Element类型

Element提供了对元素标签名，子节点和特性的访问，我们常用HTML元素比如div，span，a等标签就是element中的一种。Element有下面几条特性：

（1）nodeType为1
（2）nodeName为元素标签名，tagName也是返回标签名
（3）nodeValue为null
（4）parentNode可能是Document或Element
（5）子节点可能是Element，Text，Comment，Processing_Instruction，CDATASection或EntityReference

㈢ 如何用js获取id 元素内容

可以使用js的attr方法实现用js获取id元素内容。

具体步骤如下：

需要准备的材料分别是：电脑内、浏览器、容ultraedit。

1、在ue编辑器中新建一个空白的html文件，js文件。

㈣ js原生dom对象和jQuery对象可以混合使用吗

Dom原生对象和jQuery对象的区别：
1.jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是 两种不同的对象类型，两者不等价 ；
注：js原生获取的dom是一个对象，jQuery对象就是一个数组对象，其实就是选择出来元素的数组集合。所以说他们两者是不同的对象类型不等价。
2.jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法. 乱使用会报错。
例如（文章下面有两个踩坑经历。）：
$("#id").html();
document.getElementById("id").innerHTML;
意思是指：获取ID为id的元素内的html代码。这两段代码 结果相同，但中间的取值过程不同 。
即：$("#id").innerHTML、document.getElementById("id").html()之类的写法都是错误的。
注：jQuery是从js衍生出来的，师出同源，但是jQuery是 经过一系列操作 之后，将其封装成了一个个不同的方法，学习jQuery开始就应当树立正确的观念，分清jQuery对象和DOM对象之间的区别，之后学习 jQuery就会轻松很多的。

㈤ JS之DOM操作

DOM： Document Object Model，文档对象模型；js提供了丰富的api来操作文档内容。
DOM树： html文档中的内容是以树形结构排布，html是DOM树根，html下只有两个子标签head、body
节点： DOM将所有的分支端都成为节点。节点有很多类型，常见的节点类型有：文本节点、元素节点。
可以通过 nodeType查看节点类型 ： 1元素节点、3文本节点

特殊的元素节点：
1、html元素

2、body元素

3、head元素

节点操作的api（属性和方法）
1、nodeName：只读属性，可以读取节点名称

2、nodeType：只读属性，读取节点类型

3、 hasChildNodes()：判断调用方法的节点是否存在子节点，存在返回true，不存在返回false。
主流浏览器会将换行符、制表符、空格当做文本节点处理，IE9以下会忽略它们。

4、childNodes：只读属性，获得节点的子节点集合，子节点集合是一个类数组结构，有数组特点无数组方法

5、firstChild：获得节点的第一个子节点

6、lastChild：获得节点的最后一个子节点

7、querySelector()：
参数：string类型，css选择器
作用：获得文档中第一个符合选择器条件的节点
兼容：在IE9以下不支持

8、 querySelectorAll()： // 获得的都是静态集合
参数：string类型，css选择器
作用：获得文档中所有符合选择器条件的节点集合（类数组结构）
兼容：在IE9以下不支持

注意： querySelector() 和 querySelectorAll() 得到的都是元素节点。

9、previousSibling：获取节点的前一个兄弟节点

10、nextSibling：获取节点的后一个兄弟节点

11、parentNode：获得节点的父节点（父节点一定是元素节点）

12、removeChild()：节点删除它的指定子节点
DOM操作元素：暂时不用的隐藏、一定不用的删除。

13、cloneNode()：克隆一个节点
参数：boolean类型，true深克隆，false浅克隆，默认浅克隆
深克隆：不仅克隆节点和节点的属性，还会克隆节点的子节点
浅克隆：只克隆节点和节点的属性，不会克隆节点的子节点

14、a.replaceChild(b,c)：用b替换c
其中a是c的父节点，c是文档上已经存在的节点，b可以是节点也可以是已存在节点，被替换的节点会从文档结构中删除。

15、a.replaceWith(b)：用b替换a
a已存在的节点，b可以是新节点也可以是已存在节点，被替换的节点从DOM树删除。

16、a.insertBefore(b,c)：在c前面插入b
其中，a是c的父节点，c是已经存在的节点，b是新节点

17、a.appendChild(b)：在a末尾追加b

a是父节点，b是a的子节点, c是子节点

元素节点的相关api
1、getElementsByTagName()：根据标签名获得元素集合（类数组结构）

区别：HTMLCollection 是动态集合，NodeList 是静态集合。

2、createElement()：根据标签名创建新元素

3、id：读写属性，可以读取或设置元素的id值

4、className：读写属性，可以读取或设置元素的class值

5、classList：读取标签的类名集合（类数组结构）

add()：为元素新增类名，如果类名已存在不会重复添加

remove()：删除元素指定类名，如果类名不存在不会执行操作

元素的属性分为两类：
一类是元素本里就拥有的属性，例如：id、class、style、src、herf、target、alt、title、type、value等等，这些属性可以在js中直接通过.语法读取或设置。
再一类是我们为了解决问题给元素添加的自定义属性，这些属性在js中无法直接通过.语法读取，需要通过操作方法访问。
6、setAttribute(name,value)
参数：name表示要设置的属性名，value要为属性设置的值
无返回值

7、getAttribute(name)
参数：name表示要读取的属性名
返回值：返回属性的值，如果属性不存在会返回null

8、removeAttribute(name)
参数：name表示要删除的属性名
无返回值

说明：setAttribute()、getAttribute()、removeAttribute()都可以操作元素的本地属性和自定义属性。

element拓展：
兼容：以下属性、方法在IE9以下不支持。

1、children：读取元素的所有元素子节点集合（类数组）

2、parentElement：读取元素的父元素节点

3、previousElementSibling：读取前一个元素兄弟节点

4、nextElementSibling：读取后一个元素兄弟节点

5、firstElementChild：读取第一个元素子节点
6、lastElementChild：读取最后一个元素子节点
7、remove(): 将调用方法的元素从DOM结构中删除