DOM基础.docx

11.DOM节点的层次关系

①childNodes属性：

某一个元素节点的所有子节点，其中包含元素子节点和文本子节点。

varbox=document.getElementById（‘box’）;//获取一个元素节点

alert（box.childNodes.length）;//获取这个元素节点的所有子节点

alert（box.childNodes[0]）;//获取第一个子节点对象

alert（box.childNodes[0].nodeValue）;//获取第一个子节点对象的值

alert（box.childNodes[box.childNodes.length-1].nodeValue）;//最后一个子节点对象的值

//使用childNodes[n]返回子节点对象，可能返回的是元素子节点和文本子节点。

元素子节点可以使用nodeName或tagName获取标签名称，而文本子节点可以使用nodeValue获取值。

for（vari=0;i

If（box.childNodes[i].nodeType==1）{

//输出元素节点内容

console.log（“元素节点内容”+box.childNodes[i].innerHTML）;

}

Elseif（box.childNodes[i].nodeType==3）{

//输出文本节点内容

console.log（“文本节点内容”+box.childNodes[i].nodeValue）;

}

}

②children属性：

某一个元素节点的所有子节点，只包含元素子节点。

③attributes属性：

当前元素节点的所有属性节点的集合数组（NamedNodeMap）。

④DOM节点的层次关系存在的问题：

//把空白、换行看成了文本子节点对象，解决方式：

1.把空白文本节点忽略掉

//参数接收的是所有的子节点对象，得到删除空白部分后的数组

functiongetNodes（nodes）{

vararr=[];

for（vari=0;i

If（nodes[i].nodeType==3&&/^\s+$/.test（nodes[i].nodeValue））{

continue;

}

else

arr.push（nodes[i]）;//push向数组末尾添加数据，并返回数组的长度

}

returnarr;

}

vararr=getNodes（obj.childNodes）

alert（arr.length）;

2.把空白文本删除

functiongetNodes（nodes）{

for（vari=0;i

If（nodes[i].nodeType==3&&/^\s+$/.test（nodes[i].nodeValue））{

//删除该空白文本节点，根据父节点来删除

nodes[i].parentNode.removeChild（nodes[i]）;

}

}

}

getNodes（obj.childNodes）

alert（obj.childNodes.length）;

//firstChild、lastChild等也会为空白，解决方式：

1.把元素节点的所有子节点中空白文本节点删除

//参数接收的是某一个元素节点对象

functiongetNodes（nodes）{

for（vari=0;i

If（nodes.childNodes[i].nodeType==3&&/^\s+$/.test（nodes.childNodes[i].nodeValue））{

//删除该空白文本节点，根据父节点来删除

nodes.childNodes[i].parentNode.removeChild（nodes.childNodes[i]）;

}

}

returnnodes;

}

alert（getNodes（obj）.firstChild.nodeName）;

12.节点操作方式

insertBefore（）方法可在已有的子节点前插入一个新的子节点

语法：

insertBefore（newnode,node）;

参数：

newnode要插入的新节点。

node指定此节点前插入节点。

removeChild（）方法从子节点列表中删除某个节点。

如删除成功，此方法可返回被删除的节点，如失败，则返回NULL。

注意:

 把删除的子节点赋值给x，这个子节点不在DOM树中，但是还存在内存中。

如果要完全删除对象，给x赋null 值。

replaceChild（）实现子节点（对象）的替换。

返回被替换对象的引用。

语法：

node.replaceChild（newnode,oldnew）

cloneNode（true/flase）flase:

不复制标签之间的内容，只复制标签

true：

即复制标签又复制内容

//删除空白文本之后再复制第一个子节点

//删除空白节点之后再删除第一个子节点

//新元素插入到指定元素之后。

//编写get_nextSibling 函数，获得指定节点的下一个节点。

functionget_nextSibling（n）{

varx=n.nextSibling;

while（x&&x.nodeType!

=1）{

x=x.nextSibling;

}

returnx;

}

varx=document.getElementsByTagName（"li"）[0];

document.write（x.nodeName）;

document.write（"="）;

document.write（x.innerHTML）;

vary=get_nextSibling（x）;

if（y!

