dom1

Posted 2020-09-18 钱钱钱啊

回顾：
1. DOM中一切都是节点对象：Node类型
元素节点对象：Element类型
文本节点对象：Text类型
三大属性：nodeName nodeType nodeValue

六个关系：parentNode childNodes firstChild lastChild
previousSibling nextSibling

两种树：节点树 元素树

2. ****遍历：4种：默认都是*深度优先*
1. 遍历节点树——手写,带缩进
2. 遍历元素树——手写,带缩进
3. NodeIterator：nextNode() previousNode()
4. TreeWalker:
3. *查找：5种：
1. var elem=document.getElementById("id值");
2. var elems=parent.getElementsByTagName("标签名");
3. var elems=document.getElementsByName("name属性");
4. var elems=parent.getElementsByClassName("class属性")
elems：动态集合，每使用一次都重新查找
for(var i=0,len=elems.length;i<len;i++)

5. Selector API: jQuery的核心
var elem=parent.querySelector("任意选择器");
var elems=parent.querySelectorAll("任意选择器");
只能从父节点向下找。
找平级：先parentNode向上，再querySelector向下

elems:包含所有属性和方法的完整对象的集合
for(var i=0;i<elems.length;i++)

正课：
1. *修改*元素的内容或属性：3种东西：
1. 元素的内容
2. **元素的属性/特性
3. 元素的样式：2处：
1. 修改内联样式
2. *修改样式表中的css规则

1. 获取或修改元素内容：3个属性:
1. innerhtml：获得/设置元素开始标签和结束标签之间的html原文
何时使用：只要获得html原文内容时
固定套路：2个：
1.删除父元素下所有子元素：
parent.innerHTML="";
2. 批量替换父元素下所有子元素
parent.innerHTML="所有子元素标签组成的html" 比如：ul.innerHTML="<li>电影</li><li>剧集</li>"
2. textContent/innerText: 获得开始标签和结束标签之间的
DOM标准 IE8 纯文本内容，不包含标签
何时使用：只要希望去掉标签，仅获得文本时

3. 文本节点的内容：nodeValue

正课：
1. 元素内容
2. **元素属性：标准 自定义
3. 元素样式：内联样式 样式表中的css规则

1. 元素内容：
2. **元素属性：get/set/has/removeAttribute()
所有元素都有attributes属性,[i]访问每个属性——了解
读取属性：4种方法：
1. element.attributes[下标].value
2. var value=element.attributes[‘属性名‘]
3. element.getAttributeNode(‘属性名‘).value
***4. var value=element.getAttribute("属性名")
何时使用：只要获得任意属性的值

修改属性：2种：
***1. element.setAttribute(name, value);
IE8不支持
只能：element.attributes[‘属性名‘]=value
2. element.setAttributeNode(attrNode);

移除属性：2种：
***1. element.removeAttribute( ‘属性名‘);
2. element.removeAttributeNode(attrNode);

判断元素是否包含属性：2种：
***1. element.hasAttribute(‘属性名‘) //true或false 2. element.hasAttributes( );

***Property vs Attribute
属性 HTML特性
Property: 对象在内存中存储的属性
用.访问
Attribute: 元素对象在开始标签中定义的HTML属性和自定义属性

访问HTML标准属性时。二者完全一致：
比如：<a href="http://tmooc.cn"...
a.href-->属性 -->HTML DOM
a.getAttribute("href")-->特性 -->核心DOM

如果访问自定义属性时，二者不通用！
<li /*data-age="29"*/>Eric</li>
读取自定义属性：li.data-age? X
li.getAttribute("data-age");
设置自定义属性：li.age=29-->网页？
li.getAttribute("age")找不到;
li.setAttribute("data-age",29);

3. *元素的样式：
1. 要修改的样式在哪儿？
2. 优先级

1. 获取或修改内联样式：style对象
在style对象中设置的样式属性，优先级最高！
设置：style.属性名="值"
移出：2种：
style.属性名="";
style.removeProperty("CSS属性名")
问题：仅能操作style属性中定义的内联样式
无法获取或设置样式表中的样式

2. 获取或修改样式表中的属性：内部 外部（）
3步：
1. 获得要修改的样式表对象：
var sheet=document.styleSheets[i];
styleSheets:获得当前网页的所有样式表对象
2. 获得要修改的cssRule：
cssRule：样式表中一个大括号就是一个cssRule对象
var cssRule=sheet.cssRules[i]
cssRule可能嵌套。
3. 获得cssRule中的属性
cssRule.style.属性名