JavaScript 문서 객체 모델-요소 유형

문서 유형 외에도 요소 유형은 JavaScript 프로그래밍에서 가장 일반적으로 사용되는 유형입니다. 요소 유형은 HTML 또는 XML 요소를 나타내는 데 자주 사용되며 요소 태그 이름, 하위 노드 및 속성에 대한 액세스를 제공합니다. 요소 노드에는 다음과 같은 특징이 있습니다.

nodeType의 값은 1입니다.

nodeName의 값은 요소의 태그 이름입니다.

nodeValue 값이 null입니다.

parentNode의 값은 Document 또는 Element일 수 있습니다.

해당 하위 노드는 Element, Text, Comment, ProcessInstruction, CDATASection 또는 EntityReference일 수 있습니다.

요소의 태그 이름에 액세스하려면 nodeName 속성 또는 tagName 속성을 사용할 수 있습니다. 이 두 속성은 다음 예와 같이 동일한 값을 반환합니다.

<div id="myDiv"></div>

는 다음과 같이 얻습니다. 이 요소의 태그 이름:

var div = document.getElementById("myDiv");
console.info(div.tagName);                 //输出“DIV”
console.info(div.tagName == div.nodeName); //true

HTML에서 태그는 항상 대문자로 표현되므로 div.tagName은 대문자 "DIV"를 출력합니다. XML(XHTML 포함)에서 태그 이름은 소스 코드의 태그와 일치합니다. 따라서 요소들의 태그명이 일치하는지 비교할 때에는 소문자로 변환한 후 비교하는 것이 가장 좋습니다.

//错误的写法
if(element.tagName == "div"){
   
}
//正确的写法
if(element.tagName.toLowerCase() == "div"){
   
}

HTML 요소

모든 HTML 요소는 HTMLElement 유형(이 유형 또는 해당 하위 유형)으로 표시됩니다. HTMLElement 유형은 Element 유형에서 직접 상속되며 일부 속성을 추가합니다. 이러한 추가된 속성은 모든 HTML 요소에 존재하는 일련의 속성에 해당합니다.

• id는 문서에 있는 요소의 고유 식별자입니다.

• 제목, 요소에 대한 추가 설명 정보, 일반적으로 도구 설명 표시줄을 통해 표시됩니다.

• lang, 요소 콘텐츠의 언어입니다.

• dir, 언어 방향, 값은 "ltr"(왼쪽에서 오른쪽으로 표시) 또는 "rtl"(오른쪽에서 왼쪽으로 표시)입니다.

• classname은 요소에 지정된 CSS 클래스인 요소의 클래스 속성에 해당합니다.

위 속성을 사용하여 해당 특성 값을 얻거나 수정할 수 있습니다. 예를 들어, 다음 예에서는

<div id="myDiv" title="jQuery之家" dir="ltr">jQuery之家</div>

위의 속성 값을 콘솔에 출력할 수 있습니다.

var div = document.getElementById("myDiv");
console.info(div.id);
console.info(div.className);
console.info(div.title);
console.info(div.lang);
console.info(div.dir);

이러한 속성을 사용하려면 다음과 같이 작동할 수 있습니다.

div.id = "otherId";
div.className = "otherClass";
div.title = "otherTitle";
div.lang = "en";
div.dir = "rtl";

속성 가져오기

각 요소에는 하나 이상의 속성이 있습니다. 즉,

과 같은 세 가지 DOM 메소드가 있습니다.

• getAttribute()

• setAttribute()

• removeAttribute()

위 방법은 모든 속성에 사용할 수 있습니다. 예:

var div = document.getElementById("myDiv");
console.info(div.getAttribute("id"));
console.info(div.getAttribute("class"));
console.info(div.getAttribute("title"));
console.info(div.getAttribute("lang"));
console.info(div.getAttribute("dir"));

사용자 정의된 속성(즉, 표준 HTML 언어에서 찾을 수 없는 속성 이름)은 다음을 통해 얻을 수도 있습니다. getAttribute() 메소드(예:

<div id="myDiv" my-attribute="hello">自定义属性</div>

다른 속성과 마찬가지로 이 사용자 정의 속성의 값을 가져올 수 있습니다.)

var div = document.getElementById("myDiv");
console.info(div.getAttribute("my-attribute"));   //hello

팁: 속성 이름은 대소문자를 구분하지 않습니다. 즉, "ID"와 "id"는 동일한 속성을 나타냅니다.

에는 두 가지 특수 속성이 있습니다. 해당 속성 이름이 있지만 속성 값은 getAttribute()를 통해 얻은 값과 동일하지 않습니다. 첫 번째 속성은 CSS를 통해 요소의 스타일을 지정하는 데 사용되는 스타일 속성입니다. getAttribute()를 통해 액세스할 때 반환되는 스타일 속성 값은 포함된 CSS 텍스트가 아니라 객체입니다. 두 번째는 onclick과 같은 이벤트 핸들러입니다. 요소에 사용되는 경우 onclick에는 JavaScript 코드가 포함됩니다. getAttribute()를 통해 액세스하면 JavaScript 함수가 반환됩니다.

속성 설정

getAttribute()에 해당하는 것은 setAttribute() 메서드로, 설정할 속성의 이름과 값이라는 두 개의 매개변수를 받습니다. 설정할 속성이 이미 존재하는 경우 setAttribute() 메소드는 기존 값을 지정된 값으로 대체합니다. 속성이 존재하지 않으면 setAttribute() 메소드는 속성을 생성하고 해당 값을 설정합니다. 예:

