第六周、前端预习--DOM
一、DOM简介
1.什么是 DOM?
DOM 是一项 W3C (World Wide Web Consortium) 标准。
DOM 定义了访问文档的标准: “W3C 文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分:
- Core DOM - 所有文档类型的标准模型
- XML DOM - XML 文档的标准模型
- HTML DOM - HTML 文档的标准模型
2.什么是HTML DOM
HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准
HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了:
- 作为对象的 HTML 元素
- 所有 HTML 元素的属性
- 访问所有 HTML 元素的方法
- 所有 HTML 元素的事件
3.DOM树
HTML DOM 模型被结构化为对象树:
二、获取元素
1.根据id获取元素
var a = document.getElementById("id名");
- 由于id 名具有唯一性,部分浏览器支持直接使用id名访问元素,但不是标准方式,不推荐使用。
- 代码执行顺序,如果js 在 html结构之前,会导致结构未加载,不能获取对应id的元素。
2.根据标签名获取元素
var divs = document.getElementsByTagName("标签名");
- 操作数据时需要按照操作数组的方法进行
- getElementsByTagName方法内部获取的元素是动态增加的
3.根据name属性获取元素
var ages = document.getElementsByName("name名称");
4.根据选择器获取元素
querySelector()方法括号中的值是元素的选择器,此方法直接返回DOM对象本身。
var p = document.querySelector('选择器');
querySelector()和querySelectorAll()方法括号中的取值都是选择器,但两个方法是有区别的。当有多个class相同的元素时,使用querySelector()方法只能获取到第一个class的元素,而querySelectorAll()获取到了所有class相等的元素集合。
var ps = document.querySelectorAll('选择器');
5.根据class属性获取元素
参数是字符串class属性值,返回值是一个相同属性值的集合数组
var paras = div.getElementsByClassName("类名");
三、事件
HTML DOM 允许 JavaScript 对 HTML 事件作出反应
常用事件:
- onclick 通过鼠标点击来触发事件
- onmouseover 鼠标被移到某元素上
- onmouseout 鼠标移开某元素
- onfocus 元素获得焦点
- onchange 当输入域的内容改变并失去焦点后发生
- onload 页面或图像加载完成后立即发生
- onblur 元素失去焦点
- onkeyup 在键盘按键被松开时发生
- onsubmit 表单提交事件
四、文档
HTML DOM 文档对象是您的网页中所有其他对象的拥有者
1.HTML DOM Document 对象
文档对象代表您的网页。
如果您希望访问 HTML 页面中的任何元素,那么您总是从访问 document 对象开始。
2.DOM增删改查
增、删:
- document.createElement(element) 创建 HTML 元素
- document.removeChild(element) 删除 HTML 元素
- document.appendChild(element) 添加 HTML 元素
- document.replaceChild(element) 替换 HTML 元素
- document.write(text) 写入 HTML 输出流
改: - element.innerHTML = new html content 改变元素的 inner HTML
- element.attribute = new value 改变 HTML 元素的属性值
- element.setAttribute(attribute, value) 改变 HTML 元素的属性值
- element.style.property = new style 改变 HTML 元素的样式
查: - document.anchors 返回拥有 name 属性的所有 元素
- document.applets 返回所有 元素(HTML5 不建议使用)
- document.baseURI 返回文档的绝对基准 URI
- document.body 返回 元素
- document.cookie 返回文档的 cookie
- document.doctype 返回文档的 doctype
- document.documentElement 返回 元素
- document.documentMode 返回浏览器使用的模式
- document.documentURI 返回文档的 URI
- document.domain 返回文档服务器的域名
- document.domConfig 废弃。返回 DOM 配置
- document.embeds 返回所有 元素
- document.forms 返回所有 元素
- document.head 返回 元素
- document.images 返回所有 元素
五、节点
加载HTML页面时,Web浏览器生成一个树型结构,用来表示页面内部结构,DOM将这种树型结构理解为由节点组成,组成一个节点树
1.节点类型
节点类型 | HTML内容 |
---|---|
文档节点 | 文档本身 |
属性节点 | HTML元素内的属性 |
注释节点 | 注释节点 |
元素节点 | 所有的HTML元素 |
文本节点 | 元素的文本 |
2.节点获取
名称 | 描述 |
---|---|
getElementById() | 获取带有指定id的节点 |
getElementsByTagName() | 获取带有指定标签名的节点集合 |
querySelector() | 获取指定选择器或选择器组匹配的第一个节点 |
querySelectorAll() | 获取指定选择器或选择器组匹配的所有节点集合,获取结果为节点集合,集合索引从0开始,依次增加 |
3.节点层级
- 父级节点
node.parentNode
parentNode属性可返回某节点的父节点,注意是最近的一个父节点
如果指定的节点没有父节点则返回null
- 子节点
parentNode.childNodes(标准)
parentNode.childNodes返回包括指定节点的子节点的集合,该集合为即时更新的集合
注意:返回值里面包括了所有的子节点,包括元素节点,文本节点等。
- 兄弟节点
返回上/下一个兄弟节点,包含元素节点、文本节点等。
- 下一个兄弟节点node.nextSibling
- 上一个兄弟节点node.previousSibling
返回上/下一个兄弟元素节点
- 下一个兄弟元素节点node.nextElementSibling
- 上一个兄弟元素节点node.previousElementSibling