Dom

标签：注册   引用   lse   offsetx   attach   user   chm   get   ttext   

DOM

1.什么是DOM------------Document Object Model  文档对象模型

作用：DOM是为JS操作浏览器的页面效果提供的一种介质对象.

作用范围：HTML文档和XML文档

2.两个概念--------------节点和节点层次

节点：页面中的所有内容都是节点(标签---文字---注释----脚本----DTD声明)

节点层次: 节点之间的关系

3.Node类型 (节点类型)---浏览器中所有节点的基本类型，任何节点都是由该节点创建的

4.JS中用Node类型制作的12种节点类型实例（重要的四个）

ELEMENT_NODE--------1   元素节点

ATTRIBUTE_NODE------2   属性节点

TEXT_NODE---------------3   文本节点

DOCUMENT_NODE------9   文档节点

5.节点描述属性

  nodeName节点名称

元素节点：大写的标签名===属性节点：属性名称====文本节点：#text====文档节点：#document

nodeType 节点类型

元素节点：1============属性节点：2==========文本节点：3=====文档节点：9

nodeValue 节点值

元素节点：null==========属性节点：属性值======文本节：文本的内容=====文档节点：null

6.节点关系属性

firstChild  获取当前节点的第一个子节点  (元素节点)

lastChild 获取当前节点的最后一个子节点 (元素节点)

childNodes 获取当前节点的所有子节点(复数)

nextSibling  获取当前节点的下一个兄弟节点

previousSibling 获取当前节点的上一个兄弟节点

parentNode 获取当前节点的父节点

注意：在IE浏览器中会忽略元素节点之间的空白文本节点，而非IE浏览器都不会忽略

7.兼容性处理:

var nextBrother=baby.nextSibling.nodeType==1?baby.nextSibling:baby.nextSibling.nextSibling;

8.节点关系属性图

9.节点的操作方法:

hasChildNodes() 检测某个节点是否具有子节点

appendChild() 在节点的子节点列表最后插入一个新节点

insertBefore() 在节点的子节点列表指定节点之前插入一个新节点

replaceChild() 使用新的节点替换指定的子节点

removeChild() 删除节点的指定子节点

cloneNode()  克隆任意节点

节点的操作方法:

hasChildNodes() 检测某个节点是否具有子节点

格式：节点.hasChildNodes()

返回一个布尔值 true有子节点 false 没有子节点

appendChild() 在节点的子节点列表最后插入一个新节点

格式：节点.appendChild(新的节点);//新节点需要先创建

insertBefore() 在节点的子节点列表指定节点之前插入一个新节点

格式：节点.insertBefore(新节点,位置节点);

replaceChild() 使用新的节点替换指定的子节点

格式：节点.replaceChild(新节点，被替换的节点)

removeChild() 删除节点的指定子节点

格式：节点.removeChild(子节点)

cloneNode()  克隆任意节点

格式：节点.cloneNode()  克隆节点

格式：节点.cloneNode(true)  克隆节点及其子节点

Document节点类型：

文档节点在JS中无需查找，直接就可以使用document进行访问，这是文档的入口

属性：

documentElement  表示页面的HTML标签 //document.documentElement.nodeName

如果在部分浏览器中无法使用该属性可以通过document的子节点方式来查找或

者查找元素的方式获取.

body      获取当前当前页面的body节点 //document.body.nodeName

doctyp    获取页面的DTD声明节点  低版本IE不支持 //document.doctype

title      获取页面的标题值 也可以设置值

URL    获取当前页面的URL地址

domain    获取当前页面的域名

cookie      获取当前浏览器存储的Cookie值

如果需要JS操作cookie 可以搜索 getCookie函数

方法：

getElementById()   通过ID来查找指定的元素节点

getElementsByTagName() 通过标签名来查找指定的元素节点的集合

getElementsByName() 通过name属性来获取指定的元素节点的集合.

createElement()   创建一个元素节点 //var ul=document.createElement(‘ul‘);

createAttribute()   创建一个属性节点 //var id1=document.createAttribute(‘id‘);

createTextNode()   创建一个文本节点 // var txt1=document.createTextNode(‘111111111‘);

open() 打开一个新的文档流

write() 向文档中输入文档流

writeln() 向文档中输入文档流 每次输入后会追加\n

close() 关闭一个文档流

Element元素节点：

成员属性：

tagName: 返回当前元素节点的名称 // console.log(username.tagName);//INPUT

attributes ：返回当前元素节点的属性节点集合 //console.log(username.attributes);

//NamedNodeMap {0: type, 1: name, 2: id, 3: value, length: 4, getNamedItem: function..}

成员方法：

getAttribute() 获取元素的指定名称属性值// console.log(userpass.getAttribute(‘name‘));//userpass

setAttribute() 设置元素指定名称属性的值

// console.log(username.setAttribute(‘value‘,‘machong‘));//machong

removeAttribute() 移除指定名称的属性// console.log(sex.removeAttribute(‘type‘));

注意： 对于元素节点的操作除了使用DOM之外还可以使用HTML DOM  HTML DOM 是专门用于操作HTML代码使用的DOM，兼容性和方法都比较快捷方便.

快捷操作：

1.在页面中每一个具有ID的元素，在JS中都具备一个同名的变量表示当前id所在的元素节点

2.标签->DOM->对象  三者之间具有统一的关系

HTML(元素/标签) ->DOM(元素节点)->JS(对象)

