>  기사  >  웹 프론트엔드  >  Original JS는 추가, 삭제, 수정, 확인 및 삽입을 구현합니다.

Original JS는 추가, 삭제, 수정, 확인 및 삽입을 구현합니다.

一个新手
一个新手원래의
2017-09-21 09:35:381820검색

1. 추가

创建元素节点 :document.createElement(“p”); 
创建text节点 :document.createTextNodet(“内容”); 
复制一个节点: var newNode = node.cloneNode();//参数为true复制所有子节点,参数为false只执行一次浅复制。

2. 삭제

removeChild();//该方法不是在待删除的节点上调用,而是在它的父元素节点上调用。 
node.parentElement.removeChild(node); 
replaceChild();//删除一个子节点,并用一个新的节点取代它。第一个参数是新节点,第二个参数是要删除的节点。 
node.parentElement.replaceChild(newNode,node);

3. 수정

노드 속성content을 수정해야 하는 경우가 많습니다.
속성 수정
속성은 표준 HTML 속성과 비표준 HTML 속성으로 구분됩니다.
* HTML 속성을 요소의 속성으로
HTML 요소는 id, title lang, dir 속성과 같은 일반적인 HTTP 속성과 이벤트 핸들러 속성(onclick)을 정의합니다. 특정 요소 하위 유형에는 img의 src 속성과 같은 특정 속성도 있습니다.

var oImg = document.getElementById("img1");oImg.id = "newID";oImg.className = "className";oImg.src = "...";

비표준 HTML 속성 가져오기 및 설정
Element는 비표준 속성을 쿼리하고 설정하기 위한 getAttribute 및 setAttribute 메소드를 정의하고, 명명된 속성이 존재하는지 감지하고 속성을 완전히 제거하기 위해 hasAttribute 및 RemoveAttribute를 정의합니다.

콘텐츠 수정
innerHTML: 태그가 포함된 콘텐츠
innerText(Firefox에서는 지원되지 않음): 일반 텍스트의 요소 콘텐츠
textContent(IE에서는 지원되지 않음): 일반 텍스트의 요소 콘텐츠

4.

  • 한 번에 찾기

  • document.getElementById()   返回对拥有指定 id 的第一个对象的引用。 
    document. getElementsByClassName()  返回文档中所有指定类名的元素集合。 
    document.getElementsByName()    返回带有指定名称的对象集合。 
    document.getElementsByTagName() 返回带有指定标签名的对象集合。
  • 아버지, 아들, 형제 찾기

  • 对于一个Node节点,包含很多种,像:Document节点、Text节点、Comment节点、Element节点,我们常常需要获得的是元素节点,忽略掉Text和Comment节点: 
    firstElementChild,lastElementChild; 
    children   => 数组类型:children[0] ,第一个子节点 
    nextElementSibling,previousElementSibling => 兄弟节点 
    parentElement => 父亲节点
5.

위 내용은 Original JS는 추가, 삭제, 수정, 확인 및 삽입을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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