首页 > 代码库 > dom1
dom1
回顾:
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=http://www.mamicode.com/element.attributes[‘属性名‘]
3. element.getAttributeNode(‘属性名‘).value
***4. var value=http://www.mamicode.com/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.属性名
dom1