Dom操作

来源：互联网发布：log4j输出日志到mysql 编辑：程序博客网时间：2024/05/21 23:00

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?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：在正式提交表单前自动触发

0 0