> 웹 프론트엔드 > JS 튜토리얼 > DOM 노드의 기본 JavaScript 작업 요약

DOM 노드의 기본 JavaScript 작업 요약

韦小宝
풀어 주다: 2018-03-09 14:10:09
원래의
1910명이 탐색했습니다.

JavaScript 프로그램을 개발할 때 가장 일반적으로 사용되는 것은 dom의 작동입니다. 오늘은 기본 JavaScript를 사용하여 dom 노드의 작동을 요약하겠습니다. JavaScript가 dom 노드를 작동하는 방법에 대해서는 누구나 불완전하게 이해할 수 있습니다. 바라보다.

1. 요소 노드 가져오기

단일 요소 가져오기:

document.getElementById(); document.querySelector()//여러 요소 가져오기(아래 첨자를 사용하여 선택할 수 있음) 단일 요소를 반환하고 배열과 동일한 요소 컬렉션 반환):

document.getElementsByTagName(); 
document.getElementsByName(); 
document.getElementsByClassName();// 动态,实时的 
document.querySelectorAll();// 查找速度比上面的块 //是静态的,非实时的,
로그인 후 복사

요소 생성, 텍스트

document.createElement(“p”); 
document.createNode(“hello”) //创建文件节点。
로그인 후 복사

문서에 삽입

parentNode.appendChild(newNode), 
parentNode.insertBefore(newNode,positionNode);
로그인 후 복사

속성 작업

ele.setAttribute(name,value)//设置属性 
ele.getAttribute(name)//获取元素的属性 
ele.removeAttribute(name)//移除属性
로그인 후 복사

N 송가 이동

ele.remove(),parentNode.removeChild(childNode)
로그인 후 복사

하위 요소 바꾸기

parentNode.replaceChild(newNode,oldNode)
로그인 후 복사

요소 복사

ele.cloneNode(boolean);// boolean为true, 深复制。
로그인 후 복사

2 하위 요소, 상위 요소, 형제 요소 가져오기

ele.previousElementSibling;//上一个兄弟元素 
ele.parentNode;//父元素 
ele.children//子元素 
ele.nextElementSibling//下一个兄弟元素
로그인 후 복사

노드 운영에 대한 추가 정보:

jQuery의 DOM 노드 작업 방법 요약

위 내용은 DOM 노드의 기본 JavaScript 작업 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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