JavaScript Document Object Model-Element type-JS Tutorial-php.cn

In addition to the Document type, the Element type is the most commonly used type in JavaScript programming. The Element type is often used to represent HTML or XML elements, providing access to element tag names, subnodes, and attributes. The Element node has the following characteristics: The value of

nodeType is 1.

The value of nodeName is the tag name of the element.

The value of nodeValue is null.

The value of parentNode may be Document or Element.

Its child nodes may be Element, Text, Comment, ProcessingInstruction, CDATASection or EntityReference.

To access the tag name of an element, you can use the nodeName attribute or the tagName attribute. These two attributes will return the same value, such as the following example:

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

Copy after login

can be obtained as follows The tag name of this element:

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

Copy after login

In HTML, tags are always expressed in uppercase letters, so div.tagName will output an uppercase "DIV". In XML (including XHTML), the tag name will be consistent with the tag in the source code. Therefore, when comparing whether the tag names of elements are consistent, it is best to convert them to lowercase before comparing.

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

Copy after login

HTML elements

All HTML elements are represented by the HTMLElement type, not by this type, but also by its subtypes. The HTMLElement type directly inherits from the Element type and adds some properties. These added attributes correspond to a series of attributes that exist in every HTML element:

id, the unique identifier of the element in the document.
title, additional explanatory information about the element, is generally displayed through a tool tip bar.
lang, the language of the element content.
dir, the direction of the language, the value is "ltr" (displayed from left to right), or "rtl" (displayed from right to left).
classname corresponds to the class attribute of the element, which is the CSS class specified for the element.

The above attributes can be used to obtain or modify the corresponding characteristic values. For example, the following example:

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

Copy after login

We can output the above attribute values in the console:

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);

Copy after login

JavaScript Document Object Model-Element type

To assign values to these attributes, you can operate as follows ：

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

Copy after login

Get attributes

Each element has one or more attributes. There are three DOM methods for operating element attributes, which are:

getAttribute()
setAttribute()
removeAttribute()

The above The method can be used for any attribute, for example:

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"));

Copy after login

JavaScript Document Object Model-Element type

Custom attributes (that is, attribute names not found in the standard HTML language) can also be obtained through the getAttribute() method, for example :

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

Copy after login

You can get the value of this custom attribute just like other attributes.

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

Copy after login

Tip: Attribute names are not case-sensitive, that is, "ID" and "id" represent the same attribute.

There are two special attributes. Although they have corresponding attribute names, the value of the attribute is not the same as the value obtained through getAttribute(). The first attribute is the style attribute, which is used to style the element through CSS. When accessed through getAttribute(), the returned style attribute value is not the included CSS text, but an object. The second one is an event handler like onclick. When used on an element, onclick contains JavaScript code. If accessed through getAttribute(), a JavaScript function will be returned.

Setting attributes

Corresponding to getAttribute() is the setAttribute() method, which receives two parameters: the name and value of the attribute to be set. If the attribute to be set already exists, the setAttribute() method will replace the existing value with the specified value. If the attribute does not exist, the setAttribute() method will create the attribute and set the corresponding value. For example:

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

Copy after login

You can operate both HTML attributes and custom attributes through the setAttribute() method. The attribute names set by this method will be uniformly converted to lowercase, for example, "ID" will be converted to "id".

You can also directly use attribute assignment to set the attribute value

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

Copy after login

However, if you add a custom attribute to the DOM element as follows, this attribute will not automatically become a feature of the element:

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

Copy after login

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

div.removeAttribute("class");

Copy after login

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;

Copy after login

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

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

Copy after login

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

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

Copy after login

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

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

Copy after login

创建元素

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

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

Copy after login

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

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

Copy after login

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

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

Copy after login

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

元素子节点

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

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

Copy after login

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

元素；如果是其他浏览器来解析，
- 元素和4个文本节点（表示
- 元素之间的空白符）。如果像下面这样删除了元素之间的空白符号，那么所有的浏览器都会返回相同的子节点数量。
```
<ul id="myList"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
```
  Copy after login
  对于上面的代码，