前端知识点总结——DOM
1.什么是DOM: Document Object Model
什么是: 特地操纵网页内容的API规范——w3c
为何: 一致差异浏览器操纵网页内容的API规范
长处: 险些一切浏览器100%兼容
2.DOM Tree:
什么是: 网页中一切内容在内存中都是保留在一棵树形构造中
网页中每项内容(元素,文本,属性,解释…)，都是树上的一个节点对象。
唯一的树根节点: document
为何: 树形构造是最好的保留上下级包含关联的构造
节点对象: Node
网页中每项内容都是DOM树上的一个节点对象:
一切节点都有的三个属性:
nodeType: 节点范例
什么时候: 只需推断节点的范例时
包含:
document 9
element 1
attribute 2
text 3
题目: 没法进一步辨别元素的标署名nodeName: 节点称号
什么时候: 只需进一步推断元素的标署名时
——可替代nodeType
包含:
document #document
element 全大写标署名
attribute 属性名——不常常运用!
text #textnodeValue: 节点值 ——不常常运用
document null
element null
attribute 属性值
text 文本内容
3.查找: 4种:
1.不需要查找可直接取得节点:
document.documentElement html
document.head head
document.body body
document.forms[id/i] form
2.按节点间关联查找:
什么时候: 假如已取得一个节点了。想找四周节点时。
包含: 2种树:
- 节点树: 包含网页中一切内容的完全树构造
2大类关联:
1.父子: 4种:
elem.parentNode elem的父节点
elem.childNodes elem的直接子节点
elem.firstChild elem下的第一个直接子节点
elem.lastChild elem下的末了一个直接子节点
2.兄弟: 2种:
elem.previousSibling elem的前一个兄弟元素
elem.nextSibling elem的后一个兄弟元素
题目: 受看不见的空字符的滋扰!
2.元素树: 仅包含元素节点的树构造
2大类关联:
- 父子: 4种:
elem.parentElement elem的父元素
elem.children elem的直接子元素
elem.firstElementChild elem下的第一个直接子元素
elem.lastElementChild elem下的末了一个直接子元素
2.兄弟: 2种:
elem.previousElementSibling elem的前一个兄弟元素
elem.nextElementSibling elem的后一个兄弟元素以后只需用DOM操纵网页内容，都用元素树
申明: 元素树不是一棵新树，实在只是节点树的一个子集
childNodes和children: 动态鸠合(live collection)
什么是: 不现实存储属性值，每次接见鸠合都从新查找DOM树
优: 初次查找，效力高! 由于不必返回完全的属性。
缺: 每次接见鸠合，都邑从新查找DOM树，下降效力
遍历:
不好: for(var i=0;i<children.length;i++){…}
好: for(var i=0,len=children.length;i<len;i++){…}
遍历指定父元素下的一切子女元素: 2种:
1.递归: 2步:
1.定义函数仅遍历指定父元素下的一切直接子元素
2.对每一个直接子节点挪用和父节点完全相同的操纵
深度优先: 当一个节点同时具有子节点和兄弟节点时，老是优先遍历子节点。
一切子节点遍历完，才返回遍历兄弟节点。
2.轮回: 2步:
1.定义迭代器:
迭代器: 能够顺次取得每一个子女元素节点的 特地对象
怎样:
建立: var iterator=document.createNodeIterator(
parent, NodeFilter.SHOW_ELEMENT, null, false
);2.轮回挪用迭代器，取得下一个节点对象:
var curr=iterator.nextNode()
内置深度优先遍历的算法
假如curr返回null，申明遍历完毕
3.按HTML查找: 4种:
1.按id查找:
var elem=document.getElementById("id")
返回值: 一个元素
假如找不到返回null!
强调: 1. 只能在document上挪用2.按标署名查找:
var elems=parent.getElementsByTagName("标署名")
返回值: 多个元素的鸠合
假如找不到返回空鸠合
强调: 1. 可在恣意父元素上挪用
2. 不只找直接子元素，且在一切子女中查找3.按name查找:
var elems=document.getElementsByName("name")
返回值: 多个元素的鸠合
假如找不到返回空鸠合
强调: 只能在document上挪用4.按class查找:
var elems=parent.getElementsByClassName("class")
返回值: 多个元素的鸠合
假如找不到返回空鸠合
强调: 1.可在恣意父元素上挪用
2.不只找直接子元素，且在一切子女中查找
3.只需元素的一个class名婚配，就可以找到该元素
强调: 返回的鸠合都是动态鸠合
题目: 每次只能按一个前提查找
当查找前提庞杂时，步骤很烦琐
处理: 用挑选器查找:
4.用挑选器查找:
1.仅查找一个相符前提的:
var elem=parent.querySelector("挑选器")
返回值: 一个元素
假如找不到,返回null2.查找多个相符前提的元素:
var elems=parent.querySelectorAll("挑选器")
返回值: 多个元素的鸠合
假如找不到返回空鸠合
返回非动态鸠合: 现实存储属性值，纵然重复接见鸠合，
也不会致使重复查找DOM树
强调: 1. 可在任何父元素上挪用
2. 挑选器只需相对于当前父元素内部即可
3. 挑选器的兼容性，受制于当前浏览器的兼容性蔑视: 按HTML查找和按挑选器查找的差异:
1.返回值: 按HTML查找返回动态鸠合
按挑选器查找返回非动态鸠合
2.效力: 初次查找: 按HTML查找效力高
按挑选器查找效力低
3.易用性: 按HTML查找烦琐
按挑选器查找简朴总结: 以后，只需一个前提即可找到想要的元素，首选按HTML查找
只需查找前提庞杂，都选按挑选器查找jQuery中就是这么挑选的
5.修正:
内容: .innerHTML .textContent .value
属性: 3种:
1.HTML规范属性: 2种:
1.中心DOM: 最初的DOM API，请求支撑一切构造化文档
优: 险些全能 缺: 烦琐
猎取属性节点: var attrNode=elem.attributes[i]
猎取属性值: attrNode.value
实在能够一步: var value=elem.getAttribute("属性名")
修正属性值: elem.setAttribute("属性名","值")
移除属性: elem.removeAttribute("属性名")
推断是不是包含指定属性: elem.hasAttribute("属性名")2.HTML DOM: 特地操纵HTML内容的API
对中心DOM 常常运用API的简化
优: 简朴 缺: 不是全能
简化: HTML DOM提早将一切规范属性，封装在了元素对象上，可用.直接接见.
比方:
猎取属性值: elem.属性名
修正属性值: elem.属性名="值"
移除属性: elem.属性名=""
推断是不是包含指定属性: elem.属性名!==""
惯例: class属性:
ES的对象中已先入为主的包含了内部属性class，用来纪录对象建立时的范例名。
HTML的class属性就没法同时存在
所以: DOM: html的class属性，更名为className2.状况属性: disabled selected checked
1.不能用中心DOM修正: 由于值是bool范例
2.只能用HTML DOM,打.修正
3.自定义扩大属性:
什么时候: 2种:
1. 在元素上保留自定义数据
2. 替代其他挑选器，用来查找元素绑定事宜怎样: 2套:
不能用HTML DOM接见, 由于不是规范属性，未被提早封装在DOM元素对象中
1. 一般属性名+中心DOM
2. HTML5:
定义属性时: data-属性名="值"
猎取或修正属性值: elem.dataset.属性名牢固用法: 用自定义扩大属性替代别的挑选器，为元素绑定事宜
为何:
id: 唯一
class: 常常变化
elem: 做一种结果，能够运用任何元素
处理: 以后，只需给元素绑定事宜时，都要先为元素增加自定义扩大属性，
再用自定义扩大属性查找元素，绑定事宜
优: 没有个数限定, 不会受款式影响而变化，不受元素限定
怎样:
定义: data-属性名="值"
查找: 只能用属性挑选器查找:[data-属性名=值]
6.款式: 2种:
1.内联款式:
修正: elem.style.css属性名
强调: 1. css属性名都要去横线变驼峰
2.长度数值必需加px单元
猎取:
题目: 不能用elem.style.css属性名
缘由: elem.style仅包含内联款式! 没法取得内部或外部款式表中的款式
处理: 猎取盘算后的款式!
盘算后的款式: 终究运用到元素上的一切款式的鸠合
且将相对值换算为绝对值
什么时候: 只需猎取款式时，都要猎取盘算后的款式
怎样: 2步:
1. 取得盘算后的style对象:
var style=getComputedStyle(elem);
2. 从style中取得css属性值
var value=style.css属性值
强调: getComputedStyle取得款式都是只读！2.内部/外部: 3步:
1.取得款式表对象:
var sheet=document.styleSheets[i];2.取得款式表对象中的cssRule
什么是cssRule: 款式表中每一个{}就是一个cssRule
怎样取得: var rule=sheet.cssRules[i]3.取得cssRule中的style对象的css属性
var value=rule.style.css属性题目: 用elem.style.css属性一句话只能修正一个css属性
假如同时修正多个属性，代码会很烦琐处理: 用class批量运用款式
怎样: 2步:
- 在css中准备好种种class
- 用顺序，在对应情况下，挑选对应的class运用！
7.增加:
增加: 3步:
2.设置必要属性
a.href=”http://tmooc.cn”;
a.innerHTML=”go to tmooc”;
3.将新元素增加到DOM树:3种api:
parent.appendChild(a) 将a追加到指定父元素下末端
parent.insertBefore(a, child) 将a插进去到指定父元素下的现有子元素之前
parent.replaceChild(a, child) 用a替代指定父元素下的现有子元素
优化: 只管削减操纵DOM树的次数, 从而削减重排重绘
为何:
HTML页面加载历程:
html -> DOM Tree
↓
Render Tree -> ***layout -> paint
↑css -> cssRules
怎样:
- 假如同时增加父元素和子元素时，应先在内存中，将一切子元素增加到父元素中，
再末了一次性将父元素增加到页面上
8.删除:
优化: 只管削减操纵DOM树的次数
为何: 削减重排重绘
怎样: 2种:
1.假如同时增加父元素和子元素，则应当如今内存中，将子元素增加到父元素，再末了将父元素一次性团体增加到DOM Tree
2.假如父元素已在页面上了，要增加多个平级子元素，则应当运用文档片断:
什么是文档片断: 内存中暂时存储多个子元素的假造父元素
什么时候: 只需向网页中同时增加多个平级子元素时，都可用文档片断
怎样: 3步:
1.建立文档片断
2.将子元素增加到文档片断
3.将文档片断团体增加到DOM 树
删除: parent.removeChild(child)
一般: child.parentNode.removeChild(child)
9.HTML DOM常常运用对象:
Image: 建立: var img=new Image();
Select: 代表页面上一个select元素
属性:
.selectedIndex 取得当前select选中的option的下标位置
.value 取得select中选中的option的值
假如选中的option没有value属性，则用innerHTML替代.options 取得当前select下一切option的鸠合
.options.length 取得select下一切option的个数
.options.length=0.length => .options.length
清空一切option .length=0要领: .add(option) 追加一个option
题目: .add不支撑文档片断
.remove(i) 移除i位置的option
Option: 代表select下一个option元素
建立: var opt=new Option(text,value)
属性: .text .value .index
Table: 代表一个table元素
管着行分组:
建立行分组: var thead=table.createTHead()
var tbody=table.createTBody()
var tfoot=table.createTFoot()删除行分组: table.deleteTHead()
table.deleteTFoot()猎取行分组: table.tHead table.tFoot table.tBodies[i]
行分组: 管着行:
增加行: var tr=行分组.insertRow(i)
在i位置插进去一个新行
牢固套路: 1. 在末端追加新行: .insertRow()
2. 在开首插进去新行: .insertRow(0)删除行: 行分组.deleteRow(i) ——不常常运用!
题目: i请求是在当前行分组内的相对下标位置
没法自动取得
应换为: table.deleteRow(tr.rowIndex)
tr.rowIndex可自动取得当前行在全部table内的位置猎取行: 行分组.rows[i]
行: 管着格
增加格: var td=tr.insertCell(i)
牢固用法: 行末端追加一个格: tr.insertCell()
申明: 只能建立td，不能建立th删除格: tr.deleteCell(i)
猎取格: tr.cells[i]
Form: 代表一个form元素
猎取: var form=document.forms[i/id]
属性: .elements 取得表单中一切表单元素的鸠合
.elements.length 取得表单中，表单元素的个数
.length => .elements.length要领: .submit() 替代submit按钮，在顺序中完成手动提交表单
表单元素:
猎取: form.elements[i/id/name]
更简化: form.name要领: .focus 让当前表单元素取得核心
结语：以为总结的还能够的话，点下赞咯，你们的勉励是我行进的动力，感谢列位老铁们！
