JavaScript DOM 요소를 추가, 삭제 및 수정하는 단계에 대한 자세한 설명

이번에는 JavaScript를 사용하여 DOM 요소를 추가, 삭제, 수정하는 단계에 대해 자세히 설명합니다. JavaScript에서 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>


<p>修改样式测试</p>
<input>
<input>

<script>
  var p1 = document.getElementById("p1");
  function style1(){
    p1.className = "style1"
  }
  function style2(){
    p1.className = "style2"
  }
</script>

위 내용은 JavaScript DOM 요소를 추가, 삭제 및 수정하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!