심층적인 JavaScript DOM 애플리케이션

php中世界最好的语言
풀어 주다: 2018-03-13 13:29:34
원래의
1411명이 탐색했습니다.

이번에는 JavaScript DOM 응용 프로그램에 대해 심층적으로 소개하겠습니다. JavaScriptDOM 응용 프로그램 사용 시 주의사항은 무엇인가요?

DOM이란 무엇입니까:
문서, 노드! 사실 CSS에서는 라벨이라고 하고, JS에서는 요소라고 하며, DOM에서는

브라우저 지원입니다.
IE: 10% Chrome :60% FF:99% 지원

DOM 노드
childNodes: 하위 노드
nodeType: 노드 유형

nodeType == 3 -> 텍스트 노드

nodeType == 1 -> node

childNodes 및 nodeType

<head>    <meta charset="UTF-8">
    <title>01-DOM基础</title>
    <script>
        window.onload = function () {            //        ul的子节点为li
            var oUl = document.getElementById(&#39;ul1&#39;);            for(var i=0;i<oUl.childNodes.length;i++){                //由于在不同的浏览器下,获取到的oUl.childNodes是不一样的;IE6-8会将文本节点也算进去;
                //故若想给元素节点修改样式,可以通过 oUl.childNodes[i].nodeType == 1 来获取元素节点,并修改样式;
                //nodeType==3   ->  文本节点
                //nodeType==1   ->  元素节点
                //给所有的li设置背景颜色
                if(oUl.childNodes[i].nodeType == 1){
                    oUl.childNodes[i].style.background = &#39;red&#39;;
                }
            }
        }    </script></head><body><ul id="ul1">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li></ul>abcdefg //文本节点<span>abcdefg</span> //元素节点</body></html>
로그인 후 복사

와 함께 사용하여 하위 노드
children을 가져옵니다. 텍스트가 아닌 요소만 포함하며 모든 브라우저와 호환됩니다.
위의 예는 이렇게 간단하고 조잡하게 작성할 수 있습니다! !!

for (var i=0;i<oUl.children.length;i++){
     oUl.children[i].style.background = &#39;red&#39;;
}
로그인 후 복사

parentNode: 상위 노드
예: 링크를 클릭하고 전체 li를 숨깁니다.
parentNode 예:

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>02-parentNode</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>
    <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>
로그인 후 복사

offsetParent
예: 페이지에서 요소의 실제 위치를 가져옵니다.
주로 위치 지정에 사용됩니다. 요소의 실제 상위 노드입니다.

예제 1: absolute를 두 번째 div2 Positioning으로 설정하고 div2의 상위 노드 div1에 아무것도 설정하지 않은 경우 div2의 offsetParent는 body입니다.

<html lang="en"> <head>     <meta charset="UTF-8">     <title>offsetParent</title>     <style>         #div1{width: 200px;height: 200px;background: #ccc;margin-left: 100px;}         #div2{width: 100px;height: 100px;background: red;position: absolute;left: 10px;}     </style>     <script>         window.onload = function () {             oDiv2 = document.getElementById(&#39;div2&#39;);             alert(oDiv2.offsetParent); //结果:[object HTMLBodyElement] 父节点为body;         }     </script> </head> <body> <div id="div1">     <div id="div2"></div> </div> </body> </html>
로그인 후 복사

예 2: 절대 위치 지정을 설정합니다. 두 번째 div2, div2의 상위 노드 div1에 대한 상대 위치 설정, div1의 경우 div2의 offsetParent.

<html lang="en"> <head>     <meta charset="UTF-8">     <title>offsetParent</title>     <style>         #div1{width: 200px;height: 200px;background: #ccc;margin-left: 100px;             position: relative;}         #div2{width: 100px;height: 100px;background: red;position: absolute;left: 10px;}     </style>     <script>         window.onload = function () {             oDiv2 = document.getElementById(&#39;div2&#39;);             alert(oDiv2.offsetParent); //结果:[object HTMLDivElement] 父节点为div;         }     </script> </head> <body> <div id="div1">     <div id="div2"></div> </div> </body> </html>
로그인 후 복사

