javascript는 dom 요소를 얻기 위해 무엇을 사용합니까?-프런트엔드 Q&A-php.cn

javascript는 dom 요소를 얻기 위해 무엇을 사용합니까?

青灯夜游

풀어 주다： 2022-09-29 16:36:19

원래의

5492명이 탐색했습니다.

JavaScript에서 dom 요소를 가져오는 방법: 1. getElementById()를 사용하여 ID를 기반으로 요소를 가져옵니다. 2. getElementsByName()을 사용하여 name 속성을 기반으로 요소를 가져옵니다. 4. getElementsByClassName()을 사용하여 클래스 이름을 기반으로 요소를 가져옵니다. 5. querySelector()를 사용하여 지정된 선택기를 기반으로 첫 번째 요소 개체를 반환합니다.

javascript는 dom 요소를 얻기 위해 무엇을 사용합니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

js는 세 부분으로 구성됩니다.

ECMAScript: js 구문
DOM: 문서 개체 모델
BOM: 브라우저 개체 모델

WebApi 표준 3C 조직에서 설정 WebApi는 주로 DOM과 BOM을 학습하며, webapi에 있어서도 js의 고유한 부분이기도 하며, js 자체의 고유한 카테고리도 아니고 js 학습의 일부도 아닙니다. 하지만 WebApi를 배우기 전에 WebApi 학습의 기반으로 js에 대한 기초가 필요합니다.

DOM

DOM 소개: DOM(문서 객체 모델)은 확장 가능한 마크업 언어(HTML 또는 XML)를 처리하기 위해 w3c 그룹에서 권장하는 표준 프로그래밍 인터페이스입니다. w3c는 이러한 DOM 인터페이스를 통해 일련의 DOM 인터페이스를 정의했습니다. 웹페이지의 내용, 구조, 스타일을 변경합니다.

Document: 페이지는 문서입니다. Document는
Element를 나타내기 위해 DOM에서 사용됩니다. Element는
DOM에서

을 나타내기 위해 사용됩니다. 웹 페이지는 노드(레이블, 속성, 텍스트, 설명 등)로 처리될 수 있습니다. DOM에서 노드를 사용하여

Get DOM 요소

요소를 가져오는 방법

javascript는 dom 요소를 얻기 위해 무엇을 사용합니까? id에 따라 getElementById() 메서드를 사용하여 id 요소가 있는 객체를 가져옵니다


<div>sj</div>


<script>

// 1、因为页面是从上往下执行的，所以先有标签，后来有script获取
// 2、get 获得 element 元素 by通过 --- 驼峰命名法
// 3、参数 id 是大小写敏感的
// 4、返回的是一个元素
var sj = document.getElementById(&#39;overview&#39;);
console.log(sj)

// dir 打印我们返回的元素对象，更好的查看里面的属性和方法
console.dir(sj)

</script>

로그인 후 복사

document.getElementsByName(&#39;name&#39;)

로그인 후 복사

태그 이름을 기반으로 Get: getElementsByTagName() 메서드를 사용하여 컬렉션을 반환합니다. 지정된 태그 이름을 가진 객체. javascript는 dom 요소를 얻기 위해 무엇을 사용합니까?

<body>
<ul>
    <li>花海</li>
    <li>晴天</li>
    <li>七里香</li>
    <li>花海</li>
    <li>晴天</li>
</ul>
<ul id="nav">
    <li>花海2</li>
    <li>晴天2</li>
    <li>七里香2</li>
    <li>花海2</li>
    <li>晴天2</li>
</ul>

</body>

<script>
// 1、返回的是 获取过来元素对象的集合，以伪数组形式存储
var lis = document.getElementsByTagName("li");
console.log(lis);
// 获取特定的那个
console.log(lis[2]);

// 2、遍历元素对象
for(var i = 0; i < lis.length; i++) {
    console.log(lis[i]);
}

// 3、element.getElementByTagName() 可以获取这个元素里面的某些标签
var nav = document.getElementById("nav");
var nav2 = nav.getElementsByTagName(&#39;li&#39;)
console.log(nav);

</script>

로그인 후 복사

참고: 우리가 얻는 것은 객체의 컬렉션이기 때문에 요소를 조작하려면 순회해야 합니다. 얻은 요소 객체는 동적입니다

HTML5의 새로운 메소드를 통해 얻은

getElementsByClassName('type') 클래스 이름에 따라 요소를 가져옵니다.

// 1、使用 getElementByClassName 获取 class类名元素 
var box = document.getElementsByClassName("box");  // 可以获取全部的 class名为 box的元素
console.log(box);

로그인 후 복사

querySelector('selector')는 클래스 이름에 따라 첫 번째 요소를 반환합니다. 지정된 선택기 요소 개체에

// 2、querySelector 返回指定选择器的第一个元素对象 切记：里面选择器需要添加 .box  #nav
var firstBox = document.querySelector(&#39;.box&#39;)  // 只能获取第一个class名为 box 的元素
console.log(firstBox);

var nav = document.querySelector(&#39;#nav&#39;)
console.log(nav);

var li = document.querySelector(&#39;li&#39;)  // 获取的也是第一个 li 元素
console.log(li);

로그인 후 복사

querySelectorAll('selector')는 지정된 선택기의 모든 요소 개체 컬렉션을 반환합니다

// 3、querySelectorAll 返回 全部的 li 元素
var allBox = document.querySelectorAll(&#39;li&#39;) 
console.log(allBox);

로그인 후 복사

특수 요소 획득(본문, html)

본문 요소 가져오기

// 1. 获取 body 元素
var bodyEle = document.body;
console.log(bodyEle)

로그인 후 복사

html 요소 가져오기

// 2. 获取 HTML 元素
var htmlEle = document.documentElement;
console.log(htmlEle)

로그인 후 복사

참고: 기억해야 할 중요한 점은 일반 요소를 가져오는 방법에는 여러 가지가 있다는 것입니다. Body와 html은 이해를 돕기 위해 일반적으로 사용되지 않습니다. 【관련 추천: javascript 동영상 튜토리얼🎜, 🎜기본 프로그래밍 동영상🎜】🎜

위 내용은 javascript는 dom 요소를 얻기 위해 무엇을 사용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!