집 > 기사 > 웹 프론트엔드 > JavaScript DOM 요소를 추가, 삭제 및 수정하는 단계에 대한 자세한 설명

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

php中世界最好的语言원래의: 2018-05-22 14:32:461341검색

이번에는 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>
</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中文网其它相关文章！
推荐阅读：

node Async/Await 异步编程实现详解

JS Promise案例代码解析

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

성명：

이전 기사：Ajax 3단계 연계 구현 코드다음 기사：Ajax 3단계 연계 구현 코드