JavaScript 예제를 사용한 HTML 요소 작업에 대한 자세한 설명

이 기사에서는 javascript에 대한 관련 지식을 제공합니다. 이는 연산된 요소를 얻는 방법, 연산된 요소의 내용, 요소의 속성 및 스타일 등을 포함하여 html 요소의 연산과 관련된 문제를 주로 소개합니다. 그것이 모두에게 도움이 되기를 바랍니다.

관련 권장 사항: javascript 튜토리얼

1. 작업 요소 가져오기

문서 개체의 메서드 및 속성

문서 개체는 요소를 찾기 위한 몇 가지 메서드를 제공합니다. 요소를 기반으로 요소를 찾으려면 id, name, class 속성과 태그 이름을 사용하여 작업 요소를 가져옵니다.

요약

지정된 ID를 가진 요소를 반환하는 document.getElementById() 메서드를 제외하고 다른 메서드는 요구 사항을 충족하는 컬렉션을 반환합니다. 객체 중 하나를 얻으려면 기본적으로 0부터 시작하는 아래 첨자를 사용하여 얻을 수 있습니다.

문서 개체는 문서의 요소를 가져오는 데 사용할 수 있는 몇 가지 속성을 제공합니다. 예를 들어 모든 양식 태그, 이미지 태그 등을 가져옵니다.

• 문서 객체의 body 속성은 body 요소를 반환하는 데 사용됩니다.
• 문서 개체의 documentElement 속성은 HTML 문서의 루트 노드 html 요소를 반환하는 데 사용됩니다.

Note

문서 객체의 메소드와 문서 객체의 속성을 통해 얻은 연산 요소는 동일한 객체를 나타냅니다. 예를 들어 document.getElementsByTagName('body')[0]은 document.body와 동일합니다.

HTML5의 새로운 문서 객체 메소드

HTML5에서는 작업에 필요한 요소를 더 쉽게 얻을 수 있도록 querySelector() 및 querySelectorAll()이라는 두 가지 새로운 메소드가 문서 객체에 추가되었습니다.

• querySelector() 메서드는 지정된 요소 또는 CSS 선택기와 일치하는 문서의 첫 번째 개체에 대한 참조를 반환하는 데 사용됩니다.
• querySelectorAll() 메서드는 지정된 요소 또는 CSS 선택기와 일치하는 문서의 개체 컬렉션을 반환하는 데 사용됩니다.

이 두 메소드는 동일하게 사용되므로 다음에서는 document.querySelector() 메소드를 예로 사용합니다.

요소 개체의 메서드 및 속성

DOM 작업에서 요소 개체는 요소 내에서 지정된 요소를 가져오는 메서드도 제공합니다. 일반적으로 사용되는 두 가지 메서드는 getElementsByClassName() 및 getElementsByTagName()입니다. 문서 객체에 있는 같은 이름의 메서드와 같은 방식으로 사용됩니다.

또한 요소 개체는 지정된 요소의 하위 요소를 가져오기 위해 하위 속성도 제공합니다. 예를 들어, 위 예에서 ul의 하위 요소를 가져옵니다.

• 요소 객체의 children 속성은 객체 컬렉션도 반환합니다. 객체 중 하나를 가져오려면 첨자를 통해서도 가져와야 합니다. 기본값은 0부터 시작합니다.
• 또한 문서 객체에는 children 속성도 있으며 첫 번째 하위 요소는 일반적으로 html 요소입니다.

HTMLCollection 객체

• HTMLCollection 객체: 문서 객체 또는 Element 객체를 통해 getElementsByClassName() 메소드, getElementsByTagName() 메소드, children 속성 등을 호출하여 반환되는 객체 집합입니다.
• NodeList 개체: 문서 개체가 getElementsByName() 메서드를 호출하면 Chrome 및 FireFox 브라우저에서는 NodeList 개체가 반환되고 IE11에서는 HTMLCollection 개체가 반환됩니다.

HTMLCollection과 NodeList 객체의 차이점:

• HTMLCollection 객체는 요소 작업에 사용됩니다.
• NodeList 객체는 노드 작업에 사용됩니다.

Tips: getElementsByClassName() 메서드, getElementsByTagName() 메서드 및 children 속성에 의해 반환된 컬렉션의 경우 id와 name이 자동으로 속성으로 변환될 수 있습니다.

2. 요소 콘텐츠

JavaScript에서는 획득한 요소 콘텐츠에 대해 작업을 수행하려는 경우 DOM에서 제공하는 속성과 메서드를 사용할 수 있습니다.

