DOM属性方法及兼容性问题详解-js教程-PHP中文网

操作特性

操作内容

首页

web前端

js教程

DOM属性方法及兼容性问题详解

巴扎黑

Aug 09, 2017 pm 02:05 PM

ie 兼容性

DOM中Element类型：（以下所有的属性仅仅是只读属性）

一、node.nodeType 以数字值返回指定节点的节点类型。

存在 12 种不同的节点类型，其中可能会有不同节点类型的子节点(前三个为重要)：
DOM属性方法及兼容性问题详解

if(ul.nodeType == Node.ELEMENT_NODE){
alert(‘Node is an element’);
}
上述代码，在标准浏览器下可以正常的运行，在非标准的浏览器（ie8之下）下不能正常的运行。
解决办法：
if(ul.nodeType ==1){ alert(‘Node is an element’); } 使用nodeType属性与数字比较。

二、nodeName值为元素类型的标签名比如ul、 p等。
nodeValue值为null。
parentNode可能是document或者Element，子节点可能。Element,Text,Comment,ProcessingInstruction, CDATASection, EntityReference。

操作特性

一、HTML元素属性的方式获得特性

所有HTML元素通过HTMLElement类型或者它的子类型（HTMLDivElement 、HTMLImageElement）表示，HTMLElement类型是继承自Element类型，只不过多加了一些特有的属性，切子类型也有自己特有的属性和方法，比如img有src，title等特有属性。特别注意的是由于class是js中的关键字，要使用className获得class 的值。

对于获取和设置方式以及注意地地方在二三中通过对比的方式表述。

二、element.getAttribute(attributename)返回指定属性名的属性值。

这个方法传入一个属性名的字符串，不区分大小写。
比如ul.getAttribute(‘class’);由于参数为字符串，所以可以使用class不必使用className。通过这个方法可以获得自定义属性，在一些含有非关键字中使用的字符的属性名，用这个方法获得属性的值特别方便，比如在HTML5规范中，自定义属性前应该加上data-前缀以方便验证，其中包含了非法字符‘-’,可以使用ul.getAttribute(‘data-index’);获得。

特别的，当attributename为style时这个方法在IE7之前的版本返回的是一个对象，其他版本的浏览器返回的是CSS文本。当attributename为onclick这样的事件处理程序时这个方法在IE7之前的版本返回的是一个方法或者null，其他版本的浏览器返回的是函数代码字符串。

