1. DOM树:
节点树:网页中每一个元素,属性,文本,注释都是节点对象
同一网页中的所有节点对象通过父子关系形成树结构
树根:document对象
节点数中:节点间关系:6个属性
父子关系4种:parentNode childNodesfirstChild lastChild
兄弟关系2种:previousSiblingnextSibling
childNodes:类数组对象,
***动态集合***:自己不保存任何实际数据
每使用一次都重新查找一遍
for(var i=0;i<parent.childNodes.length;i++) X
for(vari=0,len=parent.childNodes.length;i<len;i++)
1. ****遍历:
2. *查找
1. ****遍历:从指定父元素开始,按照深度优先的原则
遍历所有各级子节点
2步:
1.定义一个函数,查找任意父节点下的所有直接子节点
2.以深度优先为原则,递归调用函数本身
何时使用递归调用:2个场景:
1. 遍历*不确定层级深度*的树形结构时:
比如:网页中的元素,网盘的文件夹结构
2. *不确定层级深度*的多级管理结构:
元素树:仅由元素节点组成的树结构
其实有一组和节点树6个属性对应的元素树属性
节点树 元素树
父对象 parentNode parentElementNode
所有子对象 childNodes children
第一个子对象 firstChild firstElementChild
最后子对象 lastChild lastElementChild
前一个兄弟 previousSiblingpreviousElementSibling
后一个兄弟 nextSibling nextElementSibling
何时使用:只要仅希望遍历元素节点时,就用元素树
问题:IE8不兼容,children可用
DOM Level2 遍历API:2个
1.深度优先遍历:NodeIterator
节点迭代器
如何使用:2步:
1. 创建遍历API对象:
variterator=document.createNodeIterator(
开始的父节点对象,
whatToShow,
null,false
);
whatToShow:NodeFilter.SHOW_ELEMENT
NodeFilter.SHOW_ALL
2. 用while循环,反复调用iterator.nextNode()方法
强调:1. 只要nextNode(),就向下一个移动一次
2.iterator.previousNode(),后退一次
2.自有遍历:TreeWalker:
使用几乎相同,只不过TreeWalker比Iterator多个别方法
总结:4种:节点树 元素树
API(NodeIterator,TreeWalker)
2. *查找:5个API:
1. 按id查找:
varelem=document.getElementById("id值");
2. 按标签名查找:(向下爬树的主要手段)
varelems=parent.getElementsByTagName("标签名");
***elems也是动态集合***
*不仅查直接子节点,同时可获得间接子节点*
3. 按name属性查找:(专门用于查找表单中的元素)
varelems=parent.getElementsByName("name属性值");
***elems也是动态集合***
4.按className查找
varelems=parent.getElementsByClassName("class属性")
elems:动态集合,每使用一次都重新查找
for(vari=0,len=elems.length;i<len;i++)
5. Selector API:jQuery的核心
varelem=parent.querySelector("选择器");
varelems=parent.querySelectorAll("选择器");
2特点:1. 内置API:执行效率高
2. elems:包含完整对象属性的集合
不会反复查找!
元素属性: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标准属性时。二者完全一致:
比如:<ahref="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. 获得要修改的样式表对象:
varsheet=document.styleSheets[i];
styleSheets:获得当前网页的所有样式表对象
2. 获得要修改的cssRule:
cssRule:样式表中一个大括号就是一个cssRule对象
varcssRule=sheet.cssRules[i]
cssRule可能嵌套。
3. 获得cssRule中的属性
cssRule.style.属性名
1. *创建、删除节点:
2. *常用HTML DOM对象
1. *创建、删除:
插入新元素:parent.insertBefore(newElem,oldElem);
删除节点:parent.removeChild(oldElem);
oldElem.parentNode.removeChild(oldElem);
替换节点:parent.replaceChild(newElem,oldElem);
级联下拉列表:
1. onchange:当内容发生改变时触发
2. select对象:selectedIndex属性:当前选中项的下标
2. *常用HTML DOM对象:Table Select Form
Table对象:
属性:
tHeadtFoot tBodies
rows: 获得表中所有行对象
rows[i]: 获得表中小标为i的一个行对象
方法:
varnewRow=insertRow(rowIndex):
rowIndex写-1,表示在末尾追加
比如:insertRow(-1)
核心DOM:varnewRow=document.createElement("tr") table.appendChild(newRow)
deleteRow(rowIndex):
比如:currRow.parentNode.removeChild(currRow);
table.deleteRow(currRow.rowIndex)
TableRow对象:代表table对象中的某一个tr对象
table.rows集合,就是一组TableRow对象的集合
属性:
cells: 当前行中所有td对象
cells[i]: 获得当前行中下标为i的td
rowIndex: 当前行的下标位置,专用于删除行
方法:
varnewCell=insertCell(index)
比如:insertCell(3)
核心DOM:vartd=document.createElement("td");
tr.appendChild(td);
deleteCell(index)
TableCell对象:
属性:cellIndex
Select对象:
属性:
options: 获得当前select下所有option
options[i]: 获得当前select下i位置的option
selectedIndex: 获得当前选中的option的下标
方法:
add(新option对象)
比如: select.appendChild(newOpt);
select.add(newOpt);
remove(index)
Option对象:指代select下某一个option元素
如何创建:var newOpt=new Option(innerHTML,value)
创建option对象同时,设置对象的innerHTML和value属性
相当于:varnewOpt=document.createElement("option");
newOpt.innerHTML="内容"
newOpt.value="值";
一句话:创建,设置,追加
select.add(newOption(innerHTML,value));
属性:index:获取当前option的下标位置,专用于删除
selected:可当做bool用
如果当前option被选中,返回true
否则,返回false
Form对象:
如何找到一个form对象
varform=document.forms[i/name];
如何找到form中的一个数据采集元素:
varelem=form.elements[i/name]
事件:onsubmit:在正式提交表单前自动触发