experiencia dom
- ¿Qué es el DOM
dom_> Documento Modelo de objetos
dom definir una forma de representar y modificar las necesidades de documentos. objeto DOM es el objeto de acogida, que se define por el vendedor navegador, un objeto de clase de colección utilizado para operar HTML y función xml. Hay personas HTML y XML DOM es una interfaz de programación estándar. (Vergüenza! No entiendo)
En el proceso de desarrollo, XML JSON ser reemplazado únicamente modificar indirectamente css
- DOM de funcionamiento básico de
CRUD par de nodos
- Charles
Ver nodo de elemento
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>
Ahora hacemos una ficha:
<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>
El cierre, que no puede alcanzar esta operación!
<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>
Escribir un div en movimiento
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);
Escribir un control de cuadro en movimiento:
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";
}
};
Aquí nos proporcionan un agarre la idea implementado para lograr la aceleración del movimiento hacia arriba y abajo del teclado, por primera vez por un contador, y luego presione el tiempo de grabación, si el intervalo de tiempo <cierto valor, más un número de veces, si el intervalo de tiempo> cierto valor, el número de cero ! Si el número alcanza un valor, por ejemplo: 7, pensamos que ha estado mantiene presionado.
- Operaciones básicas DOM
Recorrer el árbol de nodos:
parentNode-- "nodo padre (la parte superior es el documento)
chhildNode--" nodos secundarios
firstChild-- "primer hijo
lastChild--" último hijo
nextSibling-- "después de un nodo del mismo nivel, previousSibling - "El nodo secundario anterior
nodo de elemento de desplazamiento base del árbol:
parentElement-- "devuelve el elemento actual del nodo elemento padre (es decir, incompatible)
niños--" devuelve sólo los niños elemento actual
node.childElementCount === node.children.length-- "elemento actual los nodos secundarios de elementos (es decir incompatibles)
firstElementChild-- "el primer hijo (es decir incompatibles)
lastElementChild--" el nodo último hijo (es decir incompatibles)
nextElementSibling-- "después de un nodo relacionado (es decir incompatibles)
previousElementSibling-- "nodo relacionado anterior (es decir incompatible)
Propiedades de cuatro nodos:
etiqueta de elemento de nombre node.Name, la capitalización, de sólo lectura
de texto o texto del comentario ganglios linfáticos node.Value, puede leer y escribir
tipo nodeType el nodo, de sólo lectura
atributos de establecer las propiedades de nodo de elemento
Método de un nodo:
Node.hasChildNodes (); si hay un nodo hijo es verdadera y falsa!
