关于我们

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻公共列表

JavaScript之DOM基础

发布时间:2020-02-24 00:00:00

   概述

DOM(Document Object Model)文档对象模型,针对Html和XML的文档的对象API,是一项 W3C (World Wide Web Consortium) 标准。文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问、更新文档的内容、结构和样式。本文主要以一些简单的小例子,简述前端开发中,DOM的常见内容,仅供学习分享使用,如有不足之处,还请指正。

获取元素

DOM操作必须等待HTML文档加载完毕,才可以访问。html将标签节点,称为元素,如果存在元素,则返回html的javascript对象;如果不存在,则范围null。

通过ID获取元素

一个页面每个标签元素只能有一个id,表示唯一性。通过getElementById获取标签对应的JavaScript对象,建议区分大小写,以免浏览器之间不兼容。如下所示:

 1 var box = document.getElementById('A01'); 2 document.write(box);//返回:[object HTMLDivElement]  3 document.write(box.tagName);//获取标签名:DIV 4 alert(box.innerHTML);//以文本形式获取标签的子内容 5 document.write(box.id);//返回元素的唯一ID,如:A01 6 document.write(box.title);//返回元素的标题属性 7 document.write(box.style);//返回元素的样式对象。输出:[object MSStyleCSSProperties] 8 document.write(box.style.color);//返回样式中设置的颜色属性,输出:blue  9 document.write(box.class);//class是保留字,不能使用,会报错,改用如下替代:10 document.write(box.className);//返回样式名称,输出:box 11 //自定义属性,非IE不支持12 box.innerHTML='玩转JS DOM';//重新赋值,会覆盖掉之前的内容

通过tagName获取元素

一个文档中,相同标签的元素可以有多个,所以通过getElementsByTagName获取的是对应标签的数组列表对象,如下所示:

1 var box=document.getElementsByTagName('li');2 document.write(box);//返回的是HTML列表数组集合对象,如:[object HTMLCollection] 3 document.write(box.length);//数组集合的长度,元素个数。从0开始4 document.write(box.item(0));//返回:[object HTMLLIElement] 5 document.write(box[0].tagName);//返回对应标签 LI6 document.write(box[0].innerHTML);//返回指定位置的纯文本内容

获取body

一个文档对象,也可以有多个body,所以通过tagName获取的也是数组列表对象,通过索引来访问具体内容。如下所示:

1 var box =document.getElementsByTagName('body')[0];2 document.write(box);//返回body对象,输出:[object HTMLBodyElement]

通过name获取元素

通过name获取元素,即通过元素的name属性来获取,且name不是唯一的,所以获取到的也是数组列表对象,如下所示:

1 var box=document.getElementsByName('A');2 document.write(box);//返回一个数组集合:[object HTMLCollection] 3 document.write(box[0]);//返回第一个元素:[object HTMLDivElement]4 document.write(box[0].name);//对于IE,因为name在div中是不合法的属性,所以在IE:输出undefined ,其他则正常。5 document.write(box[0].getAttribute('name'));//通过此方法在IE中可以获取name的值6 document.write(box[0].getAttribute('style'));//IE中,返回的是:color: blue; 字符串7 alert(box[0].getAttribute('style'));8 document.write(box[0].getAttribute('class'));//IE浏览器不支持,其他可以9 document.write(box[0].getAttribute('className'));//IE支持,其他不可以

设置属性

当获取元素后,如何给元素动态的设置属性呢,可以通过setAttribute方法来设置,如下所示:

1 box[0].setAttribute('title','玩转,hexkj');//设置属性,两个参数:属性,属性值,会覆盖掉之前的值2 box[0].setAttribute('align','center');3 //设置自定义属性4 box[0].setAttribute('test','hexkj');//也可以设置成功5 box[0].removeAttribute('style');//移除属性

节点类型

DOM的节点类型,常见的有以下几种,如下所示:

 

 元素节点

元素节点,即html标签元素节点,节点类型为1

1 var box = document.getElementById('A01');2 document.write(box.nodeName);//获取元素的标签名,和tagName一样,输出:DIV3 document.write(box.nodeType);//获取元素的节点类型值,输出:1 4 document.write(box.nodeValue);//当前节点的value,div为空,只能获取当前节点,不能获取子节点的内容5 document.write(box.innerHTML);//输出纯文本内容,是一个整体6 document.write(box.childNodes);//子节点集合。返回:[object NodeList] 7 document.write(box.childNodes.length);//子节点的长度,输出:3

文本节点

