Dom

Posted 2021-01-18 machongblogs

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() 向文档中输入文档流 每次输入后会追加

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

 

事件的类型：

javascript事件列表
事件		解说
一般事件	onclick	鼠标点击时触发此事件
	ondblclick	鼠标双击时触发此事件
	onmousedown	按下鼠标时触发此事件
	onmouseup	鼠标按下后松开鼠标时触发此事件
	onmouseover	当鼠标移动到某对象范围的上方时触发此事件
	onmousemove	鼠标移动时触发此事件
	onmouseout	当鼠标离开某对象范围时触发此事件
	onkeypress	当键盘上的某个键被按下并且释放时触发此事件.
	onkeydown	当键盘上某个按键被按下时触发此事件
	onkeyup	当键盘上某个按键被按放开时触发此事件
页面相关事件	onabort	图片在下载时被用户中断
	onbeforeunload	当前页面的内容将要被改变时触发此事件
	onerror	出现错误时触发此事件
	onload	页面内容完成时触发此事件
	onmove	浏览器的窗口被移动时触发此事件
	onresize	当浏览器的窗口大小被改变时触发此事件
	onscroll	浏览器的滚动条位置发生变化时触发此事件
	onstop	浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断
	oncontextmenu	当弹出右键上下文菜单时发生
	onunload	当前页面将被改变时触发此事件
表单相关事件	onblur	当前元素失去焦点时触发此事件
	onchange	当前元素失去焦点并且元素的内容发生改变而触发此事件
	onfocus	当某个元素获得焦点时触发此事件
	onreset	当表单中RESET的属性被激发时触发此事件
	onsubmit	一个表单被递交时触发此事件

 

事件对象：

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

 

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

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

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

兼容性解决方案：

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

var e=window.event || evt;

 

 

 

鼠标 / 键盘属性

属性	描述	IE	F	O	W3C
altKey	返回当事件被触发时，"ALT" 是否被按下。	6	1	9	Yes
button	返回当事件被触发时，哪个鼠标按钮被点击。	6	1	9	Yes
clientX	返回当事件被触发时，鼠标指针的水平坐标。	6	1	9	Yes
clientY	返回当事件被触发时，鼠标指针的垂直坐标。	6	1	9	Yes
ctrlKey	返回当事件被触发时，"CTRL" 键是否被按下。	6	1	9	Yes
metaKey	返回当事件被触发时，"meta" 键是否被按下。	No	1	9	Yes
relatedTarget	返回与事件的目标节点相关的节点。	No	1	9	Yes
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。	6	1	9	Yes
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。	6	1	9	Yes
shiftKey	返回当事件被触发时，"SHIFT" 键是否被按下。	6	1	9	Yes

 

IE 属性

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

属性	描述
cancelBubble	如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
fromElement	对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。
keyCode	对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
offsetX,offsetY	发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
returnValue	如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。
srcElement	对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement	对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。
x,y	事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。

标准 Event 属性

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

属性	描述	IE	F	O	W3C
bubbles	返回布尔值，指示事件是否是起泡事件类型。	No	1	9	Yes
cancelable	返回布尔值，指示事件是否可拥可取消的默认动作。	No	1	9	Yes
currentTarget	返回其事件监听器触发该事件的元素。	No	1	9	Yes
eventPhase/4	返回事件传播的当前阶段。				Yes
target	返回触发此事件的元素（事件的目标节点）。	No	1	9	Yes
timeStamp	返回事件生成的日期和时间。	No	1	9	Yes
type	返回当前 Event 对象表示的事件的名称。	6	1	9	Yes

标准 Event 方法

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

方法	描述	IE	F	O	W3C
initEvent()	初始化新创建的 Event 对象的属性。	No	1	9	Yes
preventDefault()	通知浏览器不要执行与事件关联的默认动作。	No	1	9	Yes
stopPropagation()	不再派发事件。	No	1	9	Yes