DOM 속성 메서드 및 호환성 문제에 대한 자세한 설명-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

DOM 속성 메서드 및 호환성 문제에 대한 자세한 설명

巴扎黑

Aug 09, 2017 pm 02:05 PM

ie호환성

DOM의 요소 유형: (다음 속성은 모두 읽기 전용 속성입니다.)

1. node.nodeType 지정된 노드의 노드 유형을 숫자 값으로 반환합니다.

12가지 노드 유형이 있으며 그 중에는 다양한 노드 유형의 하위 노드가 있을 수 있습니다(처음 세 개가 중요함):
DOM 속성 메서드 및 호환성 문제에 대한 자세한 설명

if(ul.nodeType == Node.ELEMENT_NODE){
Alert('노드는 요소입니다.')
}
위 코드는 표준 브라우저에서는 정상적으로 실행될 수 있지만, 비표준 브라우저(ie8 미만)에서는 정상적으로 실행될 수 없습니다.
해결책:
if(ul.nodeType ==1){ Alert('노드는 요소입니다.') } 숫자와 비교하려면 nodeType 속성을 사용하세요.

2. nodeName 값은 ul, p 등과 같은 요소 유형의 태그 이름입니다.
nodeValue 값이 null입니다.
ParentNode는 문서 또는 요소일 수 있으며 하위 노드는 것일 수 있습니다. 요소,텍스트,설명,처리 지침,CDATASection,EntityReference.

기능 작동

1. HTML 요소 속성을 통해 기능 얻기

모든 HTML 요소는 HTMLElement 유형 또는 해당 하위 유형(HTMLDivElement, HTMLImageElement)으로 표시되지만 HTMLElement 유형은 더 많은 유형을 갖습니다. 추가 사항. 고유 속성 Cut 하위 유형에는 고유한 속성과 메서드도 있습니다. 예를 들어 img에는 src 및 title과 같은 고유 속성이 있습니다. 특히 주의할 점은 class가 js의 키워드이므로 class의 값을 얻으려면 className을 사용해야 한다는 것입니다.

획득 및 설정 방법과 주의할 부분을 2와 3에서 비교하여 설명합니다.

2. element.getAttribute(attributename)은 지정된 속성 이름의 속성 값을 반환합니다.

이 메서드는 대소문자를 구분하지 않는 속성 이름 문자열을 전달합니다.
예를 들어 ul.getAttribute('class'); 매개변수가 문자열이므로 className 대신 class를 사용할 수 있습니다. 이 방법을 통해 사용자 정의 속성을 얻을 수 있습니다. 키워드가 아닌 문자를 포함하는 일부 속성 이름에서는 이 방법을 사용하여 속성 값을 얻는 것이 특히 편리합니다. 예를 들어, HTML5 사양에서는 사용자 정의 속성이 다음과 같습니다. data- 접두사가 앞에 붙습니다. 확인을 용이하게 하기 위해 잘못된 문자 '-'가 포함된 경우 ul.getAttribute('data-index');를 사용하여 얻을 수 있습니다.

특히 attributename이 style인 경우 이 메서드는 IE7 이전 버전에서는 객체를 반환하지만 다른 버전의 브라우저에서는 CSS 텍스트를 반환합니다. attributename이 onclick과 같은 이벤트 핸들러인 경우 이 메소드는 IE7 이전 버전에서 메소드 또는 null을 리턴하고 다른 버전의 브라우저는 함수 코드 문자열을 리턴합니다.

HTML 요소 속성을 통해 속성을 얻는 것은 getAttribute()와 상당히 다릅니다.
1. 사용자 정의 속성 액세스의 차이점:
HTML 코드를 구문 분석할 때 표준 브라우저는 DOM 개체에 요소의 사용자 정의 속성을 추가하지 않습니다. js의 속성을 통해 사용자 정의 속성에 액세스하면 결과가 정의되지 않습니다. 이 사용자 정의 속성을 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. 속성이 스타일인 경우 객체가 반환됩니다. 속성이 이벤트 처리인 경우 복사된 함수가 반환됩니다.

요약하자면 DOM 객체 속성을 조작할 때 일반적으로 HTML 요소 속성을 사용하여 속성을 얻습니다. 사용자 정의 속성 값과 잘못된 문자가 포함된 일부 속성 이름 값을 얻을 때만 getAttribute를 사용하세요.

3. element.setAttribute(attributename, attributevalue)는 지정된 속성을 추가하고 지정된 값을 할당합니다.

HTML 요소 속성을 통해 속성을 설정하는 방식과 비교하여 이 방법은 사용할 수 없는 일부 맞춤 속성을 추가하고 값을 할당할 수 있지만 HTML 요소 속성을 통해 설정된 속성은 설정되지 않습니다. 동시에 이 방법에는 IE7 이전 버전에도 예외가 있으므로 사용자 정의 속성을 설정하는 것 외에도 HTML 요소 속성을 통해 속성을 설정하는 다른 방법이 있습니다.

4. RemoveAttribute()는 속성을 제거하지만 IE6 이전 버전에서는 이 방법을 지원하지 않습니다.

작업 내용

1. 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(&#39;ul1&#39;);
            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 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.