Article Directory
DOM summary
Getting along with teachers from HTML, CSS to have a preliminary understanding, then contacted JavaScript, JQuery, and now in my school Vue, and suddenly the teacher's words to ask the ignorant - What is the DOM? To be honest, I was a bit ignorant. Ah, it is important. Ok? What is le?
1, DOM
DOM is an acronym for Document Object Model (Document Object Model). DOM defines a standard for accessing HTML and XML documents: "is the platform and language-neutral interface that allows programs and scripts to dynamically access and update document content, structure and style."
The employer is saying, when a page is created and loaded into the browser, DOM quietly born, it will convert the document to a Web page document object, the main function is to handle web content.
DOM entire page is mapped to a multi-node structure. Each part of the HTML or XML pages are some type of nodes, which in turn contain different types of data. A piece of code like this:
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
In the DOM, the page can be represented by the lower hierarchical node shown in FIG.
This figure is like an upside down tree growth, and this is what we call DOM structure of the page document. In this figure, each HTML tag is a DOM node, within a node can have basic properties, styles, events, and other attributes can be changed, allowing developers to get the initiative to control the content and structure of the page. With API DOM provides, developers can easily delete, add, modify or replace any node.
1) DOM structure
2) DOM node
a, node classification
- Each HTML element is an element node
- Text within the HTML element is a text node
- Each HTML attribute is an attribute node
The relationship between, b, nodes
<html>
<head>
<title>DOM 教程</title>
</head>
<body>
<h1>DOM 第一课</h1>
<p>Hello world!</p>
</body>
</html>
From the top of the HTML:
- html node has no parent; it is the root
- Head and body of parent nodes are html
- Text node "Hello world!" The parent node is p
and:
- html node has two child nodes: head and body
- head node has a child node: title node
- title node also has a child node: a text node "DOM Tutorial"
- h1 and p is a sibling node, but also the body of the child nodes
and:
- head element is the first child of the html element
- body element is the last child of the html element
- h1 element is the first child of the body element
- p element is the last child of the body element
c, selector - find node
-
id selector: By using the getElementById () method returns the contents of a single element node
<!DOCTYPE html> <html> <body> <p id="intro">Hello World!</p> <p>本例演示 <b>getElementById</b> 方法！</p> <script> x=document.getElementById("intro"); document.write("<p>来自 intro 段落的文本：" + x.innerHTML + "</p>"); </script> </body> </html> -
Selector element: by using the getElementsByTagName () method returns the contents of a node is the name of the same element having an array (set)
<!DOCTYPE html> <html> <body> <p>Hello World!</p> <p>DOM 很有用！</p> <p>本例演示 <b>getElementsByTagName</b> 方法。</p> <script> x=document.getElementsByTagName("p"); document.write("第一段的文本: " + x[0].innerHTML); </script> </body> </html> -
Class Selector: getElementsByClassName by using () method returns the contents of a node array having the same CSS class name (set)
<!DOCTYPE html> <html> <body> <p class="intro">Hello World!</p> <p>本例演示 <b>getElementById</b> 方法！</p> <script> x=document.getElementsByClassName("intro"); document.write("<p>来自 intro 段落的文本：" + x.innerHTML + "</p>"); </script> </body> </html>
3) DOM modification
a、innerText
Gets or sets the period of the plain text content of the element node
b、innerHTML
Html code set and get some segments of the content element node
<!DOCTYPE html>
<html>
<body>
<p id="intro">Hello World!</p>
<script>
//找到节点
var prograph=document.getElementById("intro");
//修改或者获取节点属性：innerText
prograph.innerText='<h1>test</h1>';
alert(prograph.innerText);
//修改或者获取节点属性：innerHTML
prograph.innerHTML='<h1>test</h1>';
alert(prograph.innerHTML);
</script>
<p>上面的段落被一段脚本改变了。</p>
</body>
</html>
c, attributes: value, style, width
- input attribute value
<!DOCTYPE html>
<html>
<body>
<input id="username" value="admin"/>
<script>
//找到节点
var username=document.getElementById("username");
username.value='hello';
</script>
</body>
</html>
- select the property value
<!DOCTYPE html>
<html>
<body>
<select id='sltSchool'>
<option value='1'>天津大学</option>
<option value='2'>北京大学</option>
</select>
<script>
//找到节点
var sltSchool=document.getElementById("sltSchool");
var val=sltSchool.selectedOptions[0].value;
val=2;
alert(val);
</script>
</body>
</html>
2, DOM operations
Operation 1) a single HTML DOM node
a, find DOM node
b, DOM modification
-
Content: innerHTML and innerText
-
value property
-
CSS Styles
第一种：[选择器].style.propetyName = propertyVaule； document.getElementById("p1").style.color="blue"; document.getElementById("p1").style（*） 第二种：[选择器].classList.add(className) document.getElementById("p1").classList.add("box"); -
Attributes
<script> /** *原生js修改属性 */ var achor = document.getElementsByTagName('a')[0]; var address = achor.href; alert(address); achor.href = '#'; </script>
Change 2) DOM structure
a, add nodes
-
1) find the parent node
-
2) Create a new node
-
3) The new node is added to the parent node
Example 1:
<script>
// 1.找到父节点
var container = document.getElementsByClassName('container')[0];
// 2. 创建新节点(刚刚创建时，是保存在内存中)
var ipt = document.createElement('input');
ipt.value= 'admin';
// 3. 把新节点加入到父节点中
container.appendChild(ipt);
</script>
Example 2:
<script>
/**
* 1、多个独立的部分——每个部分都可以单独的扩展
* 2、通过某个接口建立关联
*/
var container = document.getElementsByTagName('body')[0];
var box = document.createElement('div');
box.innerText='Hello';
container.appendChild(box);
</script>
(Elective): Gets the parent element, Obtain sibling references, how to change the dom structure through the relationship of siblings
b, the node is removed
- 1) find the parent node
- 2) find the child node to be removed
- 3) removing the child from the parent node of the container
<!DOCTYPE html>
<html lang="en">
<body>
<div class="login"></div>
</body>
<script>
var container2 = document.getElementsByTagName('body')[0];
var loginBox = document.getElementsByClassName('login')[0];
container2.removeChild(loginBox);
</script>
</html>
c, the insertion node
- 1) find the parent node
- 2) Find the node and the reference node is inserted
- 3) inserting operation implemented within the parent node
<!DOCTYPE html>
<html lang="en">
<body>
<div class="login"></div>
<div id="after"></div>
</body>
<script>
var container3 = document.getElementsByTagName('body')[0];
//被插入节点
var newBox = document.createElement('div');
newBox.innerHTML='<h1>newBox</h1>';
//参照节点
var afterBox = document.getElementById('after');
container3.insertBefore(newBox,afterBox);
</script>
</html>
3) Show and hide
for example:
<head>
<meta charset="UTF-8">
<title>原生JavaScript的显示和隐藏</title>
</head>
<body>
<div class="box">content</div>
<button id="btnShow">显示</button>
<button id="btnHide">隐藏</button>
<button id="btnToggle">切换</button>
</body>
<script>
var box = document.getElementsByClassName('box')[0];
var btnShow = document.getElementById('btnShow');
var btnHide = document.getElementById('btnHide');
var btnToggle = document.getElementById('btnToggle');
btnShow.onclick = function(){
box.style.display='block';
}
btnHide.onclick = function(){
box.style.display='none';
}
btnToggle.onclick = function(){
if(box.style.display=='none'){
box.style.display='block';
}else{
box.style.display='none'
}
}
</script>
