DOM里有三种节点：元素节点、文本节点和属性节点
getElmentById(); //id选择器 在JS中用此方法来查找获取 建议大小写 以免不兼容
有时候查找不到 DOM操作必须等到HTML文档加载完毕执行
解决方法1：<script></script>移到</html>后面
2.用onlod事件来解决 window.onload=function(){
//这里存放当页面所以内容加载完毕后，再执行的代码
}
tagName:获取这个元素节点的标签名
innerHTML:获取这个元素节点的纯文本
.....
<body>
<div id="box">测试getElementById</div>
</body>
......
var box=decument.getElementById("box");
alert(box.tagName);
alert(box.innerHTML);
<div id="box" title="标题" class="pox" style="color:red" bbb="aaaa"></div>
window.onload=function(){
alert(box.id);//获取这个元素节点的ID属性的值
alert(box.title);//获取titlt属性的值
alert(box.style.cocor);//获取style属性对象中color属性的值
alert(box.className);//获取class属性的值
自定义属性bbb="aaa'只有IE可以支持
alert(box.bbb);做兼容操作或不使用
这个是HTML属性的直接调用 还有其他方式深入学习后补充
}
----------------------------------------------------------------
.....
<body>
<div id="box">测试getElementById</div>
</body>
......
window,onload=function(){
var box=document.getElementById("box");
box.innerHTML='这里的内容把纯文本内容修改掉了，还能加上样式哦比如加粗';
}
其他方法也可以改比如id
--------------------------------------------------
getElementByTagName()//此方法返回一个对象数组 这个数组保存着所有相同元素名的节点列表
.....
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
......
window.onload=function(){
decument.getElementByTagName("li");
alert(li.length);//返回3 表示li有3个
alert(li[0]);//HTMLLIElement,li的节点对象
alert(li.item(0));//同上
alert(li[0].tagName);//返回第一个li的标签
alert(li[0].innerHTML);//返回第一个li标签的内容
}
怎么获得body节点
window.onload=function(){
var boby=document.getElementsByTagName("body")[0];
alert(body);
}//这是方法之一 以后做动态要使用body节点
-------------------------------
window.onload=function(){
var all=document.getElementsByTagName("0");
alert(all.length);
//这是这个HTML文件里所有标签的数量
//但是火狐打开后 会自动创建一个div所以多算一个
//IE浏览器会把文档声明页算进去了 所以比火狐谷歌多一个
}
PS:比如我div标签里写name value 这是不合法的IE浏览器获取不到 这是表单标签
-------------------------------------------------------
getAttribute:获取某个节点的属性
<div id="box" title="标题" class="pox" style="color:red" bbb="aaaa"></div>
window.onload=function(){
var box=document.getElementById("box");
alert(box.getAttribute('id'));//获取了id节点的对象
alert(box.getAttribute('style'));//非IE获取的是style字符串，IE返回的是对象 这里有个不兼容
alert(box.getAttribute('bbb'));//自定义全部兼容了 之前的是只有IE兼容
alert(box.getAttribute('class'));//IE无法获取
alert(box.getAttribute('className'));//IE可以获取其他不可以
}
PS:onclick在IE7及以下会返回一个函数式 避免使用getAttribute访问HTML属性
alert(box.onclick);.//返回一个函数式
alert(box.getAttribute("onclick"));//IE7及以下会返回函数式 非IE返回字符串(就是比如我在div里给onclick赋值了)
-------------------------------------------------------------
setAttribute:给节点赋值
window.onload=function(){
var box=document.getElementById("box");
box.setAttribute('title','哈哈哈');//创建一个属性及属性值
PS：也可以设置居中等样式 IE7及以下 style和onclick没有效果
--------------------------------------------------------------------------
removeAttribute:移除 IE6及以下不支持
window.onload=function(){
var box=document.getElementById("box");
box.removeAttribute('style');//移除了这个样式
--------------------------------------------------------
getElementsClassName:通过类名获取
-----------------------------------------------节点的访问关系是以属性形式存在
获取父节点：节点只有一个父节点 parentNode
<div class="box">
<div class="box1"></div>
</div>
var box1=documentsByClassName("box1")[0];
.log(box1.parentNode);
-------------------------------------------------------
兄弟节点:Sibling
Next:下一个节点
Previous:前一个节点
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
console.log(box1.nextElementSibling);//这个box1下一个的节点
节点.nextElementSibling||节点.nextSibling
nextElementSibling:在火狐谷歌IE9指的是下一个元素节点
nextSibling：IE678指下一个元素节点、火狐谷歌IE9+下一个节点包括空文档及换行
PreviousSibling:在IE678中指前一个元素节点（标签）在火狐谷歌IE9以后值得是前一个节点包括空文档和换行
PreviousElementSibling:在火狐IE9值得是前一个元素节点
节点.previousElementSibling||节点.previousSibling
----------------------------------------------------------------
单个子节点
firstChild:调用者是父节点 IE678中指第一个元素节点（标签）在火狐谷歌IE9+之后都指的是第一个节点包括空文档及换行节点
firstElementChild：在火狐谷歌IE9都指的是第一个元素节点
比如console.log(box1.parentNode.firstElementChild);
--------------------------------------------------
所有子节点:
childNodes:指定元素的子元素集合包括换行空文档
children:固定元素的子元素集合不包括换行空文档
子节点数组=父亲节点.childNodes;
子节点数组=父节点.children;//用的最多
console.log(box1.parentNode.children);
----------------------------------------------------------------------
随意得到节点
节点自己.parentNode.chiledren[index]:随意得到兄弟节点------>寻找代码内容 可了解
-----------------------------------------------------------------------
重点：节点的操作
创造节点:document.createElement();
插入节点:父亲节点.appendChild();---->父节点的最后插入一个新节点
父亲节点.inserBefore(新节点，参考节点)在参考节点钱插入
删除节点:父亲节点.removeChild(子节点);
不知道父亲节点的情况下，可以写成:node.parentNode.removeChild(node);
复制节点:想要复制节点调用cloneNode()这个函数 得到一个新的节点 方法内部可以传参 如果是true深层复制 false只复制节点本身
新节点=要复制的节点.要复制的节点.cloneNode（参数）;参数可选复制节点
var aaa=box.cloneNode();//只复制一个div
var ccc=box.cloneNode(false);//复制本身和上面一致
var bbb=box.cloneNode(ture);//全复制下来了
------------------------------------------------------------------------
节点的属性操作:eleNode.对象
<img src="xxx">
console.log(eleNode.src);
console.log(eleNode.[title]);//class 都要[]