JavaScript Learning Note Nine

This paper studies and organizes the course "JavaScript advanced" according to MU course network.

Understanding the DOM

The Document Object Model DOM defines a standard way to access and manipulate HTML documents. The DOM renders an HTML document as a tree structure with elements, attributes, and text (the node tree).

Let's take a look at the following code:

To decompose the HTML code into a DOM node hierarchy diagram:

An HTML document can say a collection of nodes, and the DOM nodes are:

1. 元素节点：中2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。

Node Properties:

To traverse a node tree:

To UL, for example, its parent node body, its child nodes 3 Li, its sibling node H2, P.

Dom Operation:

Getelementsbyname () method

Returns a collection of node objects with the specified name.

Grammar:

document.getElementsByName(name)

Unlike the getElementById () method, the element is queried through the element's Name property, not through the id attribute.

Attention:

1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

Take a look at the following code:

Operation Result:

getElementsByTagName () method

Returns a collection of node objects with the specified label name. The order in which elements are returned is their order in the document.

Grammar:

getElementsByTagName(Tagname)

Description

1. Tagname是标签的名称，如p、a、img等标签名。2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

Take a look at the following code to get the node through getElementsByTagName ().

Difference Getelementbyid,getelementsbyname,getele

By example, people can identify the identity of the identity card, have the name, there are categories (adults, children, the elderly) and so on.

1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。3. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。

Convert the above example into HTML, as follows:

type="checkbox" name="hobby" id="hobby1">  音乐

the input tag is like a human category.
The Name property is like the name of a person.
The id attribute is like a person's identity card.

The methods are summarized as follows:

Note: Methods are case-sensitive

The following example (6 name= "hobby" of the complex options, two buttons) to distinguish between the three methods of different:

<input Type="checkbox"Name="Hobby"Id="Hobby1"> Music <input Type="checkbox"Name="Hobby"Id="Hobby2"> Mountaineering <input Type="checkbox"Name="Hobby"Id="Hobby3"> Swimming <input Type="checkbox"Name="Hobby"Id="Hobby4"> Reading <input Type="checkbox"Name="Hobby"Id="Hobby5"> Play <input Type="checkbox"Name="Hobby"Id="Hobby6"> Running <input Type="button" value="Select All"Id="Button1"> <input Type="button" value="No choice"Id="Button1">

1. document.getElementsByTagName ("input"), resulting in a total of 8 elements labeled as input.

2. Document.getelementsbyname ("hobby"), which results in a total of 6 elements that get the property name= "hobby".

3. document.getElementById ("Hobby6"), the result is to get the attribute id= "Hobby6" element, only one, "run" this complex option.

GetAttribute () method

Gets the value of the property through the attribute name of the element node.

Grammar:

elementNode.getAttribute(name)

Description

1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。2. name：要想查询的元素节点的属性名字

Take a look at the following code to get the property value of the H1 tag:

Operation Result:

h1标签的ID ：alinkh1标签的title ：getAttribute()获取标签的属值

SetAttribute () method

The Etattribute () method adds a new property that specifies a name and value, or sets an existing property to the specified value.

Grammar:

elementNode.setAttribute(name,value)

Description

1.name要设置的属性名。2.value: 要设置的属性值。

Attention:

1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数

Node properties

In the Document Object Model (DOM), each node is an object. The DOM node has three important properties:

1. NodeName: Name of the node

2. NodeValue: The value of the node

3. NodeType: Type of node

One, NodeName property: The name of the node, is read-only.

1. The nodeName of the element node is the same as the label name
2. The nodeName of the attribute node is the name of the property
3. The nodeName of a text node is always #text
4. The nodeName of the document node is always #document

Second, NodeValue property: The value of the node

1. The nodevalue of the element node is undefined or null
2. The nodevalue of a text node is the text itself
3. The nodevalue of the attribute node is the value of the property

NodeType attribute: The type of the node, which is read-only. Here are some common types of nodes:

Element type node type
Elements??? 1
Property??? 2
Text??? 3
Comments??? 8
Document??? 9

Access sub-node ChildNodes

Accesses the list of all child nodes under the selected element node, the returned value can be considered an array, and he has the length property.

Grammar:

elementNode.childNodes

Attention:

If the selected node has no child nodes, the property returns a NodeList that does not contain a node.

Let's take a look at the following code:

Operation Result:

Ie:

Number of UL sub-nodes: 3
Node Type: 1

Other browsers:

Number of UL sub-nodes: 7
Node Type: 3

Attention:

1. IE full range, Firefox, Chrome, opera, safari compatibility issues

2. The whitespace between the nodes, in Firefox, Chrome, Opera, Safari is the text node, so IE is 3, the other browser is 7, as shown in:

If you change the code to this:

<ul>    <li>javascript</li>    <li>jQuery</li>     <li>PHP</li></ul>

Run Result: (IE and other browser results are the same)

Number of UL sub-nodes: 3
Node Type: 1

JavaScript Learning Note Nine