【基础-6】DOM基础:文档对象模型
一、HTML DOM
========================================================================
1、简介
1.定义了访问和操作 HTML 文档的标准方法
2.W3C DOM 标准被分为3部分:
核心 DOM:针对任何结构化文档的标准模型
XML DOM:针对 XML 文档的标准模型
HTML DOM:针对 HTML 文档的标准模型
3.HTML DOM 是:
HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准
2、节点分类:
父 parent
子 child
同胞 sibling
全部文档 document.documentElement
文档主体 document.body
3、节点属性:文本innerHTML、父parentNode、子childNodes、属性attributes
1.nodeType类型:1元素 2属性 3文本 8注释 9文档
2.nodeName属性:只读属性,取值
元素节点:标签名
属性节点:属性名
文本节点:#text
文档节点:#document
3.nodeValue属性:规定节点值,取值
元素节点:undefined、null
文本节点:文本
属性节点:属性值
4、节点方法
1.创建节点
元素:createElement()
文本:createTextNode()
属性:createAttribute()
2.插入新节点
头部:insertBefore()
尾部:appendChild()
替换:replaceChild()
3.删除节点:removeChild()
4.修改节点
HTML相关
输出流:write()
内容:innerHTML = 新的HTML
属性:attribute = 新属性
CSS相关:style.property = 新样式
5.查找节点
ID:getElementById()
标签名:getElementsByTagName()
类名:getElementsByClassName()
属性值:getAttribute()
6.属性值操作
返回:getAttribute()
修改:setAttribute()
5、事件
1.添加事件句柄
不要使用on前缀,事件类型、回调函数、冒泡还是捕获addEventListener(type: DOMString, callback: EventListener, capture?: boolean)
移除:element.removeEventListener("mousemove", myFunction);
浏览器兼容
var x = document.getElementById("myBtn");
if (x.addEventListener) { // 所有主流浏览器,除了 IE 8 及更早版本
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早版本
x.attachEvent("onclick", myFunction);
}
2.常用事件
进入:onload()
离开:onunload()
字段验证:onchange()
鼠标指针:onmouseover()、onmouseout()
鼠标点击:onmousedown()、onmouseup()、onclick()
6、集合 Collection对象
getElementsByTagName()
:返回 HTMLCollection 对象
length 属性:元素的数量
通过 name,id 或索引来获取
7、列表 NodeList对象
所有浏览器的 childNodes
属性返回的是 NodeList 对象
大部分浏览器的 querySelectorAll()
返回 NodeList 对象
只能通过索引来获取
length属性:元素的数量
包含属性节点和文本节点
二、HTML DOM 对象
========================================================================
1、Document对象
每个载入浏览器的 HTML 文档都会成为 Document 对象,Document是Window对象的一部分,
访问:window.document、详细
2、Element对象
HTML元素,NodeList 对象 代表了节点列表,类似于 HTML元素的子节点集合,详细
3、Attribute对象
Attr对象attr.isId
:如果属性是 ID 类型,则 isId 属性返回 true,否则返回 false。attr.name
:返回属性名称attr.value
:设置或者返回属性值attr.specified
:如果属性被指定返回 true ,否则返回 false
NamedNodeMap对象
nodemap.getNamedItem():从节点列表中返回的指定属性节点。
nodemap.item():返回节点列表中处于指定索引号的节点。
nodemap.length:返回节点列表的节点数目。
nodemap.removeNamedItem():删除指定属性节点
nodemap.setNamedItem():设置指定属性节点(通过名称)
4、Event对象:事件的状态,参考
5、Console对象:访问浏览器调试模式的信息到控制台
assert()
:false,输出错误信息clear()
:清除信息count()
:记录 count() 调用次数,一般用于计数error()
:输出错误信息group()
:信息分组 一个完整的信息分组以 console.group() 开始,console.groupEnd() 结束groupCollapsed()
:在控制台创建一个信息分组 类似 console.group() ,但它默认是折叠的groupEnd()
:设置当前信息分组结束info()
:输出一条信息log()
:输出一条信息table()
:以表格形式显示数据time()
:计时器,开始计时间,与 timeEnd() 联合使用,用于算出一个操作所花费的准确时间timeEnd()
:计时结束trace()
:显示当前执行的代码在堆栈中的调用路径warn()
:输出警告信息,信息最前面加一个黄色三角,表示警告
6、CSSStyleDeclaration:样式声明对象
对象属性cssText
:声明文本,cssText 对应的是 HTML 元素的 style 属性length
:多少条声明parentRule
:当前规则的规则
对象方法getPropertyPriority()
:是否设置了 "important!"属性getPropertyValue()
:指定的CSS属性值item()
:索引返回CSS属性名removeProperty()
:移除CSS 属性setProperty()
:在CSS声明块中新建或者修改CSS属性
7、HTMLCollection:HTML元素的集合,类似包含HTML元素的数组列表
item()
:指定索引的元素length
:元素的数量namedItem()
:指定ID或name属性的元素
三、HTML DOM 元素对象
========================================================================
平时常用的每个对象的属性和方法,参考
推荐阅读
-
初识DOM(文档对象模型)
-
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
-
ES6基础之 Promise 对象用法实例详解
-
ES6基础之数组和对象的拓展实例详解
-
【java基础】面试常见问题:类和对象,封装继承多态,final关键字,static关键字,类加载过程,双亲委派模型
-
JavaScript文档对象模型(DOM)——DOM核心操作
-
JS--dom对象:document object model文档对象模型
-
什么是DOM(Document Object Model)文档对象模型
-
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
-
JavaScript 基础(三) - Date对象,RegExp对象,Math对象,Window 对象,History 对象,Location 对象,DOM 节点