JS DOM 요소의 일반적인 추가, 삭제, 수정 및 쿼리 작업에 대한 자세한 설명
이번에는 JS DOM 요소의 일반적인 추가, 삭제, 수정 및 검색 작업에 대해 자세히 설명하겠습니다. JS DOM 요소의 일반적인 추가, 삭제, 수정 및 검색 작업에 대한 주의 사항은 다음과 같습니다. , 살펴 보겠습니다.
DOM 개념
DOM(문서 개체 모델): 문서 개체 모델.
개발자 도구의 요소 탭을 통해 볼 수 있습니다
개발자 도구의 소스 탭을 통해서도 전체 문서가 일련의 노드로 구성되어 있음을 확인할 수 있습니다
전체 문서는 일련의 노드로 구성된 트리입니다. 노드 개체.
노드(Node)에는 요소 노드(1), 속성 노드(2), 텍스트 노드(3)가 포함됩니다(1..2..3..은 노드 유형을 나타냄)_
var th1= document.getElementById("th1");
alert(th1.nodeType);
alert(th1.nodeName);
alert(th1.nodeValue);th1은 요소 노드(nodeType)를 나타냅니다. = 1), nodeName은 태그 이름(th)이고, nodeValue=null은 요소 노드입니다.
var attr1=th1.getAttributeNode("name");
alert(attr1.nodeType);
alert(attr1.nodeName);
alert(attr1.nodeValue);getAttributeNode 메소드는 요소의 속성 노드를 가져오는 것입니다. 이때 노드 유형 출력은 속성 노드(2), 노드 이름은 속성 이름(name), 노드 값은 속성 값입니다. (sex)
var txtl = th1.firstChild； alert(txtl.nodeType); alert(txtl.nodeName); alert(txtl.nodeValue)
txt1은 텍스트 노드(3)이고 노드 이름은 #text로 고정되며 노드 값은 텍스트 콘텐츠입니다.
Get element
(1)getElementByid
요소의 id 속성을 기반으로 요소를 가져오고, 얻는 것은 요소입니다.
태그 이름을 기반으로 요소를 가져오면 결과는 요소 모음입니다.
(3)getElementsByClassName
class 속성을 기반으로 요소를 가져오면 결과는 요소 모음입니다.
(4)getElementsByName
name 속성을 기반으로 요소를 가져오면 결과는 요소 모음입니다.
요약: 요소는 태그 이름을 기반으로 하거나 ID, 이름 및 클래스 속성을 기반으로 얻을 수 있습니다. id 속성을 기반으로 얻은 결과는 요소이고 다른 결과는 컬렉션입니다.
문서 개체는 위의 네 가지 유형을 지원하는 반면 요소 개체는 getElementsByTagName 및 getElementsByClassName만 지원합니다. getElementsByTagName和getElementsByClassName。
修改元素
（1）修改内容
function fun(){
//获取到指定元素
var p1 = document.getElementById("p1");
p1.innerText = "我被单击了！";
}通过.innerText属性可读取或设置标签的内容文本
function fun(){
//获取到指定元素
var p1 = document.getElementById("p1");
p1.innerHTML = "我被单击了！<br>换行了";
}也可以通过innerHTML属性获取或设置内容文本
俩者的区别：innerHTML会按照HTML规则解析文本，而innerText只是当做普通文本内容。
（1） 修改样式
A．xxx．style.属性名=“值”
B．xxx．classname=“…”(相当于修改了class的属性)
<style>
.style1{
color:red;
font-size:20px;
text-decoration:underline;
}
.style2{
color:blue;
font-size:32px;
text-decoration:line-through;
}
</style>
</head>
<body>
<p id="p1">修改样式测试</p>
<input type="button"value="样式一"onclick="style1()">
<input type="button"value="样式二"onclick="style2()">
</body>
<script>
var p1 = document.getElementById("p1");
function style1(){
p1.className = "style1"
}
function style2(){
p1.className = "style2"
}
</script>
</html>添加删除元素
（1）CreateElement建一个元素节点
CreateElement("p")创建一个段落
（2）createTextNode创建一个文本节点
createTextNode("文本内容")，创建一个值为“文本内容”的文本节点.
（3）appendChild添加子节点
（4）removeChild 删除子节点
动态添加
<body>
<p id="p1">
</p>
<input type="button"value="添加段落"onclick="add()">
</body>
<script>
//全局变量
var index = 1;
function add(){
//创建一个段落标签
var p = document.createElement("p");
//创建文本节点
var content= "第"+index+"段落";
var txt = document.createTextNode(content);
//创建文本节点添加的段落
p.appendChild(txt);
//将段落添加到p中
var p1 = document.getElementById("p1");
p1.appendChild(p);
index++
}
</script>动态删除
<body>
<p id="p1">
<p id="p1">第1段落 </p>
<p id="p2">第2段落 </p>
<p id="p3">第3段落 </p>
<p id="p4">第4段落 </p>
</p>
<input type="button"value="删除第二段"onclick="del()">
</body>
<script>
function del(){
//先找到父节点
var p1 = document.getElementById("p1");
//再找到要删除的节点
var p2 = document.getElementById("p2");
//将要删除的节点从父节点中移除
p1.removeChild(p2);
}
</script>
</html>这种方法是分别找到父节点和要删除的节点，然后执行删除操作。该方法的一个前提是知道父节点是谁
那么如果并不知道父节点是谁，该如何删除呢
p2.parentNode.removeChild(p2);
요소 수정
(1) 콘텐츠 수정
function del(){
var p1 = document.getElementById("p1");
var paras = p1.getElementsByTagName("p");
for(var i in paras){
if((i+1)%2 == 1){
p1.removeChild(paras[i]);
}
}
}<body>
<p id="p1">
</p>
<input type="button" value="添加段落" onclick="add()">
<input type="button" value="删除奇数第二段" onclick="de1()">
</body>
<script>
var index = 1;
function add(){
//创建一个段落标签
var p = document.createElement("p");
//创建文本节点
var content = "第" + index + "段落";
var txt = document.createTextNode(content);
//将文本节点添加到段落
p.appendChild(txt);
if (index % 2 == 1) {
p.setAttribute("class","odd");
}
//将段落添加到p中
var p1 = document.getElementById("p1");
p1.appendChild(p);
index++;
}
/*function de1(){
var p1 = document.getElementById("p1");
var paras =p1.getElementsByTagName("p");
for(var i in paras){
if((i+1)%2 == 1){
p1.removeChild(paras[i]);
}
}
}*/
functionde1() {
var p1 = document.getElementById("p1");
var paras = p1.getElementsByClassName("odd");
// varparas = document.getElementsByName("odd");
for (var i = paras.length - 1; i >= 0; i--) {
p1.removeChild(paras[i]);
}
}
</script>
</html></head>
<body>
<p name="第一章">
<p id="p1">第一段<span>第一句</span><span>第二句</span></p>
</p>
<input type="button"value="获取父节点的name属性"onclick="fun1()">
<input type="button"value="显示p1子节点的个数"onclick="fun2()">
<input type="button"value="显示p1第一个子节点的类型"onclick="fun3()">
<input type="button"value="显示p1最后一个子节点的类型"onclick="fun4()">
</body>
<script>
var p1 =document.getElementById("p1");
function fun1(){
var value=p1.parentNode.getAttribute("name");
alert(value);
}
function fun2(){
var chlids = p1.childNodes;
alert(chlids.length)
}
function fun3(){
alert(p1.firstChild.nodeType);
}
function fun4(){
alert(p1.lastChild.nodeType);
}
</script>
</html>CreateElement("p") code>문단 만들기🎜🎜(2)🎜createTextNode🎜텍스트 노드 만들기🎜🎜createTextNode("text content"), 값이 "text content"인 텍스트 노드를 만듭니다.🎜🎜(3 )🎜appendChild 🎜자식 노드 추가🎜🎜(4)🎜removeChild 🎜자식 노드 삭제🎜🎜🎜동적 추가🎜🎜rrreee🎜🎜동적 삭제🎜🎜rrreee🎜각각 부모 노드와 삭제할 노드를 찾는 방법이며, 그런 다음 삭제 작업을 수행합니다. 이 방법의 전제 조건은 상위 노드가 누구인지 아는 것입니다. 따라서 상위 노드가 누구인지 모르는 경우 어떻게 삭제합니까? 상위 노드가 누구인지 알 필요가 없습니다. 🎜🎜🎜동적 추가 및 삭제: 🎜🎜 🎜동적 추가 및 동적 삭제, 동적으로 추가된 이상한 단락 삭제🎜思路1：获取p1 下的所以段落，遍历所以的段落，将序号为奇数的段落删除。
function del(){
var p1 = document.getElementById("p1");
var paras = p1.getElementsByTagName("p");
for(var i in paras){
if((i+1)%2 == 1){
p1.removeChild(paras[i]);
}
}
}로그인 후 복사로그인 후 복사
这种在初始时是可以的,但是随着动态添加或删除的进行，后面的结果就不对了。因为动态删除操作就影响了原来的顺序，而程序是按照序号去判断奇偶性，所以出现误判
思路2：添加通过设置class属性，然后通过getElementsByclassName来获取奇数行
（也可以从后往前删）
<body>
<p id="p1">
</p>
<input type="button" value="添加段落" onclick="add()">
<input type="button" value="删除奇数第二段" onclick="de1()">
</body>
<script>
var index = 1;
function add(){
//创建一个段落标签
var p = document.createElement("p");
//创建文本节点
var content = "第" + index + "段落";
var txt = document.createTextNode(content);
//将文本节点添加到段落
p.appendChild(txt);
if (index % 2 == 1) {
p.setAttribute("class","odd");
}
//将段落添加到p中
var p1 = document.getElementById("p1");
p1.appendChild(p);
index++;
}
/*function de1(){
var p1 = document.getElementById("p1");
var paras =p1.getElementsByTagName("p");
for(var i in paras){
if((i+1)%2 == 1){
p1.removeChild(paras[i]);
}
}
}*/
functionde1() {
var p1 = document.getElementById("p1");
var paras = p1.getElementsByClassName("odd");
// varparas = document.getElementsByName("odd");
for (var i = paras.length - 1; i >= 0; i--) {
p1.removeChild(paras[i]);
}
}
</script>
</html>로그인 후 복사로그인 후 복사
导航
Document：是根节点
ParentNode：获取父节点
childNodes：获取所有子节点
firstChild：第一个子节点
lastChlid：获取最后一个子节点
</head>
<body>
<p name="第一章">
<p id="p1">第一段<span>第一句</span><span>第二句</span></p>
</p>
<input type="button"value="获取父节点的name属性"onclick="fun1()">
<input type="button"value="显示p1子节点的个数"onclick="fun2()">
<input type="button"value="显示p1第一个子节点的类型"onclick="fun3()">
<input type="button"value="显示p1最后一个子节点的类型"onclick="fun4()">
</body>
<script>
var p1 =document.getElementById("p1");
function fun1(){
var value=p1.parentNode.getAttribute("name");
alert(value);
}
function fun2(){
var chlids = p1.childNodes;
alert(chlids.length)
}
function fun3(){
alert(p1.firstChild.nodeType);
}
function fun4(){
alert(p1.lastChild.nodeType);
}
</script>
</html>로그인 후 복사로그인 후 복사
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
위 내용은 JS DOM 요소의 일반적인 추가, 삭제, 수정 및 쿼리 작업에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7509
15
1378
52
78
11
52
19
19
60
PyCharm 사용 튜토리얼: 작업 실행에 대해 자세히 안내합니다.
Feb 26, 2024 pm 05:51 PM
PyCharm은 매우 인기 있는 Python 통합 개발 환경(IDE)으로 Python 개발을 더욱 효율적이고 편리하게 만들어주는 다양한 기능과 도구를 제공합니다. 이 기사에서는 PyCharm의 기본 작동 방법을 소개하고 독자가 도구 작동을 빠르게 시작하고 능숙하게 사용할 수 있도록 구체적인 코드 예제를 제공합니다. 1. PyCharm 다운로드 및 설치 먼저 PyCharm 공식 웹사이트(https://www.jetbrains.com/pyc)로 이동해야 합니다.
Win11에서 관리자 권한을 얻는 방법에 대한 자세한 설명
Mar 08, 2024 pm 03:06 PM
Windows 운영 체제는 세계에서 가장 인기 있는 운영 체제 중 하나이며, 새로운 버전의 Win11이 많은 주목을 받았습니다. Win11 시스템에서 관리자 권한을 얻는 것은 사용자가 시스템에서 더 많은 작업과 설정을 수행할 수 있도록 하는 중요한 작업입니다. 이번 글에서는 Win11 시스템에서 관리자 권한을 얻는 방법과 권한을 효과적으로 관리하는 방법을 자세히 소개하겠습니다. Win11 시스템에서 관리자 권한은 로컬 관리자와 도메인 관리자의 두 가지 유형으로 나뉩니다. 로컬 관리자는 로컬 컴퓨터에 대한 모든 관리 권한을 갖습니다.
Oracle SQL의 나누기 연산에 대한 자세한 설명
Mar 10, 2024 am 09:51 AM
OracleSQL의 나눗셈 연산에 대한 자세한 설명 OracleSQL에서 나눗셈 연산은 두 숫자를 나눈 결과를 계산하는 데 사용되는 일반적이고 중요한 수학 연산입니다. 나누기는 데이터베이스 쿼리에 자주 사용되므로 OracleSQL에서 나누기 작업과 사용법을 이해하는 것은 데이터베이스 개발자에게 필수적인 기술 중 하나입니다. 이 기사에서는 OracleSQL의 나누기 작업 관련 지식을 자세히 설명하고 독자가 참고할 수 있는 특정 코드 예제를 제공합니다. 1. OracleSQL의 Division 연산
Linux Deploy 작업 단계 및 주의사항
Mar 14, 2024 pm 03:03 PM
LinuxDeploy 작업 단계 및 주의 사항 LinuxDeploy는 사용자가 Android 장치에 다양한 Linux 배포판을 신속하게 배포하여 모바일 장치에서 완전한 Linux 시스템을 경험할 수 있도록 도와주는 강력한 도구입니다. 이 기사에서는 LinuxDeploy의 작동 단계와 주의 사항을 자세히 소개하고 독자가 이 도구를 더 잘 사용할 수 있도록 구체적인 코드 예제를 제공합니다. 작업 단계: Linux 설치배포: 먼저 설치
win10 부팅 암호를 얻기 위해 F2 키를 누르는 것을 잊은 경우 수행할 작업
Feb 28, 2024 am 08:31 AM
아마도 많은 사용자들이 집에 사용하지 않는 컴퓨터가 여러 대 있고, 오랫동안 사용하지 않았기 때문에 시동 암호를 완전히 잊어버렸기 때문에 암호를 잊어버린 경우 어떻게 해야 하는지 알고 싶습니까? 그럼 함께 살펴볼까요? win10 부팅 암호를 입력하는 데 F2 키를 잊어버린 경우 어떻게 해야 합니까? 1. 컴퓨터의 전원 버튼을 누른 다음 컴퓨터를 켤 때 F2 키를 누릅니다(컴퓨터 브랜드마다 BIOS에 들어가는 버튼이 다릅니다). 2. BIOS 인터페이스에서 보안 옵션을 찾으세요(컴퓨터 브랜드에 따라 위치가 다를 수 있음). 일반적으로 상단의 설정 메뉴에 있습니다. 3. 그런 다음 SupervisorPassword 옵션을 찾아 클릭합니다. 4. 이때 사용자는 자신의 비밀번호를 볼 수 있으며 동시에 옆에 있는 활성화를 찾아 Dis로 전환합니다.
Huawei Mate60 Pro 스크린샷 작업 단계 공유
Mar 23, 2024 am 11:15 AM
스마트폰이 대중화되면서 스크린샷 기능은 일상적인 휴대폰 사용에 필수적인 기술 중 하나로 자리 잡았습니다. Huawei의 주력 휴대폰 중 하나인 Huawei Mate60Pro의 스크린샷 기능은 자연스럽게 사용자로부터 많은 관심을 끌었습니다. 오늘은 모두가 더욱 편리하게 스크린샷을 찍을 수 있도록 Huawei Mate60Pro 휴대폰의 스크린샷 작업 단계를 공유하겠습니다. 우선, Huawei Mate60Pro 휴대폰은 다양한 스크린샷 방법을 제공하며, 개인 습관에 따라 자신에게 맞는 방법을 선택할 수 있습니다. 다음은 일반적으로 사용되는 몇 가지 차단에 대한 자세한 소개입니다.
PHP 모듈로 연산자의 역할과 사용법에 대한 자세한 설명
Mar 19, 2024 pm 04:33 PM
PHP의 모듈로 연산자(%)는 두 숫자를 나눈 나머지를 구하는 데 사용됩니다. 이 글에서는 모듈로 연산자의 역할과 사용법을 자세히 논의하고 독자의 이해를 돕기 위해 구체적인 코드 예제를 제공합니다. 1. 모듈로 연산자의 역할 수학에서는 정수를 다른 정수로 나누면 몫과 나머지가 나옵니다. 예를 들어 10을 3으로 나누면 몫은 3이고 나머지는 1입니다. 이 나머지를 얻기 위해 모듈로 연산자가 사용됩니다. 2. 모듈러스 연산자의 사용법 PHP에서는 모듈러스를 나타내기 위해 % 기호를 사용합니다.
Ele.me에서 WeChat을 연결하는 방법
Apr 01, 2024 pm 03:46 PM
Ele.me는 다양한 종류의 음식을 온라인으로 선택하고 주문할 수 있는 소프트웨어입니다. 판매자는 주문을 받은 후 즉시 주문을 처리합니다. 사용자는 소프트웨어를 통해 WeChat을 연결할 수 있습니다. 작동 방법을 알아보려면 PHP 중국어 웹사이트를 확인하세요. Ele.me를 WeChat에 바인딩하는 방법: 1. 먼저 Ele.me 소프트웨어를 열고 홈페이지에 들어간 후 오른쪽 하단에 있는 [내]를 클릭합니다. 2. 그런 다음 내 페이지에서 [계정]을 클릭합니다. ] 왼쪽 상단에 있는 3. 그런 다음 휴대폰, WeChat, Alipay 및 Taobao를 연결할 수 있는 개인 정보 페이지로 이동합니다. 4. 마지막 클릭 후 필요한 WeChat 계정을 선택합니다. WeChat 인증 페이지에 접속하고 [허용]을 클릭하세요.
