dom1

Posted 钱钱钱啊

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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=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.属性名

以上是关于dom1的主要内容,如果未能解决你的问题,请参考以下文章

DOM1

高级 HTACCESS 子域重定向(foo.dom2.com 到 foo.dom1.com)

JS DOM1核心概要1

DOM1 更新文档的内容结构和样式 练习题

DOM的发展,DOM0,DOM1,DOM2,DOM3

关于DOM级别的一些问题,DOM0,DOM1,DOM2