dom experience
- What is the DOM
dom_> the Document Object Model
dom define a way to represent and modify the document needs. DOM object is the host object, defined by the browser vendor, a collection class object used to operate Html and xml function. There are people Html and xml DOM is a standard programming interface. (Embarrassing! I do not understand)
In the process of development, xml json be replaced only indirectly modify css
- DOM basic operation
CRUD pair of nodes
- Charles
View element node
document代表整个文档，他是html标签的父节点;
document.getElementsById()//元素id在ie8以下的浏览器，不区分id大小，
也返回匹配的id属性的元素;
.getElementsByTagName()//根据标签名查找元素
.getElementsByName() // 只对部分标签的name生效（表单，表单元素，img,i
frame）;
.getElementsByClassName() // 类名——》ie8和以下的版本没有，可以多个
class一起；
.quarySelector() // css选择器，但在ie7及以下没有
.quarySelectorAll // css选择器，但是ie7及以下没有
.quarySelector()
.quarySelectorAll()
// ie7及以下不能用，最重要的是不是实时的,弄出来的是副本，是静态的,不更改！
// var strong = document.querySelector('div>span strong.demo');
// 选择一组
// var strong = document.querySelectorAll('div>span strong.demo')[0];
<div class="content">
<strong></strong>
<span></span>
<em></em>
</div>
<script>
var strong = document.getElementsByTagName("strong")[0];
var div = document.getElementsByClassName("content")[0];
</script>
We now make a tab:
<div class="wrapper">
<button class="active">111</button>
<button>222</button>
<button>333</button>
<div style="display: block;" class="content">content1</div>
<div class="content">content2</div>
<div class="content">content3</div>
</div>
<script>
var btn = document.getElementsByTagName("button");
var div = document.getElementsByClassName("content");
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function() {
for (var j = 0; j < btn.length; j++) {
btn[j].className = "";
div[j].style.display = "none";
}
this.className = "active";
div[i].style.display = "block";
};
}
</script>
The closure, i can not achieve this operation!
<div class="wrapper">
<button class="active">111</button>
<button>222</button>
<button>333</button>
<div style="display: block;" class="content">content1</div>
<div class="content">content2</div>
<div class="content">content3</div>
</div>
<script>
var btn = document.getElementsByTagName("button");
var div = document.getElementsByClassName("content");
for (var i = 0; i < btn.length; i++) {
(function(n) {
btn[n].onclick = function() {
for (var j = 0; j < btn.length; j++) {
btn[j].className = "";
div[j].style.display = "none";
}
this.className = "active";
div[n].style.display = "block";
};
})(i);
}
</script>
Write a moving div
var div = document.createElement("div");
document.body.appendChild(div);
div.style.width = "100px";
div.style.height = "100px";
div.style.backgroundColor = "#0ff";
div.style.position = "absolute";
div.style.left = "0";
div.style.top = "0";
setInterval(function() {
div.style.left = parseInt(div.style.left) + 1 + "px";
}, 100);
var div = document.createElement("div");
document.body.appendChild(div);
div.style.width = "100px";
div.style.height = "100px";
div.style.backgroundColor = "#0ff";
div.style.position = "absolute";
div.style.left = "0";
div.style.top = "0";
var speed = 1;
var timer = setInterval(function() {
speed += speed / 7;
div.style.left = parseInt(div.style.left) + speed + "px";
div.style.top = parseInt(div.style.top) + speed + "px";
if (parseInt(div.style.top) > 200 && parseInt(div.style.top) > 200) {
clearInterval(timer);
}
}, 100);
Write a moving box control:
var div = document.createElement("div");
document.body.appendChild(div);
div.style.width = "100px";
div.style.height = "100px";
div.style.backgroundColor = "#0ff";
div.style.position = "absolute";
div.style.left = "0";
div.style.top = "0";
document.onkeydown = function(e) {
switch (e.which) {
case 38:
div.style.top = parseInt(div.style.top) - 5 + "px";
break;
case 40:
div.style.top = parseInt(div.style.top) + 5 + "px";
break;
case 37:
div.style.left = parseInt(div.style.left) - 5 + "px";
break;
case 39:
div.style.left = parseInt(div.style.left) + 5 + "px";
}
};
Here we provide a hold the idea implemented to achieve acceleration of the moving up and down the keyboard, first by a counter, and then press the recording time, if the time interval <certain value, plus a number of times, if the time interval> certain value, the number of zero ! If the number reaches a value, for example: 7, we think he's been hold it down.
- DOM Basic Operations
Traverse the node tree:
parentNode-- "parent node (the very top is the Document)
chhildNode--" child nodes
firstChild-- "first child
lastChild--" last child
nextSibling-- "after a sibling node, previousSibling - "The previous sibling node
Based traversing element node of the tree:
parentElement-- "returns the current element of the parent element node (ie incompatible)
children--" returns only the current element children
node.childElementCount === node.children.length-- "current element the child element nodes (ie incompatible)
firstElementChild-- "the first child (ie incompatible)
lastElementChild--" the last child node (ie incompatible)
nextElementSibling-- "after a sibling node (ie incompatible)
previousElementSibling-- "previous sibling node (ie incompatible)
Properties of four nodes:
tag name node.Name element, capitalization, read-only
node.Value text or text Comment node nodes, can read and write
type nodeType the node, read-only
attributes set Element node properties
Method of a node:
Node.hasChildNodes (); if there is a child node are true and false!