=null）{

document.write（"
nextsibling:

"）;

document.write（y.nodeName）;

document.write（"="）;

document.write（y.innerHTML）;

}else{

document.write（"
已经是最后一个节点"）;

}

//编写get_previousSibling 函数，获得指定节点的上一个节点。

functionget_previousSibling（n）{

varx=n.previousSibling;

while（x&&x.nodeType!

=1）{

x=x.previousSibling;

}

returnx;

}

varx=document.getElementsByTagName（"li"）[1];

document.write（x.nodeName）;

document.write（"="）;

document.write（x.innerHTML）;

vary=get_previousSibling（x）;

if（y!

=null）{

document.write（"
previousSibling:

"）;

document.write（y.nodeName）;

document.write（"="）;

document.write（y.innerHTML）;

}else{

document.write（"
已经是最后一个节点"）;

}

13.浏览器窗口可视区域大小

获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法：

①对于IE9+、Chrome、Firefox、Opera、Safari：

window.innerHeight-浏览器窗口的内部高度

window.innerWidth-浏览器窗口的内部宽度

②对于InternetExplorer8\7\6\5：

document.documentElement.clientHeight表示HTML文档所在窗口的当前高度

document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度

或者

document.body.clientHeight

document.body.clientWidth

③解决兼容问题：

Varw=document.documentElement.clientWidth

||document.body.clientWidth;

varh=document.documentElement.clientHeight

||document.body.clientHeight;

14.网页尺寸：

scrollHeight、scrollWidth获取网页内容高度和宽度

①针对IE、Opera：

scrollHeight是网页内容实际高度，可以小于clientHeight。

②针对NS、FF：

scrollHeight是网页内容高度，不过最小值是clientHeight。

也就是说网页内容实际高度小于clientHeight时，scrollHeight返回clientHeight。

③浏览器兼容性：

varw=document.documentElement.scrollWidth

||document.body.scrollWidth;

varh=document.documentElement.scrollHeight

||document.body.scrollHeight;

15.事件触发：

用户在页面上操作时（如点击按钮，鼠标滑过，鼠标点击，鼠标松开，文本框获得焦点，失去焦点等），就是事件触发。

事件模式：

内联模式，脚本模式。

①内联模式：

直接在HTML标签中添加事件。

内联模式调用函数，则函数不能放到window.onload里面，否则会找不到该函数。

内联模式违反了HTML与Javascript代码层次分离的原则。

②脚本模式：

需要先获取到元素节点对象，再针对该节点对象添加事件。

可以采用三种方式来获取节点对象：

getElementById（），getElementsByTagName（），getElementsByName（）。

添加事件方式一：

用过匿名函数，可以直接触发对应的代码

box.onclick=function（）{alert（"nihao"）;};

添加事件方式二：

通过制定的函数名赋值的方式来执行函数

box.onclick=func;

funcotionfunc（）{alert（"nihao"）;}

事件处理函数：

所有的事件处理函数都会有两个部分组成，on+事件名称；

Javascript可以处理的事件种类有三种：

鼠标事件，键盘事件，HTML事件。

①鼠标事件，页面所有元素都可以触发鼠标事件；

onclick单机鼠标按钮并在松开时触发

ondblclick双击鼠标按钮时触发

onmousedown鼠标还未松开时触发

onmouseup释放鼠标按钮时触发

onmouseover鼠标移入某元素那一刻触发

onmouseout鼠标移出某元素那一刻触发

onmousemove鼠标指针在某个元素上移动时触发

②键盘事件，在键盘上按下键时触发的事件（一般由window对象或者document对象调用）；

onkeydown按下键盘上某个键触发，如果按住不放，会重复触发。

onkeypress按下键盘上的字符键触发，如果按住不放，会重复触发。

onkeyup释放键盘上的某个键触发

③HTML事件，跟HTML页面相关的事件；

onload当页面完全加载完后触发

onunload当页面完全卸载完后触发

onselect当用户选择文本框（input或textarea）中的内容触发

onchange当文本框（input或textarea）内容改变且失去焦点后触发

onfocus当页面或元素获得焦点时触发

onblur当页面或元素失去焦点时触发

onsubmit当用户点击提交按钮在