JS DOM 요소의 일반적인 추가, 삭제, 수정 및 쿼리 작업에 대한 자세한 설명-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JS DOM 요소의 일반적인 추가, 삭제, 수정 및 쿼리 작업에 대한 자세한 설명

php中世界最好的语言

May 11, 2018 pm 03:24 PM

javascript 작동하다 상해

이번에는 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 속성을 기반으로 요소를 가져오고, 얻는 것은 요소입니다.

(2)getElementsByTagName

태그 이름을 기반으로 요소를 가져오면 결과는 요소 모음입니다.

(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]);
    }
  }
}

로그인 후 복사

.innerText 속성을 통해 라벨의 콘텐츠 텍스트를 읽거나 설정할 수 있습니다

<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>

로그인 후 복사

innerHTML 속성 🎜 콘텐츠 텍스트 가져오기 또는 설정 🎜🎜 둘 사이의 차이점: innerHTML은 HTML 규칙에 따라 텍스트를 구문 분석하는 반면 innerText는 HTML 규칙에 따라 텍스트를 구문 분석합니다. 일반 텍스트 콘텐츠. 🎜🎜(1) 스타일 수정🎜🎜A． 트리플 엑스. style.속성 이름 = "값"🎜🎜B. 트리플 엑스. classname="..." (클래스 속성 수정과 동일)🎜

</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>

로그인 후 복사

🎜🎜요소 추가 및 삭제🎜🎜🎜(1)🎜CreateElement🎜요소 노드 생성🎜🎜

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保留一位数字后移除非数字

node puppeteer实现网站登录步骤详解（附代码）

위 내용은 JS DOM 요소의 일반적인 추가, 삭제, 수정 및 쿼리 작업에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7325

자바 튜토리얼

1625

Cakephp 튜토리얼

1350

라라벨 튜토리얼

1262

PHP 튜토리얼

1209

Related knowledge

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에서는 모듈러스를 나타내기 위해 % 기호를 사용합니다.

Discuz 도메인 이름 수정 작업 가이드 Mar 09, 2024 pm 04:36 PM

Discuz 도메인 이름 수정 운영 가이드 Discuz 포럼 시스템을 사용하는 과정에서 포럼의 도메인 이름을 수정해야 하는 경우가 있습니다. 도메인 이름을 변경해야 하거나 일부 도메인 이름 확인 문제를 해결해야 하기 때문일 수 있습니다. 이 글에서는 Discuz 포럼 시스템에서 도메인 이름을 수정하는 방법을 자세히 소개하고 몇 가지 구체적인 코드 예제를 제공합니다. 1. 데이터 백업 작업을 수행하기 전에 작업 오류로 인한 데이터 손실을 방지하기 위해 데이터를 백업해야 합니다. Discuz에서는 백그라운드 데이터 백업을 사용할 수 있습니다

See all articles

JS DOM 요소의 일반적인 추가, 삭제, 수정 및 쿼리 작업에 대한 자세한 설명

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제