div.setAttribute("id","myDiv");
div.setAttribute("class","div-class");
div.setAttribute("title","div-title");

setAttribute() 메소드를 통해 HTML 속성과 사용자 정의 속성을 모두 작동할 수 있습니다. 이 메소드로 설정된 속성 이름은 일률적으로 소문자로 변환됩니다. 예를 들어 "ID"는 "id"로 변환됩니다.

속성 할당을 사용하여 속성 값을 직접 설정할 수도 있습니다

div.id = "myDiv";
div.align = "left";

그러나 다음과 같이 DOM 요소에 맞춤 속성을 추가하면 이 속성이 자동으로 요소의 기능이 되지 않습니다. :

div.myColor = "red";
alert(div.getAttribute("myColor")); //返回null

要删除一个元素的特性，可以使用removeAttribute()方法，该方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值，也会从元素中完全删除这个特性。例如：

div.removeAttribute("class");

attribute属性

Element类型是唯一一个使用attribute属性的DOM节点类型。attribute属性中包含一个NamedNodeMap，于NodeList相似，也是一个动态的集合。元素的每一个特性都由一个Attr节点表示，每一个节点都保存在NamedNodeMap对象中。NamedNodeMap对象拥有以下一些方法：

• getNamedItem(name)：返回nodeName属性等于name的节点。

• removeNamedItem(name)：从列表中移除nodeName属性等于name的节点。

• setNamedItem(name)：向列表中添加节点，以节点的nodeName为索引。

• item(pos)：返回位于pos位置处的节点。

attribute属性包含一系列的节点，每个节点的nodeName就是特性的名称，而节点的nodeValue就是特性的值。要取得元素的id，可以使用下面的方法：

var id = element.attribute.getNamedItem("id").nodeValue;

也可以通过方括号的方式来简写上面的代码：

var id = element.attribute["id"].nodeValue;

也可以通过这种语法来设置属性值：

element.attribute["id"].nodeValue = "myDiv";

调用removeNamedItem()方法与在元素上调用removeAttribute()方法的效果一样：删除给定名称的元素特性。但是它们之间也有一些区别，removeNamedItem()方法会返回被删除特性的Attr节点：

var oldAttr = element.attribute.removeNamedItem("id");

创建元素

我们通过document.createElement()方法可以创建一个新的元素。这个方法只接受一个参数：要创建的元素的标签名称。这个标签名称在HTML文档中不区分大小写，而在XML文档中则是要区分大小写的。例如使用下面的代码来创建一个新的元素：

var div = document.createElement("div");

在使用createElement()创建元素的同时，也为元素设置了ownerDocument属性。同时，我们还可以操作元素的特性，为它添加更多的子节点，例如：

var div = document.createElement("div");div.id = "myDiv";div.className = "div-class";

在新元素上设置这些特性只是为元素添加了相应的信息。由于新元素还没有被添加到文档树中，所以这些特性不会浏览器的显示。要把新元素添加到文档树中，可以使用appendChild()、insertBefore()、replaceChild()方法，例如下面的代码：

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

一旦新元素被添加到文档树中，浏览器就会立刻展现该元素。之后，对该元素所做的任何修改都会在浏览器中被反应出来。

元素子节点

元素可以有任意数量的子节点和后代节点。元素的childNodes属性中包含了它的所有子节点，这些子节点有可能是元素、文本节点、注释或处理指令。不同的浏览器对待这些节点有不同的处理方法，以下面的代码为例：

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

如果是IE浏览器来解析这段代码，那么

元素会有3个子节点，分别是3个
• 元素；如果是其他浏览器来解析，
  元素都会有7个子节点，包括3个
  • 元素和4个文本节点（表示
  • 元素之间的空白符）。如果像下面这样删除了元素之间的空白符号，那么所有的浏览器都会返回相同的子节点数量。

    <ul id="myList"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>

    
    

    对于上面的代码，

    元素在任何浏览器都会包含3个子节点。如果你需要通过childNodes来遍历子节点，那么一定要注意浏览器之间的这一差别。这就意味着在执行某项操作之前，我们需要检查一下nodeType属性，例如下面的代码：

    for(var i = 0,len = element.childNodes.length; i < len; i++){
      if(element.childNodes[i].nodeType == 1){
        //执行某些操作...
      }
    }

    这个例子会循环遍历特定元素的每一个子节点，在子节点的nodeType类型为1时（表示元素节点），才执行某些操作。

    如果想通过某个特定的标签名称来获取子节点和后代节点，可以使用getElementsByTagName()方法。在通过元素调用这个方法的时候，除了搜索起点是当前元素之外，其它的都与通过document来调用这个方法是一样的，因此，搜索的结果只会返回当前元素的后代。例如，想要取得

    元素包含的所有
    • 元素，可以这样写代码：

      var ul = document.getElementById("myList");
      var items = ul.getElementsByTagName("li");

      上面的

      元素中只包含直接的
      • 子元素。如果它包含更多层次的后代子元素，那么各个层次包含的
      • 元素也一起会被返回。

        以上就是JavaScript文档对象模型-Element类型的内容，更多相关内容请关注PHP中文网（www.php.cn）！