通过HTML元素属性的方式获得特性与getAttribute（）差别比较大。
1、自定义属性访问上的差别：
解析html代码的时候，标准的浏览器不会将元素的自定义属性加入到DOM对象中，在js中通过属性的方式访问自定义属性是不存在的结果为undefined，非标准的浏览器会将这个自定义属性加入到DOM对象中，在js中会访问到结果。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <ul id="ul1"  index="hehe">            <li>11111111</li>            <li>22222222</li>            <li>33333333</li>            <li>44444444</li>        </ul>        <script type="text/javascript">            var ul = document.getElementById(&#39;ul1&#39;);
            alert(ul.id);     /*标准与非标准都是div1*/
            alert(ul.index);/*标准为undefined 非标准为hehe*/        </script>    </body></html>123456789101112131415161718192021

登录后复制

2.当属性为style时，返回一个对象，当属性为处理事件时，返回被复制的函数。

综上所述，在操纵DOM对象属性的时候，一般情况下使用HTML元素属性的方式获得特性，只有在获得自定义属性的值和一些含有非法字符的属性名的值的时候使getAttribute方法。

三、element.setAttribute(attributename,attributevalue)添加指定的属性，并为其赋指定的值。

与HTML元素属性的方式设置特性的方式相比，这个方法可以添加一些没有的自定义属性并赋值，但通过HTML元素属性的方式设置特性不会被设置。同时这个方法在IE7之前的版本也存在异常，所以除了设置自定义属性外，其他方式通过HTML元素属性的方式设置特性。

四、RemoveAttribute()移除特性，但是不经常使用，IE6之前的版本不支持这个方法。

操作内容

一、childNodes：表示某个元素子节点的集合，返回NodeList 对象。

在标准浏览器下：返回的子节点中包含文本类型、元素类型、注释类型等，特别的包含文本类型中空文本即所谓的换行。
在非标准的浏览器下：返回的子节点中不包含文本类型中空文本，同时与节点位置、解析方式等也有关。

<ul id="ul1">            <li>22222</li>
            111111            <!--33333--></ul><script type="text/javascript">    var oul = document.getElementById(&#39;ul1&#39;);
    alert(oul.childNodes.length);</script>在标准浏览器下：得到的结果为5（li元素前的换行空文本，li元素，注释到</li>之间这一段文本，注释，注释到</ul>的空白） 在非标准的浏览器下得到的结果为1 但是将<li>22222</li>  111111互换位置之后得到的结果为2.1234567891011

登录后复制

所以当运行下面代码的时候为出问题：<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">    </head>    <body>        <ul id="ul1">            <li>11111111</li>            <li>22222222</li>            <li>33333333</li>            <li>44444444</li>        </ul>        <script type="text/javascript">            var oul = document.getElementById(&#39;ul1&#39;);            for(var i = 0; i<oul.childNodes.length; i++){
                oul.childNodes[i].style.backgroundColor = &#39;red&#39;;
            }        /*标准： Cannot set property &#39;backgroundColor&#39; of undefined*/        /*非标准：（ie8之前）正常*/  
        </script>    </body></html>原因很简单，就是因为在标准浏览器下childNodes返回的子节点中包含非元素类型的节点。12345678910111213141516171819202122232425

登录后复制

解决上述问题的方式：
通过nodeType属性判断子节点是否为元素类型：

for(var i = 0; i<oul.childNodes.length; i++){
    if(oul.childNodes[i].nodeType === 1)
oul.childNodes[i].style.backgroundColor = &#39;red&#39;;
}1234

登录后复制

在非法嵌套的html文档中由于解析方式不同，在标准和非标准浏览器下呈现的结果不同，这完全于浏览器内核的解析方式有关。比如：

<!doctype html>    <html lang="en">    <head>        <meta charset="UTF-8" />    </head>    <body>        <ul id="ul1">            <li>11111111</li>            <li>22222222</li>            <li>33333333</li>            <li>44444444</li>            <p>5555555</p>        </ul>        <script type="text/javascript">            var oul = document.getElementById(&#39;ul1&#39;);            for(var i = 0; i<oul.childNodes.length; i++){                if(oul.childNodes[i].nodeType === 1)
                oul.childNodes[i].style.backgroundColor = &#39;red&#39;;
            }        </script>    </body>    </html>1234567891011121314151617181920212223

登录后复制

对于一些分标准的浏览器比如ie7 解析的时候他会把这种那个不符合语义的p元素放到最后一个li中，但对于其他的浏览器并不会这样。换句话说，在标准浏览器下p是ul的子节点，但是在非标准的浏览器下p是最后一个li的子节点，这完全和浏览器内核的系欸小方式有关。

由此可以看出，对于在书写html文档的时候，结构化语义是多么的重要，至少能为添加js方便不少。

二、element.childern仅仅返回元素类型的子节点集合，返回NodeList 对象。

Children比childNodes要好得多，因为他仅仅获取那些为元素类型的子节点。但是还是不能免于非法嵌套带来的问题，这本身至于浏览器的近稀饭时有关，与用那种属性没有关系。

三、element.firstChild（firstElementChild）：获取第一个子点
element.lastChild（lastElementChild）：获取最后一个子节点
element.nextSibling（nextElementSibling）：获取相邻的下一个兄弟子节点
element.previousSibling（previousElementSibling）：获取相邻的上一个兄弟节点

以firstChild为例说明一下性质，其他的大同小异。
在标准情况下：返回的结果可能是文本类型（空文本）。
在非标准的情况下：如果有元素子节点，那么一定返回第一个元素类型的子节点。

<!doctype html><html lang="en"><head> <meta charset="UTF-8" /></head><body> <ul id="ul1"> <li>11111111</li> <li>22222222</li> <li>33333333</li> <li>44444444</li> </ul> <script type="text/javascript"> var oul = document.getElementById('ul1');

alert(oul.firstChild.nodeName); /*标准下text非标准为li*/ </script></body></html>123456789101112131415161718192021

登录后复制

解决这种情况
1是firstElementChild。
firstElementChild仅仅是在标准浏览器下有效，在非标准的浏览器下是没有定义的。在标准浏览器下仅仅返回第一个元素类型的子节点，如果没有返回null。
再js中加入：

function firstChild(obj){                if(obj.firstElementChild === undefined){//检测是否为标准浏览器                    return obj.firstChild;//不是标准浏览器，用firstChild返回第一个元素子节点，可能为null
                }else{                    return obj.firstElementChild;//是标准浏览器，用firstElementChild返回第一个元素子节点，可能为null
                }
            }            var oFirst = firstChild(oul);            if(oFirst){//判断有没有第一个元素子节点排除空节点的情况
                oFirst.style.backgroundColor = &#39;orange&#39;;
            }else{
                alert(&#39;没有第一个元素&#39;);
            }123456789101112131415

登录后复制

2直接用children：推荐

if(oul.children[0]){
                oul.children[0].style.backgroundColor = &#39;orange&#39;;
            }else{
                alert(&#39;没有第一个元素&#39;);
            }123456

登录后复制

四、element.parentNode：当前节点的父级节点，无兼容性问题。

Eg：点击隐藏将这个列表隐藏<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script>window.onload = function() {    var aA = document.getElementsByTagName(&#39;a&#39;);    for (var i=0; i<aA.length; i++) {   
        aA[i].onclick = function() {            this.parentNode.style.display = &#39;none&#39;;     
        }   
    }
}</script></head><body>    <ul id="ul1">        <li>11111 <a href="javascript:;">隐藏</a></li>        <li>22222 <a href="javascript:;">隐藏</a></li>        <li>33333 <a href="javascript:;">隐藏</a></li>        <li>44444 <a href="javascript:;">隐藏</a></li>    </ul></body></html>123456789101112131415161718192021222324252627

登录后复制

五、element.offsetParent : 只读属性离当前元素最近的一个有定位属性的父节点

非ie7以下的浏览器：
如果没有定位父级 offsetParent 为body
如果有定位父级 offsetParent 为定位父级
Ie7以下的浏览器：
如果没有定位父级自身没有定位 offsetParent 为body，自身有定位的话为html
如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到这个触发了layout特性的父节点上。

如果有定位父级 offsetParent 为定位父级

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>div {padding: 40px 50px;}#div1 {background: red;}#div2 {background: green; zoom: 1;position: relative;}#div3 {background: orange;}</style><script>window.onload = function() {    var oDiv3 = document.getElementById(&#39;div3&#39;);
    alert( oDiv3.offsetParent.id ); 
}</script></head><body id="body1">    <div id="div1">        <div id="div2">            <div id="div3"></div>        </div>    </div></body></html>1234567891011121314151617181920212223242526272829

登录后复制

Div2 zoom：1；属性触发layout，并且div3没有定位，所以在ie7一下的版本父元素div2，同时，div2相对定位，在其他浏览器中父元素为div2。解决了兼容性问题。

六、element.offsetLeft[Top] : 只读属性
当前元素到定位父级的距离（偏移值）（或者说，到当前元素的offsetParent的距离）

非ie7以下的浏览器：
如果没有定位父级 offsetLeft [top]是到html的距离。
如果有定位父级是到定位父级的距离。
ie7以下：
如果自己没有定位，无论是否有没有父级定位offsetLeft[Top]是到body的距离
如果自己有定位，那么就是到定位父级的距离（没有父级定位情况下是到html的距离）。

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>div {padding: 40px 50px;}#div1 {background: red;}#div2 {background: green; position: relative;}#div3 {background: orange; position: relative;}</style><script>window.onload = function() {    var oDiv3 = document.getElementById(&#39;div3&#39;);
    alert( oDiv3.offsetTop );
}</script></head><body id="body1">    <div id="div1">        <div id="div2">            <div id="div3"></div>        </div>    </div></body></html>123456789101112131415161718192021222324252627

登录后复制

例子：获得任意一个元素的相对
于页面的位置<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <style type="text/css">            body{padding:0; margin:0;}            /*由于offsetLeft和offsetParsent在没有定位父级的时候父级不同*/            div{padding: 40px 50px;}            #div1{background-color: #008000;}            #div2{background-color: #FF0000;position: relative;}            #div3{background-color: #FFA500;position:relative;}            /*设置position offsetLeft在字节没有定位的时候是相对body的*/        </style>    </head>    <body>        <div id="div1">            <div id="div2">                <div id="div3"> 
                </div>            </div>        </div>        <script type="text/javascript">            var oDiv = document.getElementById(&#39;div3&#39;);            function getPosition(obj){                var pos = {left:0, top:0};                while(obj){
                    pos.left += obj.offsetLeft;
                    pos.top +=obj.offsetTop;
                    obj = obj.offsetParent; 
                }                return pos;
            }
            alert(getPosition(oDiv).left);        </script>    </body></html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546