2.DOM 노드(2)

머리 및 꼬리 하위 노드

호환성 문제가 있습니다

firstChild、firstElementChild
lastChild 、lastElementChild
   //IE6-8    //oUl.firstChild.style.background=&#39;red&#39;;    //高级浏览器    //oUl.firstElementChild.style.background=&#39;red&#39;;
로그인 후 복사

사용 예

<html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){    var oUl=document.getElementById(&#39;ul1&#39;);    //IE6-8
    //oUl.firstChild.style.background=&#39;red&#39;;
    //高级浏览器
    //oUl.firstElementChild.style.background=&#39;red&#39;;
    //给第一个li设置红色背景:由于兼容问题,故需判断下
    if(oUl.firstElementChild)
    {
        oUl.firstElementChild.style.background=&#39;red&#39;;
    }    else
    {
        oUl.firstChild.style.background=&#39;red&#39;;
    }
};</script></head><body><ul id="ul1">
    <li>1</li>
    <li>2</li>
    <li>3</li></ul></body></html>
로그인 후 복사

형제 노드(위와 동일하게 사용)

호환성 문제가 있습니다

nextSibling, nextElementSibling

previousSibling, PreviousElementSibling

3. 요소 속성 조작

Element속성 작업
첫 번째 유형: oDiv. style.display='block';
두 번째 유형: oDiv.style['display']=' block';
세 번째 방법: Dom 방법: oDiv2.setAttribute('display','none');

DOM 방법 요소 속성 조작
Get: getAttribute(이름)
Set: setAttribute(이름, 값)
Delete: 제거속성(이름)

4. className을 사용하여 요소 선택

className을 사용하여 요소 선택하는 방법

모든 요소 선택

className 조건으로 필터링
기본 사용법

<html><head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script>
        window.onload=function ()        {            var oUl=document.getElementById(&#39;ul1&#39;);            var aLi=oUl.getElementsByTagName(&#39;li&#39;);            for(var i=0;i<aLi.length;i++)
            {                if(aLi[i].className==&#39;box&#39;)
                {
                    aLi[i].style.background=&#39;red&#39;;
                }
            }
        };    </script></head><body><ul id="ul1">
    <li class="box"></li>
    <li class="box"></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="box"></li>
    <li></li></ul></body></html>
로그인 후 복사

함수로 캡슐화
고급 사용법

   <script>
         //封装成函数
        function getByClass(oParent, sClass)        {            var aResult=[];            var aEle=oParent.getElementsByTagName(&#39;*&#39;);//*通配符,获取oParent下面所有的节点
            for(var i=0;i<aEle.length;i++)
            {                if(aEle[i].className==sClass)
                {
                    aResult.push(aEle[i]);
                }
            }            return aResult;
        }        window.onload=function ()        {            var oUl=document.getElementById(&#39;ul1&#39;);            var aBox=getByClass(oUl, &#39;box&#39;);            for(var i=0;i<aBox.length;i++)
            {
                aBox[i].style.background=&#39;red&#39;;
            }
        };    </script>
    <body>
       <ul id="ul1">
          <li class="box"></li>
          <li class="box"></li>
          <li></li>
          <li></li>
          <li></li>
         <li class="box"></li>
         <li></li>
       </ul></body>
로그인 후 복사

5. 요소 생성, 삽입 및 삭제

DOM 요소 생성
createElement(태그 이름) 노드 생성appendChild(노드) 노드 추가

참고:appendChild(노드)에는 두 가지 기능이 있습니다.

(1) 이 요소에 createElement(태그 이름)가 전달되면 새 상위 요소에 직접 추가할 수 있습니다.
(2). , 그런 다음 1. 먼저 원래 부모의 요소를 삭제합니다. 2. 새 부모에 요소를 추가합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천도서:

JavaScript 기본 응용 자세히 알아보기

JS에서 주의해야 할 8가지 기본 지식

위 내용은 심층적인 JavaScript DOM 애플리케이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