DOM 专门操作网页内容的一套对象和函数的标准
除IE8 几乎所有浏览器 都兼容DOM标准
DOM 五件事:增删改查 事件绑定
DOM树
一个网页所有内容 在内存中都存储在一个树型结构上
属性结构是最直观的存储上下级嵌套关系的结构
当浏览器获得一个网页要加载时 先在内存中创建一个唯一的树根节点document
顺序扫描网页内容 每扫描到一项网页内容(元素文本属性注释，。。。)
就会在DOM树上对应的父节点下创建子节点对象保存这个内容的详细信息
如标签名 属性等
查找元素
1.不需要查找就可直接获得元素
兄弟: 节点.nextSibling 获得当前节点的下一个节点
节点.previousSibling 获得当前节点的上一个节点
节点树:包含所有网页内容的完整树结构
元素节点 属性节点 文本节点(包括换行 空格 tab等看不到的文本节点)
元素树:仅包含元素节点的树结构 不包括任何文本节点 查找不会受到干扰
不是一颗新树 只是坐在原本节点树基础上添加了专门指向元素节点的指向
今后所有的查找 都按照元素树查找
父子: 节点.parentElementNode 获得当前节点的父节点
节点.childElementNodes 获得当前节点的所有直接子节点 数组形式
节点.firstElementchild 获得当前节点的第一个直接子节点
节点.lastElementchild 获得当前节点的最后一个直接子节点
兄弟: 节点.nextElementSibling 获得当前节点的下一个节点
节点.previousElementSibling 获得当前节点的上一个节点
每个元素节点 都有一个.nodeName属性 保存标签名
笔试题:给定任意一个父节点 遍历出这个父节点所有后代节点
第一步:先定义一个函数仅遍历直接子节点
二叉树遍历算法**** 自己看
parentNode 和 parentElement 可以通用
3.按照HTML特征查找 4种特征
按id查找 var 查找的元素=document.getElementById("#id")
按类名查找 var 类数组对象=document.getElementsByClassName(".类名")
按标签名查找 var 类数组对象=document.getElementsByTagName(“标签名”)
按name查找 var 类数组对象=document.getElementsByName(“name”)
.前可以是任意父元素 可以缩小查找范围 在所有后代元素中查找
DOM中没有数组！查找的返回值都是类数组对象 如果没有找到 返回空对象
如果只查找一个元素 返回值是类数组对象 应该在最后添加[0]才能取出此元素
4.按选择器查找: 当查找条件非常复杂时 首选
只查找一个符合条件的元素
var 元素=任意父元素.querySelector(“选择器”)
如果找到返回匹配到的第一个元素，否则返回null
可在任意父元素上调用 来缩小查找范围
选择器参数 几乎支持所有css中的选择器
即使选择器能匹配多个元素 也只能返回第一个元素对象
查找多个符合条件的元素
var 类数组对象=任意父元素.querySelectorAll(“选择器”)
返回一个类数组对象
可在任意父元素上调用 来缩小查找范围
选择器参数 几乎支持所有css中的选择器
DOM事件
浏览器自动触发的或用户手动触发的页面内容状态的改变
事件处理函数:自定义的 希望在事件发生时自动执行的函数
事件属性:每个元素都有一批属性 以on开头 后跟事件名
onclick onmouseover onchange …
事件处理函数中的this
因为当事件发生时 会自动调用事件处理函数
获取this是事件处理函数的第一步
a.getELementsByXXX VS a.querySelectorAll()
返回值类型不同:
a.getElementsByxxx
动态集合 返回的是动态的类数组对象
不实际存储对象的属性这阵子 而是每次访问集合时都重新查找DOM树
优点:首次查找速度快
缺点:反复访问集合 导致重复查找dom树
a.querySelectorAll()
非动态集合:返回的是非动态的类数组独享 简称非动态集合
在首次查找时 就复制出所有的数据在集合中 今后即使反复访问集合 也不回反复查找DOM树
优点:即使反复查找也不回反复查找DOM树
缺点:首次查询速度慢
当多条件查找时 使用querySelectorAll()
当仅靠一个条件时 使用getElementsByXXX
修改:
DOM获取到一个元素后 可以修改三种东西
内容
属性
样式
修改元素的内容
1.获取或修改元素开始标签到结束标签之间的原始HTML片段
元素.innerHTML
元素.innerHTML = “新内容”
2.获取或修改元素开始标签到结束标签之间的纯文本内容
元素.textContent
元素.textContent=“新文本”
比innerHTML多做两件事 去掉内嵌的标签 将特殊符号翻译为正文
修改元素的属性
1.获取或修改HTML标准属性
HTML标准属性 是指 在HTML标准中规定的属性
获取一个属性的值 元素.getAttribute(“属性名”)
修改一个属性的值 元素.setAttribute(“属性名”,“新值”)
判断当前元素是否包含一个属性:var bool=元素名.hasAttribute(“属性名”)
移除某个属性: 元素.removeAttribute(“属性名”);
2.用简化版HTML DOM函数
HTML DOM将标准属性提前放置在元素对象上 让我们可以通过 . 直接访问
获取属性值 元素.属性名
修改属性值 元素.属性名=值
判断是否包含属性 元素.属性名 ！=""
移除某个属性 元素.属性名=""
特例:class属性: ES核心语法规定class是js语言的关键字遭质疑 所以其他技术或者框架并不能再用class作为属性名或者变量 但是html中存在class属性
DOM操作元素的class属性 应更名为className属性
返回值 总结
凡是返回值为下标的函数 找不到都返回-1
indexOf() search()
凡是返回值为一个对象或者数组的 找不到都返回null
match() getElementByid() querySelector()
凡是返回值为一个集合(类数组对象)找不到都返回长度为0的空类数组对象: [].length=0
没有返回值的函数 返回undefined
3.获取或修改状态属性
没有属性值 只要放在开始标签中 就能起作用的属性
disabled checked selected等
所有状态属性的值都不是字符串类型 而是布尔值
操作状态属性
不能使用核心DOM4个函数 因为这四个函数这孩子能操作字符串类型的属性
只能用 . 直接访问 且值只能是布尔类型
css中有一批状态伪类
:disabled
:checked
:selected
专门选择处于某种状态的元素
获取或修改自定义扩展属性
HTML中没有规定的程序员自发添加的自定义属性
代替其他选择器 用来专门选择触发事件的元素
避免因其他选择器改变而影响js程序的执行
其他选择器的问题:
id选择器:只能选择一个元素
元素选择器:实现一个功能不一定使用某种固定的元素
class选择器:专门用于为元素添加样式 将来一旦样式改变 class很可能改变
boot中 为触发事件的元素添加自定义属性:data-
boot在查找这些元素时 使用属性选择器 [attr=value]
如何使用: 1.在元素上添加自定义扩展属性
其实属性名没有显示 但是如果想使用html5标准的福利
必须 data-自定义属性名=“属性值”
2.查找带有自定义扩展属性的元素
[data-属性名=属性值]
3.获取或修改自定义扩展属性的属性值
不能用 . 获取或修改
自定义扩展属性都是后添加的属性 DOM标准的元素对象中不可能包含
可以用核心DOM访问 getAttribute()
setAttribute()
removeAttribute()
hasAttribute()
核心DOM是临时从页面上查找 所以可以找到自定义属性
获取: 元素名.getAttribute(“data-自定义属性名”)
修改: 元素名.setAttribute(“data-自定义属性名”,“新值”)
HTML5标准会收集所有的data-前缀的属性 保存在这个元素的 dataset属性中 然后可用.访问dataset中保存的自定义扩展属性
元素名.dataset.自定义扩展属性名
修改样式
元素.style.样式属性=“属性值” 相当于设置内联样式
css属性名中带 - 都应该去横线变驼峰
获取样式
使用style属性获取元素的样式 因为 style仅能获取到元素的内联样式 所以存在样式丢失 不能获取到样式表中的样式
今后只要获取样式 都获取计算后的样式
计算后的样式是指 最终应用到此元素上的所有css属性的集合
获得完整的计算后的样式对象 var style = getComputedStyle(元素)
从计算后的样式对象中获取一个css属性值 var 属性值 = style.css属性名
计算后的样式 不但手机所有css属性 而且还会将相对单位的css属性值 计算为绝对单位的css属性值
计算后的样式来源不确定 所以只读 如果要修改样式 只能用.style.css属性覆盖
获取样式: getComputed(元素)
修改样式: .style.css属性
能用一句话修改的样式属性 绝不用两句话！！！
减少重绘
重绘:没有影响页面布局 只需要重新绘制
重排:修改了css布局 需要对页面重新排版并绘制
多条对元素样式的修改 可以简写为:元素.style.cssText=“样式1;样式2;。。。”
浏览器呈现页面的步骤
扫描html文件构建dom树
扫描css文件构建css对象模型
由内容排版引擎幅准则根据css样式对页面排版
由绘图引擎将页面内容绘制出来
网页封板
添加删除元素
添加元素:先创建一个空元素 var 元素=document,createEleemnt(“元素名”)
为空元素添加必要属性 元素.属性=属性值
将空元素挂载到DOM树上
a.将新元素追加到一个父元素下所有子元素末尾
父元素.appendChild(新元素)
b.将新元素插入到父元素下一个现有元素之前
父元素.insertBefore(新元素,现有元素)
c.用新元素替换父元素下一个现有元素
父元素.replaceChild(新元素,现有元素)
删除元素: a.用父元素删除一个子元素 父元素.removeChild(子元素)
b.子元素.parentNode.removeChild(子元素)
HTML DOM 常用对象
HTML DOM对常用的DOM元素和函数进行了一些简化
1.Image对象
a.Image对象代表页面上一个img元素
b.创建img元素时 var img = new Image();
c.绝不是所有元素都能用new创建
常用的只有两个元素可以 new Image()和 new Option()
2.Select对象
a.Select对象代表页面上一个select对象
b.简化: select.selectedIndex 获得当前选中项的下标
select.value 获得当前选中项的值
如果当前选中项有value 返回value的值
如果当前选中项没有value属性 则返回当前选中项的值
select.option 获取当前select下所有option的集合
select.length 获取当前select下所有option的个数
c.添加option:select.add(option对象) 此方法不支持文档片段
移除i位置上的option: select.remove(i);
d.select下包含多个option对象 每个option对象也有简写
当创建option时:var opt=new option(“内容文本”,value)
3.Table对象
table元素完整结构包含4级元素 HTML DOM定义了一套逐级管理的函数
a.table管着行分组 (thead tbody tfoot)
创建:var thead = table.createTHead
var tbody = table.createTBody() var tfoot = table.createTFoot()
删除:table.deleteTHead()
table.deleteTFoot
没有table.deleteTBody()
获取:table.thead
table.tfoot
table.tbodies[i]
b.行分组管着行
添加行:var tr = 行分组.insertRow(i)
在行分组内第i行插入一个新行，将原i位置的行向后挤
末尾插入一个新行 var tr=行分组.insertRow();
开头插入一个新行 var tr=行分组.insertRow(0);
删除行 行分组.deleteRow(i)
i 要求是 要删除的行在当前行分组内的相对下标位置
其实每个tr对象在整个表中有一个下标位置 保存在rowIndex中
行分组.deleteRow(tr.rowIndex) 并不匹配
今后删除行不用行分组 而是 table.deleteRow(tr.rowIndex)
获取行 行分组.rows[i]
c.行管着格
添加格:var td=tr.insertCell()
删除格:var td=tr.deleteCell()
获取格:tr.Cells[i]
4.Form对象
form对象代表页面上的一个form元素
获取 var form = doeument.forms[i]
属性上的简化: form.elements获得表单中所有的表单元素的集合
表单元素仅包括 input textarea button select等
form.length 获得表单中表单元素的个数
在表单中获取某一个表单元素
var 表单元素=form.elements[i/name/id]
简写 如果表单元素有name属性 则可用 var 表单元素=form.name值
表单元素的方法: 表单元素.focus() 让当前表单元素获得焦点
做所有DOM操作的四步
1.查找触发事件的元素
2.绑定事件
3.查找要修改的元素
4.修改元素
单词列表
node 节点
attribute 属性 程序中特指HTML中的属性
property 属性 程序中特指程序内存中对象里的能用.访问的属性
compute 计算 computed 计算后的
浏览器三大对话框
输入框 prompt()输入一行内容
警告框 alert()弹出一个提示 只有一个按钮 确定
确认框 confirm()弹出一个提示 有两个按钮可以点 确定&取消
优化:
1.条件简单 使用html特征选择元素 getElementByXXX
条件复杂 使用选择器选择则元素
2.css样式修改 能写一句话 绝不用两句话
3.只要添加删除元素都会修改dom树 都会导致重排重绘
4.减少操作odom树的次数 但是内容不减少
如果同时添加父元素和子元素时 应该先在内存中将所有的子元素加入到父元素中
如果父元素已存在仅添加多个平级子元素 应该借助文档片段对象
创建文档片段对象
var 文档片段对象=document.createDocumentFragment();
先将子元素都追加到文档片段对象中
最后将文档片段对象整体添加到dom树上
文档片段对象 仅将DOM元素加入到DOM树上 本身不会加入
5.尽量减少事件监听对象的个数 减少遍历查找箭筒对象的时间 提高响应速度
利用事件委托/代理 ：获得目标元素 筛选目标元素
当无法限制用户行为时 无法预料发生什么错误时 try-catch就是必须的
DOM事件:
onload
onclick
onchange
笔试题
页面上不确定个数的相同元素
要求 点哪个元素 弹出 点的是第几个
赋值表达式 会返回等号右侧的值
扫一扫
211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