登录后复制

七、长高：
element.style.width : 样式宽 = width
element.clientWidth : 可视区宽 = width + padding
element.offsetWidth: 占位宽 = width + padding + border

八、
node.appendChild(node)
node.insertBefore(newnode,existingnode)
node.removeChild(node)
node.replaceChild(newnode,oldnode) node为oldnode的父节点
这几个函数既能操作已有的节点，也能操作动态创建的节点（createElement（））
node.insertBefore(newnode,existingnode)当existingnode当null时在ie下会报错解决的方式就是：用if判断如果为null执行什么操作，否则执行什么操作。

简单的留言板：<!DOCTYPE html><html><head>    <meta charset="UTF-8"></head><body>    <input type="text" name="text" id="text" />    <input type="button" name="btn" id="btn" value="添加" />    <ul id="ul1">    </ul>    <script type="text/javascript">        var text = document.getElementById(&#39;text&#39;);        var btn = document.getElementById(&#39;btn&#39;);        var oul = document.getElementById(&#39;ul1&#39;);
 
        btn.onclick =function(){            var li = document.createElement(&#39;li&#39;);
            li.innerHTML = text.value;            var oa = document.createElement(&#39;a&#39;);
            oa.innerHTML = &#39;删除&#39;;
            oa.href = &#39;javascript:;&#39;;
            oa.onclick = function(){
                oul.removeChild(this.parentNode);
            }
            li.appendChild(oa);            if(!oul.children[0]){
                oul.appendChild(li);
            }else{
                oul.insertBefore(li,oul.children[0]);
            }            if(oul.children.length>5){
                oul.removeChild(oul.children[oul.children.length-1])
            }
        }    </script></body></html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748

登录后复制

以上是DOM属性方法及兼容性问题详解的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Java教程

1669

CakePHP 教程

1428

Laravel 教程

1329

PHP教程

1273

C# 教程

1256

显示更多

Related knowledge

蓝牙5.3和5.2版本的比较及差异解析 Dec 28, 2023 pm 06:08 PM

现在有不少手机都号称支持蓝牙5.3版本，那么蓝牙5.3和5.2的区别是什么呢，其实它们本质上都是蓝牙5的后续更新版本，在大部分的性能和功能上是没有多少区别的。蓝牙5.3和5.2的区别：一、数据速率1、5.3能够支持更高的数据速率最高可达2Mbps。2、而5.2只能最高达到1Mbps，则说明5.3能够更快、更稳定的传输数据。二、加密控制增强2、蓝牙5.3提高了加密密钥长度控制选项，提高了安全性，能够更好的连接门禁等设备。3、同时，由于管理员控制更加简单，在连接的时候还能更加的便捷、快速，5.2则无

i7-7700无法升级至Windows 11的解决方案 Dec 26, 2023 pm 06:52 PM

i77700的性能运行win11完全足够，但是用户却发现自己的i77700不能升级win11，这主要是受到了微软硬性条件的限制，所以只要跳过该限制就能安装了。i77700不能升级win11：1、因为微软限制了cpu的版本。2、intel只有第八代及以上版本可以直升win11。3、而i77700作为7代，无法满足win11的升级需求。4、但是i77700在性能上是完全能流畅使用win11的。5、所以大家可以使用本站的win11直装系统。6、下载完成后，右键“装载”该文件。7、再双击运行其中的“一键

浏览器兼容性 Sep 14, 2023 am 11:08 AM

浏览器兼容性设置的方法有选择合适的HTML和CSS标准、使用CSS前缀和Reset、使用浏览器兼容性前缀库、检测浏览器特性、使用浏览器兼容性工具和进行跨浏览器测试。详细介绍：1、选择合适的HTML和CSS标准，在编写HTML和CSS代码时，应尽量遵循W3C的标准，不同浏览器对标准的支持程度会有所不同，但遵循标准可以最大程度地提高兼容性；2、使用CSS前缀等等。

Go语言在Linux系统上的兼容性如何？ Mar 22, 2024 am 10:36 AM

Go语言在Linux系统上的兼容性非常好，它能够无缝地在各种Linux发行版上运行，并且支持不同架构的处理器。本文将介绍Go语言在Linux系统上的兼容性，并通过具体的代码示例展示其强大的适用性。1.安装Go语言环境在Linux系统上安装Go语言环境非常简单，只需要下载对应的Go二进制包并设置相关环境变量即可。以下是在Ubuntu系统上安装Go语言的步骤：

详解win11对win10软件的兼容性问题 Jan 05, 2024 am 11:18 AM

win10系统中的软件都已经进行了很完美的优化，但是对于最新的win11用户大家肯定都很好奇是不是可以支持这款系统，所以下面就给你们带来了win11支不支持win10软件详细介绍，快来一起了解一下吧。win11支持win10软件吗：1、Win10系统的软件甚至是Win7系统的应用都可以很好的进行兼容。2、经过使用Win11系统的大神反馈目前还没有出现应用不兼容的问题。3、所以大家可以放心大胆的升级，不过普通的用户建议等到Win11发布正式版再升级。4、Win11不仅是兼容性好，而且还有Windo

可以使用蓝牙耳机在飞行模式下吗？ Feb 19, 2024 pm 10:56 PM

随着现代科技的不断发展，无线蓝牙耳机已经成为人们日常生活中不可或缺的一部分。无线耳机的出现解放了我们的双手，让我们可以更自由地享受音乐、通话和其他娱乐活动。然而，当我们乘坐飞机时，我们往往会被要求将手机设置为飞行模式。那么问题来了，飞行模式可以用蓝牙耳机吗？在本文中，我们将探讨这个问题。首先，让我们来了解一下飞行模式的作用和含义。飞行模式是手机的一种特殊模式

win11无法使用ie11浏览器怎么办？(win11用不了ie浏览器) Feb 10, 2024 am 10:30 AM

越来越多的用户开始升级win11系统，由于每个用户的使用习惯不同，还是有不少用户在使用ie11浏览器，那么win11系统用不了ie浏览器，该怎么办呢？windows11还支持ie11吗？下面就来看看解决办法。win11无法使用ie11浏览器的解决方法1、首先右键开始菜单，选择“命令提示符（管理员）”打开。2、打开之后，直接输入“Netshwinsockreset”，回车确定。3、确定之后再输入“netshadvfirewallreset&rdqu

WIN10兼容性没了进行找回的操作步骤 Mar 27, 2024 am 11:36 AM

1、右键点击程序，发现在打开的属性窗口中，没有找到【兼容性】选项卡。2、在Win10桌面，右键点击桌面左下角的开始按钮，在弹出的菜单里选择【运行】菜单项。3、这时会打开Win10的运行窗口，在窗口中输入gpedit.msc，然后点击确定按钮。4、这时就会打开本地组策略编辑器窗口，在窗口中依次点击【计算机配置/管理模板/Windows组件】菜单项。5、在打开的Windows组件菜单中，找到【应用程序兼容性】菜单项，然后在右侧窗口中找到【删除程序兼容性属性页】设置项。6、右键点击该设置项，在弹出的菜

See all articles

DOM属性方法及兼容性问题详解

操作特性

操作内容

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题