2020.9.14陈悦玲BOM总结
dom语法总结
查找元素
#不需要查找可直接获得的节点：
document根节点
document.documentElement 获取html中包含的所有内容
document.head 获取head中包含的所有内容
document.body 获取body中包含的所有内容
document.forms[i] 获取页面中所有的表单元素
#按照节点间关系查找
节点树
关系：
父子关系：
1.elem.parentNode 获得当前节点的父节点
2.elem.childNodes 获得当前节点下的直接子节点的集合，返回一个类数组对象包含该父节点下所有直接子节点
3.elem.firstChild 获得当前节点下的第一个直接子节点
4.elem.lastChild 获得当前节点下的最后一个直接子节点
兄弟关系：
1.elem.previousSibling 获得当前节点的前一个平级兄弟节点
2.elem.nextSibling 获得当前节点的后一个平级兄弟节点
##解决节点树的方法(元素树)
使用元素树：什么是元素树？
仅包含元素节点的树结构，不是一棵新树，仅是节点树的子集（其实内存中只有一棵完整的节点树。而元素树只不过是在节点树的基础上，新增了一些仅指向元素节点的新属性而已。所以，元素树只是节点树中的一个子集）
什么时候用元素树？
所有的按关系查找，都用元素树，而不用节点树(只关心元素，不关心文本时)
使用 （两大类关系，六个属性）
父子
elem.parentElement
elem.children
elem.firstElementChild
elem.lastElementChild
兄弟
elem.previousElementSibling
elem.nextElementSibling
优点：不包含看不见的文本节点，不干扰查找
缺点：不包含一切文本节点，如果想获取文本可用 “ elem.innerHTML ”获取文本
实例：elem.innerHTML
兼容性问题：IE9+
##递归遍历
#按照HTML查找
##按照ID查找
var elem=document.getElementById("id")
提示：
1.只能用document调用，不能换成其他元素，使用document意为在整个网页范围内查找；
2.只能找到一个元素对象，如果找不到返回null，如果不小心两个HTML元素id名相同，则getElementById只能返回第一个找到的元素
问题：
1.按id查找一次只能找一个元素对象，无法同时找多个元素对象；
2.网页中标有id的元素并不多，因为没有那么多英文单词名字可用
按照标签名查找
var elems=parent.getElementsByTagName("标签名")
提示：
1.可在任意父元素下查找。主语是哪个父元素，就只在哪个父元素内查找符合条件的元素；
2.返回多个符合条件的元素组成的类数组对象，也是动态集合，如果找不到，返回空类数组对象:{ length:0 }；
3.getElementsByTagName()不仅查找直接子元素，而是在所有后代中查找符合条件的元素
按照class
var elems=parent.getElementsByClassName("class")
提示：
1.可以在任意父元素上调用，控制查找的范围；
2.返回类数组对象，也是动态集合，如果没找到，返回空类数组对象{ length:0 }；
3.不只是在直接子元素中查找，而是在所有后代子元素中查找符合条件的元素；
4.如果一个元素有多个class修饰，而查找时，只要用其中一个class，就能找到该元素
兼容性问题：IE9+
按照name查找
var elems=document.getElementsByName("name")
提示：
1.只能在document上调用；
2.返回类数组对象，也是动态集合，如果没找到，返回空类数组对象{ length:0 }；
3.因为只有表单元素才会有name属性，所以，getElementsByName几乎专门用于查找指定name属性的表单元素
注意：ByTagName、ByClassName、 ByName三个函数注定返回类数组对象，即使只找到一个元素，也会放在类数组对象中返回，无法直接返回一个元素对象，所以，如果只找到一个元素对象时，应该再加[0]，才能取出类数组对象中保存的惟一的这个元素对象
#按照选择器查找（Selector API）
查找一个元素
var elem=parent.querySelector("selector")
查找多个元素
var elems=parent.querySelectorAll("selector")
注意：差不到的返回null
HTML查找和选择器查找：
html返回动态集合，不实际存储所有内容，只返回本次所需内容；选择器查找返回非动态集合，可以直接存储所有数据；
修改元素
修改元素内容
elem.innerHTML
获取或设置开始标签到结束标签之间的原始的html代码片段，获取元素的HTML内容时，返回原始的HTML代码内容，修改元素的HTML内容时，先将新的HTML代码内容提交给浏览器解析后，再显示在元素内部
实例：
p.innerHTML="hello world"
elem.textContent = elem.innerText（后者都兼容性 ie8+）
获取或设置开始标签到结束标签之间的纯文本内容，获取元素的纯文本内容时，textContent会去掉内嵌标签，还会将特殊符号翻译为正文，修改元素的纯文本内容时，不会将新内容交给浏览器解析，而是直接原样显示在元素内部
实例：
p.textContent=“hello world”
elem.value
获取或修改表单元素的值
注意：获取表单元素的值不能用 “.innerHTML"，因为表单元素多数是单标记，没有innerHTML，表单元素的内容都是用“.value”属性来获取或修改的
属性：
核心DOM
1.获取属性
var value=elem.getAttribute("属性名")
实例：获得a元素的href属性
a.getAttribute("href")
了解：
var attrNode=elem.attributes[ i / 属性名 ];
// var attrNode=elem.getAttributeNode("属性名");
var value=attrNode.value;
2.修改属性
elem.setAttribute("属性名",属性值)
注意：如果属性不存在，也可以使用setAttribute，此时会自动添加该属性
实例：修改a元素的title属性
a.setAttribute("title","hello world")
3.移除属性
elem.removeAttribute("属性名")
提示：只移除开始标签中的attribute，不删除内存中对象的property
实例：移除a元素的title属性
a.removeAttribute("title")
4.判断是否含有属性
var bool=elem.hasAttribute("属性名")
实例：判断a元素是否有id属性，如果含有返回true，否则返回false
a.hasAttribute("id")
HTML DOM
1.获取属性
elem.属性名
2.修改属性
elem.属性名=值
3.判断是否包含属性
elem.属性名!==""
4.移除属性
elem.属性名=""
5.特例：class属性
class属性，不能直接用 “ . ” 访问，因为class属性是ES中的关键词，所以DOM不能再使用class作为属性。如果操作页面上的class属性，只能改名为“ .className”。使用"元素“.className"属性，等效于使用<元素 class="xxx">属性，直接修改class
实例：
元素.className="xxx"
提示：元素.classList
1.元素.classList.add("class名")
2.元素.classList.remove("class名")
状态属性
样式
最好的修改样式的方法：
如果批量修改多个css属性时，首选用class，修改class属性，批量应用样式
实例：
var d1=ducment.getElementById("d1");
d1.className="disBlock";
d1.className="disNone";
优化样式修改
因为每修改一次样式，都可能导致重排重绘网页，所以，应该尽量减少修改样式的次数，使用 “ 元素.style.cssText属性 ” 代替，单独设置的 “ 元素.style.css属性 ”
实例：
元素.style.cssText="width:100px; height:100px"
注意：此时浏览器只需要一次重排重绘网页，对比单独设置：
元素.style.width="100px"
元素.style.height="100px"
单独设置导致网页在短时间内进行两次重排重绘
添加和删除元素
添加
1.创建新元素对象
var elem=document.createElement("标签名")
实例：创建一个页面元素对象
var a=document.createElement("a")
2.设置关键属性
实例：为创建好的对象添加属性
a.href="url";
a.innerHTML="文本"
问题：此时新创建的元素都没有在DOM树上。自然也就无法显示在网页中
3.将元素添加到DOM树
1.将新元素放在父元素下最后一个直接子元素后，末尾追加
实例：
parent.appendChild(child)
2.将新元素放在父元素下一个现有旧元素之前
实例：
parent.insertBefore(child,oldChild)
3.将新元素替换父元素下一个现有旧元素
实例：
parent.replaceChild(child,oldChild)
添加问题
每操作一次DOM树，都会导致重排重绘。如果数据量大，又频繁操作DOM树，会导致重排重绘不过来
解决添加问题
优化，尽量少的操作DOM树，如果同时添加父元素和子元素，应该先暂存内存中，将所有子元素添加到父元素，最后将父元素一次性添加到DOM树上，只需要重排重绘一次。如果父元素已经在DOM树上了，而要添加多个平级子元素，需要借助文档片段对象
删除
parent.removeChild(child)
评论