DOM基础.docx

上传人:b****3 文档编号:3939712 上传时间:2023-05-06 格式:DOCX 页数:50 大小:4.36MB
下载 相关 举报
DOM基础.docx_第1页
第1页 / 共50页
DOM基础.docx_第2页
第2页 / 共50页
DOM基础.docx_第3页
第3页 / 共50页
DOM基础.docx_第4页
第4页 / 共50页
DOM基础.docx_第5页
第5页 / 共50页
DOM基础.docx_第6页
第6页 / 共50页
DOM基础.docx_第7页
第7页 / 共50页
DOM基础.docx_第8页
第8页 / 共50页
DOM基础.docx_第9页
第9页 / 共50页
DOM基础.docx_第10页
第10页 / 共50页
DOM基础.docx_第11页
第11页 / 共50页
DOM基础.docx_第12页
第12页 / 共50页
DOM基础.docx_第13页
第13页 / 共50页
DOM基础.docx_第14页
第14页 / 共50页
DOM基础.docx_第15页
第15页 / 共50页
DOM基础.docx_第16页
第16页 / 共50页
DOM基础.docx_第17页
第17页 / 共50页
DOM基础.docx_第18页
第18页 / 共50页
DOM基础.docx_第19页
第19页 / 共50页
DOM基础.docx_第20页
第20页 / 共50页
亲,该文档总共50页,到这儿已超出免费预览范围,如果喜欢就下载吧!
下载资源
资源描述

DOM基础.docx

《DOM基础.docx》由会员分享,可在线阅读,更多相关《DOM基础.docx(50页珍藏版)》请在冰点文库上搜索。

DOM基础.docx

DOM基础

1.DOM基础

DOM(DocumentObjectModel)即文档对象模型,针对HTML和XML文档的API(应用程序接口),DOM描绘了一个层次化的节点树。

通过DOM,可以访问所有的HTML元素,连同它们所包含的文本和属性,可以对其的内容进行修改和删除,同时也可以创建新的元素。

节点的种类:

测试DIV

:

元素节点

title=”属性节点:

属性节点

测试DIV:

文本节点

元素节点的方法:

getElementById()获取特定ID元素的节点

getElementsByTagName()获取相同元素的节点列表

getElementsByName()获取相同名称的节点列表

getAttribute()获取特定元素节点属性的值

setAttribute()设置特定元素节点属性的值

removeAttribute()移除热定元素节点属性

1.getElementById()方法:

接受一个参数获取元素ID,如果找到相应的元素则返回该元素的HTMLDivElement对象,如果不存在,返回null。

//获取id为box的元素节点:

document.getElementById(‘box’);

如果返回null,则是执行顺序问题。

解决方法:

①把script调用的标签移到html末尾。

②使用onload事件来处理,onload事件会在html加载完毕后再调用。

//加载html后执行

window.onload=function(){

alert(document.getElementById(‘box’));}//objectHTMLDivElement

//每个节点被看成一个对象

节点属性:

通过调用getElementById()发放返回的元素节点对象,拥有以下的节点属性tagName:

元素节点对象所指向的标签名称

innerHtml:

元素节点中的内容

Id:

元素节点的id名称

title:

元素节点的title属性值

style:

CSS内联样式属性值

className:

CSS元素的类

IE9以下支持

2.getElementsByTagName()方法:

将返回一个数组HTMLCollection(NodeList),这个数组保存着所有相同元素名的节点列表。

//数组包含了索引名称是li的元素节点对象

Document.getElementsByTagNmae(‘li’).item(0).innerHTML//获得第一个li元素的内容

//得到所有元素节点

document.getElementByName(*);//ie9以下的版本显示数组长度!

源于

DOCTYPE>

3.getElementsByName()方法:

获取相同名称(name)的元素,表单元素都含有name属性,返回一个数组HTMLCollection(NodeList)。

//本身不含有name属性的元素,添加name也可以获取到该元素,但ie10以下不支持

4.getAttribute()方法:

获取元素中某个属性的值。

它和直接使用语法(.属性)获取属性值的方法有一定区别。

IE7以下不支持

IE9以下支持

document.getElementById(‘box’).getAttribute(‘style’);//获取style值,ie7以下不支持

document.getElementById(‘box’).onclick;//无法获取值,获取点击事件的函数

document.getElementById(‘box’).getAttribute(‘onclick’);//获取onclick值,ie7以下不支持

5.setAttribute()方法:

