DOM objects
A, DOM brief
DOM (Document Object Model) Document Object Model Documentation: Documentation tag type (HTML, etc.)
DOM document is marked all the content type (label, text, attributes) are encapsulated into objects,
By the operation target property or method, to achieve the purpose of the operation or change the HTML display effect.
DOM tree
<html>
<head>
<title>文档标题</title>
</head>
<body>
<a href="">我的链接</a>
<h1>
我的标题
</h1>
</body>
</html>
Each tag will be loaded into a DOM tree node object element.
Attribute of each tag will be loaded into a DOM node object attribute tree
Experience content of each tag is loaded into a DOM node tree object is a text
The whole DOM tree, is a document node object that DOM object.
An HTML document is loaded into memory will form a DOM object
DOM tree features:
There will certainly be a root
Each node is a node object
Common node relationships: parent-child relationship
Text node object has no child nodes - leaf node
Each node has a parent node, zero or more child nodes
Only the root node has no parent
Second, get the element object four ways
1、getElementById();
byElement IDGets an object corresponding element
If no null is returned
var t1 = document.getElementById("t1");
2、geElementsByName();
By elementsThe name attributeGet all the elements to meet the requirements of
Returns an array, returns an empty array can not be found
var arr = document.getElementsByName("hobby");
3、getElementsByTagName();
By elementsElement nameProperty Gets all the elements to meet the requirements of
Returns an array, returns an empty array can not be found
var arr = document.getElementsByTagName("li");
4、getElementsByClassName();
By elementsclass propertyGet all the elements to meet the requirements of
Returns an array, returns an empty array can not be found
Third, the common element object attributes
1、value
Modify the value of the element
元素对象.value //获取元素对象的value属性值
元素对象.value = 属性值 //设置元素对象的属性值
var t1 = document.getElementById("t1");
t1.value = "你好"
2、className
Modify elements of style
And similar usage value
3、checked
Identity check box
The HTML checked = "checked", returns true js, false designation
t1.checked = true
4、innerHTML
SUMMARY operation body element
t1.innerHTML = "算法算法" //设置标签内容体
t1.innerHTML +="sfaf" //追加内容体信息