• 속성은 Element 객체에 속하고, 메소드는 document 객체에 속합니다.
• innerHTML은 사용될 때 작성된 형식과 태그 스타일을 유지합니다.
• innerText는 모든 서식과 태그가 제거된 일반 텍스트 콘텐츠입니다.
• textContent 속성은 태그를 제거한 후에도 텍스트 형식을 유지합니다.

예를 들어

코드 구현

	nbsp;html>
	
	
	<meta>
	<title>元素内容操作</title>
	
	
	<p>
	The first paragraph...
	</p><p>
	The second paragraph...
	<a>third</a>
	</p>
	
	<script>
	var box = document.getElementById(&#39;box&#39;);
	console.log(box.innerHTML);
	console.log(box.innerText);
	console.log(box.textContent);
	</script>
	
	

Note

innerText 속성을 사용하면 브라우저 호환성 문제가 발생할 수 있습니다. 따라서 개발 시 요소의 텍스트 내용을 최대한 가져오거나 설정하려면 innerHTML을 사용하는 것이 좋습니다. 동시에, 내용 설정 시 innerHTML 속성과 document.write() 메소드 사이에는 특정 차이점이 있습니다. 전자는 지정된 요소에 대해 작동하는 반면 후자는 전체 HTML 문서 페이지를 재구성합니다. 따라서 독자들은 개발 시 실제 필요에 따라 적절한 구현 방법을 선택해야 합니다

[사례] ​​상자 크기 변경

코드 구현 아이디어

:① HTML을 작성하고 p의 크기를 설정합니다. .

② 사용자 클릭 수에 따라 상자 크기 변경을 완료합니다.

3 클릭 횟수가 홀수이면 상자가 커지고, 클릭 횟수가 짝수이면 상자가 작아집니다.

코드 구현

	nbsp;html>
	
	
	<meta>
	<style>
	.box{width:50px;height:50px;background:#eee;margin:0 auto;}
	</style>
	
	
	<p></p>
	<script>
	var box = document.getElementById(&#39;box&#39;);
	var i = 0; // 保存用户单击盒子的次数
	box.onclick = function() { // 处理盒子的单击事件
	++i;
	if (i % 2) { // 单击次数为奇数，变大
	this.style.width = &#39;200px&#39;;
	this.style.height = &#39;200px&#39;;
	this.innerHTML = &#39;大&#39;;
	} else { // 单击次数为偶数，变小
	this.style.width = &#39;50px&#39;;
	this.style.height = &#39;50px&#39;;
	this.innerHTML = &#39;小&#39;;
	}
	};
	</script>
	
	

3. 요소 속성

DOM에서는 JavaScript가 지정된 HTML 요소의 관련 속성을 쉽게 얻고 수정하고 탐색할 수 있도록 작동 속성과 메서드가 제공됩니다.

HTML 요소의 모든 속성과 모든 속성의 길이를 얻으려면 속성 속성을 사용하세요.

예를 들어

코드 구현

	nbsp;html>
	
	
	<meta>
	<title>元素属性操作</title>
	<style>
	.gray{background: #CCC;}
	#thick{font-weight: bolder;}
	</style>
	
	
	<p>test word.</p>
	<script>
	// 获取p元素
	var ele = document.getElementsByTagName(&#39;p&#39;)[0];
	// ① 输出当前ele的属性个数
	console.log(&#39;未操作前属性个数：&#39; + ele.attributes.length);
	// ② 为ele添加属性，并查看属性个数
	ele.setAttribute(&#39;align&#39;, &#39;center&#39;);
	ele.setAttribute(&#39;title&#39;, &#39;测试文字&#39;);
	ele.setAttribute(&#39;class&#39;, &#39;gray&#39;);
	ele.setAttribute(&#39;id&#39;, &#39;thick&#39;);
	ele.setAttribute(&#39;style&#39;, &#39;font-size:24px;border:1px solid green;&#39;);
	console.log(&#39;添加属性后的属性个数：&#39; + ele.attributes.length);
	// ③ 获取ele的style属性值
	console.log(&#39;获取style属性值：&#39; + ele.getAttribute(&#39;style&#39;));
	// ④ 删除ele的style属性，并查看剩余属性情况
	ele.removeAttribute(&#39;style&#39;);
	console.log(&#39;查看所有属性：&#39;);
	for (var i = 0; i < ele.attributes.length; ++i) {
	console.log(ele.attributes[i]);
	}
	</script>
	
	

Four.Element style

Review: Element 속성의 연산을 통해 스타일을 수정합니다.

요소 스타일 구문: style.Attribute 이름.

요구사항: CSS 스타일 이름의 가로 대시 "-"를 제거하고 두 번째 영어 첫 글자를 대문자로 표기해야 합니다.

예: 배경색의 배경색을 설정하려면 스타일 속성 연산에서 backgroundColor로 변경해야 합니다.

참고

CSS의 부동 소수점 스타일은 JavaScript의 예약어와 충돌하며, 브라우저마다

해법에 차이가 있습니다. 예를 들어 IE9-11, Chrome, FireFox는 "float"와 "cssFloat"를 사용할 수 있고, Safari 브라우저는 "float"를, IE6~8은 "styleFloat"를 사용할 수 있습니다.

질문: 요소에는 여러 클래스 선택기가 있을 수 있습니다. 개발 중에 선택기 목록을 어떻게 작동합니까?

원래 해결 방법: 요소 객체의 className 속성을 사용하여 결과를 얻은 다음, 얻은 결과는 문자 유형이며 실제 상황에 따라 문자열을 처리합니다.

HTML5에서 제공하는 메소드: 새로운 classList(읽기 전용) 요소의 클래스 선택기 목록.

예: p 요소의 클래스 값이 "box header navlist title"인 경우 헤더를 삭제하는 방법은 무엇입니까?

HTML5 솔루션: p 요소 object.classList.toggle("header");

예를 들어

코드 구현

	nbsp;html>
	
	
	<meta>
	<title>classList的使用</title>
	<style>
	.bg{background:#ccc;}
	.strong{font-size:24px;color:red;}
	.smooth{height:30px;width:120px;border-radius:10px;}
	</style>
	
	
	

• PHP
• JavaScript
• C++
• Java

<script> // 获取第2个li元素 var ele = document.getElementsByTagName(&#39;li&#39;)[1]; // 若li元素中没有strong类，则添加 if (!ele.classList.contains(&#39;strong&#39;)) { ele.classList.add(&#39;strong&#39;); } // 若li元素中没有smooth类，则添加；若有删除 ele.classList.toggle(&#39;smooth&#39;); console.log(&#39;添加与切换样式后：&#39;); console.log(ele); </script> <script> ele.classList.remove(&#39;bg&#39;); console.log(&#39;删除后：&#39;); console.log(ele); </script> 또한 classList 속성은 다음에 대한 많은 메서드와 속성도 제공합니다. 기타 관련 작업.

5. [사례] ​​탭바 전환 효과

코드 구현 아이디어

:

① HTML을 작성하여 탭의 구조와 스타일 디자인 구현 bar, 여기서 class = current는 현재 표시된 레이블을 나타내며 기본값은 첫 번째 레이블입니다.
② 모든 태그와 태그에 해당하는 표시 콘텐츠를 가져옵니다.
③ 각 라벨에 대한 마우스 롤오버 이벤트를 순회하여 추가합니다. 이벤트 핸들러에서 라벨에 해당하는 모든 표시 내용을 순회하며, classList의 add() 메서드를 통해 current를 추가합니다. 그렇지 않으면 Remove() 메소드를 통해 현재를 제거하십시오.

• 
  

코드 구현

	nbsp;html>
	
	
	<meta>
	<title>标签栏切换效果</title>
	<style>
	.tab-box{width:383px;margin:10px;border:1px solid #ccc;border-top:2px solid #206F96;}
	.tab-head{height:31px;}
	.tab-head-p{width:95px;height:30px;float:left;border-bottom:1px solid #ccc;border-right:1px solid #ccc;background:#206F96;line-height:30px;text-align:center;cursor:pointer;color:#fff;}
	.tab-head .current{background:#fff;border-bottom:1px solid #fff;color:#000;}
	.tab-head-r{border-right:0;}
	.tab-body-p{display:none;margin:20px 10px;}
	.tab-body .current{display:block;}
	</style>
	
	
	<p>
	</p><p>
	</p><p>标签一</p>
	<p>标签二</p>
	<p>标签三</p>
	<p>标签四</p>
	

 1 

 2 

 3 

 4 

<script> // 获取标签栏的所有标签元素对象 var tabs = document.getElementsByClassName(&#39;tab-head-p&#39;); // 获取标签栏的所有内容对象 var ps = document.getElementsByClassName(&#39;tab-body-p&#39;); for (var i = 0; i < tabs.length; ++i) { // 遍历标签部分的元素对象 tabs[i].onmouseover = function() { // 为标签元素对象添加鼠标滑过事件 for (var i = 0; i < ps.length; ++i) { // 遍历标签栏的内容元素对象 if (tabs[i] == this) { // 显示当前鼠标滑过的li元素 ps[i].classList.add(&#39;current&#39;); tabs[i].classList.add(&#39;current&#39;); } else { // 隐藏其他li元素 ps[i].classList.remove(&#39;current&#39;); tabs[i].classList.remove(&#39;current&#39;); } } }; } </script>

相关推荐：javascript教程

위 내용은 JavaScript 예제를 사용한 HTML 요소 작업에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!