js dom
元素节点:
分类：元素节点，属性节点，文本节点，注释节点
nodeName nodeValue nodeType
元素节点 标签名 null 1
属性节点 属性名 属性值 2
文本节点 #text 文本值 3
注释节点#comment 注释内容 8
获取节点所有的子节点： 节点.childNodes
获取节点所有属性节点： 节点.attributes
元素节点的4种获取方式
document.getElementById(传入id名);
document.getElementsByClassName(传入样式名x)[0];表示第一个样式名为x的标签
document.getElementsByTagName(传入标签名y)[0];表示第一个标签名为y的标签
Document.getElementsByName(传入name属性名z)[0];表示第一个name属性名为z的标签
获取的所有子节点返回的是一个数组：
Demo：
<div id="box" class="div" style=" 30px;height: 50px;" name="nana">我是一个文本节 点<!--我是注释节点--><span name="nana">我是一个span标签</span></div>
var oDiv = document.getElementById("box");
console.log( oDiv.childNodes );
var oDivChilds = oDiv.childNodes;
console.log( oDivChilds[0].nodeName,oDivChilds[0].nodeValue,oDivChilds[0].nodeType );
console.log( oDivChilds[1].nodeName,oDivChilds[1].nodeValue,oDivChilds[1].nodeType );
节点的层次关系：
var oDiv = $("box");
console.log( oDiv.innerText );
console.log( oDiv.innerHTML);
innerText和innerHTML的区别：
前者是获取标签内的内容，把标签里的标签视为内容读出，包括标签里的标签的内 容。
或者是获取标签的内容，把标签里的标签视为内容读出；
console.log( oDiv.firstChild );获取标签内的第一个子节点
注意：第一个节点不一定是标签内的元素，还有可能为回车！！
console.log( oDiv.lastChild );获取标签内的最后一个子节点
console.log( oDiv.parentNode );获取标签的父节点
兄弟节点：
console.log( oDiv.previousSibling );获取前一个兄弟节点
console.log( oDiv.nextSibling);获取下一个兄弟节点
console.log( oDiv.owerDocument );获取根节点
创建元素节点：
document.creatElement(“div”);创建一个div标签
var oDiv = document.createElement("div");
设置样式：
oDiv.className = "box";
oDiv.style.backgroundColor = randomColor();
例子：
<div id="box" class="div" style=" 30px;height: 50px;" name="nana">我是一个文本节点<!--我是注释节点--><span name="nana">我是一个span标签</span></div>
<script type="text/javascript">
//元素节点、文本节点、属性节点、注释节点
// nodeName nodeValue nodeType -->了解
// 元素节点 标签名 null 1
// 属性节点 属性名 属性值 2
// 文本节点 #text 文本值 3
// 注释节点#comment 注释内容 8
//获取节点所有的子节点 节点.childNodes
//获取节点所有属性节点 节点.attributes
//1. 元素节点 4种方式获取
var oDiv = document.getElementById("box");
var oDiv = document.getElementsByClassName("div")[0];
//var oDiv = document.getElementsByTagName("div")[0];
//var oDiv = document.getElementsByName("nana")[1];
//console.log( oDiv.innerHTML );
//获取节点所有的子节点
console.log( oDiv.childNodes );
var oDivChilds = oDiv.childNodes;
// //2.文本节点
console.log( oDivChilds[0].nodeName,oDivChilds[0].nodeValue,oDivChilds[0].nodeType );
// //3.注释节点
console.log( oDivChilds[1].nodeName,oDivChilds[1].nodeValue,oDivChilds[1].nodeType );
//
// //4.获取元素节点的属性节点
console.log( oDiv.attributes );
var oDivAttris = oDiv.attributes;
console.log( oDivAttris[0].nodeName,oDivAttris[0].nodeValue,oDivAttris[0].nodeType );
<input type="radio" name="" /><input type="text" name="" /><div id="box">
<span>我是span1</span>
<span>我是span2</span></div><input type="text" name="" />
<script type="text/javascript">
// 怎么获取前面所有的兄弟元素？？？？？？
var oDiv = $("box");
// 1.获取所有的子节点 childNodes
console.log( oDiv.innerHTML) // innerHTML 加标签
// 2.获取第一个子节点 firstChild
console.log( oDiv.firstChild ); //div的后面 span前面 huiche
// 3.获取最后一个子节点 lastChild
console.log( oDiv.lastChild );
// 4.获取父节点 parentNode //body
console.log( oDiv.parentNode );
////////////////兄弟关系/////////////////
// 5.获取前一个兄弟节点 previousSibling
console.log( oDiv.previousSibling ); //input ul li
// 6.获取下一个兄弟节点 nextSibling
console.log( oDiv.nextSibling );
///////////////////根节点/////////////////
console.log( oDiv.ownerDocument ); //最后结点 包括body
</script>
//document.createElement("div");
function createDiv(){
var oDiv = document.createElement("div"); //创建什么元素
//oDiv = $("div");
//console.log(oDiv)
//设置div的样式
// 方法一：用js设置样式
// oDiv.style.width = "200px";
// oDiv.style.height = "200px";
// oDiv.style.backgroundColor = randomColor();
// oDiv.style.float = "left";
// // 方法二：用css设置样式
oDiv.className = "box"; //起类名
oDiv.style.backgroundColor = randomColor(); //设置背景颜色
oDiv.style.left = ( Math.random()*($w()-40) )+"px"; //设置定位的left top
oDiv.style.top = ( Math.random()*($h() -40) )+100+"px";
// 父节点.appendChild(子节点) 将子节点添加到父节点孩子列表的末尾
document.body.appendChild(oDiv);
}
setInterval("createDiv()",1000)
</script>