文本节点,即只有文本内容的节点。

    ( i=0;i<box.childNodes.length;i++        document.writeln('
' }

属性节点

属性节点,即标签元素的属性,通过attributes来访问,如下所示:

1 document.write(box.attributes.length);//属性节点的个数2 document.write(box.attributes[0].nodeType);//属性类型 ,输出:23 document.write(box.attributes[0].nodeName);//属性名称,输出:title4 document.write(box.attributes[0].nodeValue);//属性的值,输出:我是AO1 5 document.write(box.attributes['title'].nodeValue);//获取指定属性的值,本例输出:我是AO1

节点赋值

可以通过nodeValue和innerHTML进行赋值,但是在设置HTML时,会有差异,如下所示:

1 box.childNodes[0].nodeValue='hello js dom!!!';//可以设置节点内容2 box.childNodes[0].nodeValue='hello js dom!!!';//但是不能设置html内容:hello js dom!!!3 box.innerHTML='hello js dom!!!';//可以设置html属性

获取相关节点

可以与节点相关的其他节点,如第一个节点,最后一个节点,父节点,等相关内容,如下所示:

1 var box = document.getElementById('A01');2 document.write(box.firstChild.nodeValue);//获取第一个节点3 document.write(box.lastChild.nodeValue);//获取最后一个节点4 document.write(box.ownerDocument);//返回当前的文档对象,输出:[object HTMLDocument] 5 document.write(box.ownerDocument.nodeName);//输出:#document6 document.write(box.parentNode);//返回当前节点的父节点,本例输出:[object HTMLDivElement] 7 document.write(box.firstChild.nextSibling);//返回第一个节点的下一个同级节点,本例输出:[object HTMLUListElement] 8 document.write(box.lastChild.previousSibling);//返回最后一个节点的上一个同级节点,本例输出:[object HTMLUListElement]

忽略空白节点

空白节点对于HTML元素节点来说,是没有太大意义的,要如何去除呢,有两种方法都可以过滤掉空白节点,如下所示:

 1 //忽略空白字符 2 var box = document.getElementById('A02'); 3 document.write(box.childNodes.length);//IE浏览器,输出是7,其中包括文本节点 4 document.write(box.childNodes[0]);//输出:[object Text]  表名第一个是文本节点,且内容为空 5 //以下函数过滤掉空白节点 6 function filterWhiteNodes(node){ 7     var ret=[]; 8     for (var i=0;i<node.length;i++) { 9         if (node[i].nodeType==3 && /^\s+$/.test( node[i].nodeValue)) {10         continue;11         } else{12         ret.push(node[i]);13         }14     }15         return ret;16 }17 document.write(filterNodes(box.childNodes).length);//输出:318 //输出空白文本节点19 function removeWhiteNodes(node){20     for (var i=0;i<node.length;i++) {21     if (node[i].nodeType==3 && /^\s+$/.test( node[i].nodeValue)) {22         node[i].parentNode.removeChild(node[i]);23     }24     }25     return node;26 }27 document.write(removeWhiteNodes(box.childNodes).length);//输出:328 document.write(removeWhiteNodes(box.childNodes)[0].nodeName);//输出P标签

创建元素节点

通过createElement来创建元素,通过insertBefore来插入指定元素之前,如下所示:

1 var p=document.createElement('P');//创建一个元素2 var text=document.createTextNode('DDDDD');//创建一个文本节点3 p.appendChild(text);//将文本节点附加一个子元素节点4 box.appendChild(p);//将p元素节点,添加到box后面5 box.insertBefore(p,box.childNodes[1]);//在第2个节点之前添加节点,其中可能会包括空白文本节点

如何插入到指定元素之后呢,如下所示:

 1 function insertAfter(newElement,targetElement){ 2     //得到父节点 3     var parent=targetElement.parentNode; 4     if(parent.lastChild==targetElement){ 5         //如果当前已经是最后一个节点,则直接添加 6         parent.appendChild(newElement); 7     }else{ 8         parent.insertBefore(newElement,targetElement.nextSibling); 9     }10 }11 //在A02,SPAN之间,添加标签12 insertAfter(p,box);

替换节点

通过replaceChild替换节点,如下所示:

1 var span=document.getElementsByTagName('span')[0];2 var em=document.createElement('em');3 span.parentNode.replaceChild(em,span);

克隆节点

通过cloneNode方法克隆节点,有一个参数,true:深度克隆,包括内容 false:浅克隆,只克隆标签。

1 //cloneChild克隆节点2 var clone = box.cloneNode(true);//true:深度克隆,包括内容 false:浅克隆,只克隆标签3 box.parentNode.appendChild(clone);

删除节点

通过removeChild来删除节点

1 box.removeChild(box.firstChild);//删除第一个节点2 box.parentNode.removeChild(box);//删除自己

DOM进阶

DOM本身的属性相关内容,如下所示:

 1 alert(document.nodeType);//输出9代表文档根 2 alert(document.nodeName);//输出:#document 3 alert(document.nodeValue);//null 4 alert(document.firstChild.nodeName);//第一个节点,输出html 5 alert(document.firstChild.nodeType);//输出:10 6 alert(document.documentElement);//获取文档的根元素,输出:[object HTMLHtmlElement] 7 alert(document.documentElement.nodeName);//输出:HTML 8 alert(document.documentElement.nodeType);//输出:1 9 alert(document.body);//获取body元素,输出:[object HTMLBodyElement]10 alert(document.body.nodeType);//输出:111 alert(document.body.nodeName);//输出:BODY12 alert(document.doctype);//获取文档类型 输出:[object DocumentType]13 alert(document.doctype.nodeType);//输出:10   16 alert(document.title);//返回文档的标题17 alert(document.URL);//返回文档的URL,必须是从服务器访问才生效18 alert(document.referrer);//返回上一个url路径,即跳转到当前页面的url19 alert(document.domain);//返回当前的域名20 alert( document.images.length);//返回文档中图片的数组

合并节点

通过normalize方法来合并相邻的文本节点,为一个节点,如下所示:

1 var box=document.getElementById("A01");2 //合并相邻节点3 var text1=document.createTextNode('Mr.');4 var text2=document.createTextNode('Hex');5 box.appendChild(text1);6 box.appendChild(text2);7 //alert(box.childNodes.length);//此时会发现A01的子节点数是28 box.normalize();//此方法用户合并相邻的文本节点为一个节点9 alert(box.childNodes.length);//此时会发现A01的子节点数是1

分离节点

通过splitText方法,分离文本节点为两个相邻的节点,如下所示:

1 //分离节点,原始:Mr.Hex2 alert(box.firstChild.nodeValue);//输出Mr.Hex3 box.firstChild.splitText(3);//分离前三个字符为一个节点4 alert(box.firstChild.nodeValue);//输出Mr.

操作节点内容

1 box.firstChild.deleteData(0,3);//删除节点中的字符,起始位置,删除个数2 box.firstChild.insertData(0,'Hello,');//添加字符,起始位置,添加的字符串3 box.firstChild.replaceData(0,2,'Miss');//替换字符串 起始位置,替换字符数,要替换的字符4 alert(box.firstChild.substringData(0,2));//返回截取字符串,起始位置,截取字符个数

注释节点

注释节点即文档中的注释,以包裹,如下所示:

1 var c = document.getElementsByTagName("!");2 alert( c.length);//经测试IE11获取不到,长度为0

滚动到可见位置

当元素默认看不到时,需要手动滚动条才可以显示,可以通过scrollIntoView默认打开时,滚动到指定位置。如下所示:

1 //浏览器文档呈现模式2 alert(document.compatMode) ;//是否为通过标准模式,或混合模式 CSS1Compat3 //4 box.scrollIntoView(true);//将节点设置为滚动可见节点,即会将滚动调试,滚动到显示节点的位置上

判断是否包含元素节点

判断一个元素是否包含指定元素,通过contains方法来判断。 如下所示:

 1 var box=document.getElementById("A02"); 2 alert(box.childNodes.length);//会包含空白节点 3 alert(box.children.length);//不会包含空白节点和注释,和文本元素,不过children是非标准的 4 var box=document.getElementById("A01"); 5 var p=box.children[0]; 6 alert(box.contains(p));//返回true,是否包含节点 7 var box=document.getElementById("A02"); 8 //var t=box.children[0]; 9 alert(box.childNodes.length);//输出310 //alert(box.children.length);//输出011 var t=box.childNodes[1];12 alert(t.nodeValue);//注释节点13 alert(box.contains(t));//检测不出文本节点

兼容浏览器,因为有的浏览器不支持contains方法,如下所示:

 1 var box=document.getElementById("A01"); 2 var p=box.children[0]; 3 function contains(refNode,otherNode){ 4     if(typeof refNode.contains !='undefined'){ 5         return refNode.contains(otherNode); 6     }else if(typeof refNode.compareDocumentPosition !='undefined'){ 7         return refNode.compareDocumentPosition(otherNode)>16; 8     }else{ 9         //或者判断otherNode的递归判断父节点是不是refNode10         var node=otherNode.parentNode;11         do{12             if(node==refNode){13                 return true;14             }else{15                 node=otherNode.parentNode;16             }17         }while (node!=null)18     }19 }20 alert(contains(box,p));//返回true

innerText和outerText的差异

innerText不会覆盖掉元素本身,outerText会在赋值时覆盖掉元素本身,如下所示:

 1 var box=document.getElementById("A01"); 2 alert(box.innerText);//获取元素包含的文本,不包含html内容,且火狐不兼容 3 alert(box.textContent);//支持火狐的3.0 4 box.innerText='Hex Js';//赋值的时,会进行转义输出 5  6 alert(box.outerText);//获取内容和innerText一样 7 box.outerText='Mr. Hex';//但是赋值时会将元素删掉 8 alert(document.getElementById("A01"));//输出null 9 10 alert(box.outerHTML);//获取内容和innerHTML一样11 box.outerHTML='Hex Js';//但是赋值时会将元素删掉12 alert(document.getElementById("A01"));//输出null

备注

己亥杂诗(清-龚自珍)

浩荡离愁白日斜,吟鞭东指即天涯。

落红不是无情物,化作春泥更护花。


/template/Home/Zkeys/PC/Static