이번에는 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('ul1'); 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 = 'red';
}
}
} </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 = 'red';
}로그인 후 복사
parentNode: 상위 노드
예: 링크를 클릭하고 전체 li를 숨깁니다.
parentNode 예:
<html lang="en"><head>
<meta charset="UTF-8">
<title>02-parentNode</title>
<script>
window.onload = function () { var aA = document.getElementsByTagName('a'); for(var i=0;i<aA.length;i++){
aA[i].onclick = function () { this.parentNode.style.display = 'none';
}
}
} </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('div2'); 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('div2'); 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='red'; //高级浏览器 //oUl.firstElementChild.style.background='red';
로그인 후 복사
사용 예
<html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){ var oUl=document.getElementById('ul1'); //IE6-8
//oUl.firstChild.style.background='red';
//高级浏览器
//oUl.firstElementChild.style.background='red';
//给第一个li设置红色背景:由于兼容问题,故需判断下
if(oUl.firstElementChild)
{
oUl.firstElementChild.style.background='red';
} else
{
oUl.firstChild.style.background='red';
}
};</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('ul1'); var aLi=oUl.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++)
{ if(aLi[i].className=='box')
{
aLi[i].style.background='red';
}
}
}; </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('*');//*通配符,获取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('ul1'); var aBox=getByClass(oUl, 'box'); for(var i=0;i<aBox.length;i++)
{
aBox[i].style.background='red';
}
}; </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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