HTML(文本内容)->DOM(文本节点) -> JS(对象)

HTML(注释)->DOM(注释节点)->JS(对象)

....

在HTML页面中出现的元素会变为JS的对象，元素的属性会变为JS对象的成员属性

3.特殊的属性名：

class   ->  className

style  -> 获取的结果不是一个字符串而是一个CSS属性集合对象

Attribute节点：

属性节点的操作都是通过元素节点的attributes属性找到对应的属性节点集合(节点列表)，然后就可以查找到对应的属性节点，也可以使用属性节点的方法.

getNamedItem() 获取指定名称的属性节点

格式：元素节点.attributes.getNamedItem(‘节点名称’);

setNamedItem() 添加或者修改某个元素节点的属性节点

格式：元素节点.attributes.setNamedItem(属性节点);

removeNamedItem() 移除某个指定的属性节点

格式：元素节点.removeNamedItem(‘节点名称’);

TextNode文本节点：

appendData()  在文本节点的最后插入内容

格式：文本节点.appendData(内容)

deleteData() 在指定位置删除指定长度的文本内容

格式：文本节点.deleteData(位置,长度)

insertData() 在指定的位置插入指定的内容

格式：文本节点.insertData(位置,内容)

replaceData() 使用新内容替换指定位置的指定长度

格式：文本节点.replaceData(位置，长度，内容);

splitText() 切割文本节点  把一个节点切割成N个文本节点

格式：文本节点.splitText(位置)

substringData() 文本节点的内容切割方法

格式：文本节点.substringData(位置，长度)

document.normalize() 文本节点正常化

格式:document.normalize()

HTML5及DOM2.3扩展。

innerHTML  

获取/设置元素内部所有的内容，包括文本，标签注释等...解析HTML标签

innerText / textContent

获取/设置元素内容的文本内容，该方法设置时不解析HTML标签

outerHTML  

获取当前元素和元素内容的所有内容，包括文本、注释、标签等。。可以解析HTML标签效果.

outerText

获取当前元素和元素内部的所有文本内容，但是效果和innerText一样

节点新增的属性：关系属性。

firstElementChild 获取元素的第一个子元素节点

lastElementChild 获取元素的最后一个子节点

nextElementSibling获取下一个兄弟元素节点

previousElementSibling获去上一个兄弟元素节点

ChildElementCount 获取某个元素的子元素节点个数

children获取元素所有子元素节点的列表

新的获取元素的方法：

getElementsByClassName()  通过元素的class属性来获取节点集合

格式1：document.getElementsByClassName()  全文档查找

格式2: 元素节点.getElementsByClassName()  元素内部查找

getElementsByTagName() 通过元素的标签名来会获取属性节点集合

格式1：document.getElementsByTagName()  全文档查找

格式2: 元素节点.getElementsByTagName()  元素内部查找

querySelector() 通过CSS选择器来查找所有符合当前选择器的元素，但是返回第一个。

querySelectorAll() 通过CSS选择器来查找所有符合当前选择器的元素，返回所有符合当前选择器的数组.

事件机制

1.事件---在页面中对内容或者控件的任意操作

2.事件流机制 a)事件执行的流程就是事件流 b)事件流的分类:冒泡流  /  捕获流

 捕获流是网景公司提出的   冒泡流是微软公司提供的

3.W3C的标准事件流：（DOM2阶段提出） 1.事件流的捕获阶段 2.处于事件阶段 3.事件流的冒泡阶段

4.事件的注册和删除 1.DOM0 标准     2.DOM2标准

DOM0阶段:

添加方法：方法1:<div onclick="show()"></div>

 方法2:元素节点.onclick=function(){函数体}

删除方法：元素节点.onclick=null;

DOM2阶段:

IE中事件的添加和删除

attachEvent() 格式：元素节点.attachEvent(on事件类型,事件方法)

参数1：事件类型  必须写on

参数2：事件方法，推荐使用声明函数，因为删除时还需使用该函数

detachEvent() 格式： 元素节点.detachEvent(on事件类型,事件方法)

参数1：事件类型  必须写on

参数2：事件方法，推荐使用声明函数，因为删除时还需使用该函数

非IE中事件的添加和删除

addEventListener()

格式:元素节点.addEventListener(事件类型,事件方法,布尔值)

参数1：事件类型 没有on

参数2：事件方法，推荐使用声明函数，因为删除时还需要使用该函数

参数3：指定事件发生的阶段，true捕获  false冒泡，一般使用false 为兼容IE

removeEventListener()

格式:元素节点.addEventListener(事件类型,事件方法,布尔值)

参数1：事件类型 没有on

参数2：事件方法，推荐使用声明函数，因为删除时还需要使用该函数

参数3：指定事件发生的阶段，true捕获  false冒泡，一般用false为了兼容IE

事件的类型：

事件对象：

用于存储和事件操作相关信息的一个对象。

在IE和非IE中事件对象是不一样的.

IE  在window对象中有一个event属性   window.event

非IE   在事件方法的第一个参数传入  

兼容性解决方案：

var e=window.event?window.event:evt;

var e=window.event || evt;

鼠标 / 键盘属性

IE 属性

除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性：

标准 Event 属性

下面列出了 2 级 DOM 事件标准定义的属性。

标准 Event 方法

下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：

Dom

标签：注册   引用   lse   offsetx   attach   user   chm   get   ttext   

原文地址：https://www.cnblogs.com/machongblogs/p/9919778.html