자바스크립트에서 노드를 생성하는 방법은 무엇입니까?-프런트엔드 Q&A-php.cn

자바스크립트에서 노드를 생성하는 방법은 무엇입니까?

青灯夜游

풀어 주다： 2021-10-13 17:00:45

원래의

14999명이 탐색했습니다.

JavaScript에서 노드를 생성하는 방법: 1. createElement() 메서드는 요소 노드를 생성할 수 있습니다. 2. createTextNode() 메서드는 텍스트 노드를 생성할 수 있습니다. 3. createAttribute() 메서드는 속성 노드를 생성할 수 있습니다.

자바스크립트에서 노드를 생성하는 방법은 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

javascript에서 노드를 생성하는 방법

1.createElement() 메소드: 요소 노드 생성

문서 객체의 createElement() 메소드를 사용하여 지정된 라벨 이름을 기반으로 새 요소 노드를 생성합니다. 매개변수로 새로 생성된 요소에 대한 참조를 반환합니다. 사용법은 다음과 같습니다.

var element = document.getElement("tagName");

로그인 후 복사

그 중 element는 새 요소의 참조를 나타내며 createElement()는 문서 객체의 태그 이름을 지정하는 데 사용되는 매개 변수가 하나만 있습니다. 생성된 요소입니다.

【예제 1】다음 코드는 현재 문서에 단락 기호 p를 생성하여 변수 p에 저장합니다. 이 변수는 요소 노드를 나타내기 때문에 nodeType 속성 값은 1이고 nodeName 속성 값은 p와 같습니다.

var p = document.createElement("p");  //创建段落元素
var info = "nodeName:" + p.nodeName;  //获取元素名称
info += ", nodeType:" + p.nodeType;  //获取元素类型，如果为1则表示元素节点
console.log(info);

로그인 후 복사

createElement() 메서드를 사용하여 생성된 새 요소는 문서에 자동으로 추가되지 않습니다. 이 요소를 문서에 추가하려면appendChild(), insertBefore() 또는 replacementChild() 메서드도 사용해야 합니다.

【예제 2】 새로 생성된 p 요소를 body 요소에 추가하는 코드는 다음과 같습니다. 문서 트리에 요소가 추가되면 즉시 표시됩니다.

var p = document.createElement("p");  //创建段落元素
document.body.appendChild(p);  //增加段落元素到body元素下

로그인 후 복사

2. createTextNode() 메서드: 텍스트 노드 만들기

문서 개체의 createTextNode() 메서드를 사용하여 텍스트 노드를 만듭니다. 사용법은 다음과 같습니다.

document.createTextNode(data)

로그인 후 복사

매개변수 데이터는 문자열을 나타냅니다.

예제

다음 예에서는 새 div 요소를 만들고 해당 클래스 값을 빨간색으로 설정한 다음 문서에 추가합니다.

var element = document.createElement("div");
element.className = "red";
document.body.appendChild(element);

로그인 후 복사

DOM 작업 및 기타 이유로 인해 텍스트 노드에 텍스트가 포함되지 않거나 두 개의 텍스트 노드가 연속해서 나타날 수 있습니다. 이러한 상황을 피하기 위해 일반적으로 부모 요소에서 Normalize() 메서드를 호출하여 빈 텍스트 노드를 삭제하고 인접한 텍스트 노드를 병합합니다.

3.createAttribute() 메소드: 속성 노드 생성

문서 객체의 createAttribute() 메소드를 사용하여 속성 노드를 생성합니다.

document.createAttribute(name)

로그인 후 복사

매개변수 이름은 새로 생성되는 이름을 나타냅니다. 생성된 속성입니다.

예제 1

다음 예에서는 이름이 align 및 value center인 속성 노드를 생성한 다음

레이블에 대해 속성 align을 설정하고 마지막으로 3가지 메서드를 사용하여 값을 읽습니다. 속성 정렬 .

<div id="box">document.createAttribute(name)</div>
<script>
    var element = document.getElementById("box");
    var attr = document.createAttribute("align");
    attr.value = "center";
    element.setAttributeNode(attr);
    console.log(element.attributes["align"].value);  //"center"
    console.log(element.getAttributeNode("align").value);  //"center"
    console.log(element.getAttribute("align"));  //"center"
</script>

로그인 후 복사

속성 노드는 일반적으로 요소의 헤드 태그에 위치합니다. 요소의 속성 목록에는 요소 정보가 미리 로드되어 연관 배열에 저장됩니다. 예를 들어 다음 HTML 구조를 살펴보겠습니다.

<div id="div1" title="div"></div>

로그인 후 복사

DOM이 로드되면 HTML div 요소를 나타내는 divElement 변수는 이러한 속성을 이름-값 쌍으로 검색하는 관련 컬렉션을 자동으로 생성합니다.

divElement.attributes = {
    id : "div1",
    class : "style1",
    lang : "en",
    title : "div"
}

로그인 후 복사

기존 DOM에서는 img.src, a.href 등과 같은 요소를 통해 HTML 속성에 직접 액세스하는 데 일반적으로 도트 구문이 사용됩니다. 이 방법은 표준은 아니지만 모든 브라우저에서 지원됩니다.

예제 2

img 요소에는 src 속성이 있으며, 모든 이미지 개체에는 HTML src 속성과 연결된 src 스크립트 속성이 있습니다. 아래 두 가지 사용법은 서로 다른 브라우저에서 잘 작동합니다.

<img id="img1" src="" />
<script>
    var img = document.getElementById("img1");
    img.setAttribute("src", "http://www.w3.org");  //HTML 属性
    img.src = "http://www.w3.org";  //JavaScript 属性
</script>

로그인 후 복사

유사한 것에는 onclick, 스타일, href 등이 포함됩니다. JavaScript 스크립트가 다양한 브라우저에서 잘 작동할 수 있도록 하려면 표준 사용법을 채택하는 것이 좋습니다. 많은 HTML 속성은 JavaScript로 매핑되지 않으므로 스크립트 속성을 통해 직접 읽고 쓸 수 없습니다.

【추천 학습: javascript 고급 튜토리얼】

위 내용은 자바스크립트에서 노드를 생성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!