设置元素中某个属性和值。

它需要接受两个参数:

属性和值。

如果属性本身已存在,那么就会被覆盖。

//设置属性和值ie7及版本以下不支持

document.getElementById(‘box’).setAttribute(‘style’,’color:

bule’);

//设置自定义的属性和值ie7及版本以下不支持

document.getElementById(‘box’).setAttribute(‘bbb’,’ccc’);

6.removeAttribute()方法:

可以移除HTML属性。

//移除属性ie6及版本以下不支持

document.getElementById(‘box’).removeAttribute(‘style’);

7.获取子元素节点:

我们获取元素节点不一定必须使用document.来调用,还可以通过定义变量来获取。

varul=document.getElementById(“ul”);

vararr=ul.document.getElementsByTagName(“li”);

8.DOM节点属性:

DOM节点可以分为元素节点、属性节点、和文本节点,这些节点又有三个非常有用的属性,分别为:

nodeName、nodeType、nodeValue。

document.getElmentById(‘box’).nodeType;//1,元素节点

//注释的nodeType=8nodeName=#comment

文档nodeType=9

9.innerHTML和nodeValue的区别:

①取值,nodeValue可以获取文本节点的内容和属性节点的值。

innerHTML只能获取元素节点中的内容。

②赋值,nodeValue会把包含在文本里的HTML标签按原样输出。

innerHTML可以解析内部的HTML标签。

box.childNodes[0].nodeValue=’abc’//abc

box.innerHTML=’abc’//abc加粗

10.innerHTML,innerText,outHTML

red”>test1test2

innerHTML:

从对象的起始位置到终止位置的全部内容,包括Html标签。

//”

red”>test1test2”

innerText:

从起始位置到终止位置的内容,但去除Html标签。

//”test1test2”

outHTML:

除了包含全部内容外,还包含对象标签本身。

//

red”>test1test2

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当用户点击提交按钮在元素节点上触发

onrest当用户点击重置按钮在元素节点上触发

scroll当用户滚动带滚动条的元素时触发

事件处理的三个组成部分:

①触发事件的节点对象②事件处理函数③事件执行函数

④document.onclick=null;对事件的清除处理⑤returnfalse;跳出if语句

document.onclick=function(){}

document:

是触发事件的对象,表示触发事件的元素所在区域

onclick:

表示一个事件处理函数

function(){}:

匿名函数被执行的函数,用于触发事件后执行

this关键字:

this表示触发事件的元素节点对象;

16.1、event对象的获取:

event对象(事件对象)是在触发事件时,浏览器会通过函数把事件对象作为参数传递过来,在事件触发执行函数时一般会得到一个隐藏的参数,该参数也是放在arguments数组中。

//事件绑定的执行函数

box.onclick=function(){alert(arguments.length);//得到一个隐藏参数}

注意:

浏览器会自动分配一个参数,这个隐藏参数就是event对象(事件对象)。

//我们可以通过给函数添加一个参数获取事件对象:

box.onclick=function(evt){alert(evt);}

//得到event事件对象的兼容方法

①box.onclick=function(evt){

if(evt){alert("evt:

"+evt);}

else{alert("window.event:

"+window.event);}

}

②box.onclick=function(evt){

varoEvent=evt||window.event;//window可以省略

alert(oEvent);

}

2、event对象的属性:

鼠标事件时Web上面最常用的一类事件,因为鼠标是web页面最主要的外部设备,通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等。

①button属性:

document.onclick=function(evt){

varoEvent=evt||window.event;

alert(oEvent.button);}

//右键点击事件

window.oncontextmenu=function(){

console.log('右键点击');

}

②可视区坐标及屏幕坐标:

事件对象提供了两组来获取浏览器坐标的属性,一组是页面可视区坐标,另一组是屏幕区坐标。

document.onclick=function(evt){

varoEvent=evt||window.event;

alert(oEvent.clientX+“,”+oEvent.clientY);

alert(oEvent.screenX+“,”+oEvent.screenY);

}

3、event对象的属性/鼠标事件(修改键)

有时,我们需要通过键盘上的某些键来配合鼠标来触发一些特殊的事件。

这些键为:

Shfi

展开阅读全文
相关资源
猜你喜欢
相关搜索
资源标签

当前位置:首页 > 求职职场 > 简历

copyright@ 2008-2023 冰点文库 网站版权所有

经营许可证编号:鄂ICP备19020893号-2