JS-DOM-随时更新

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);

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()//此方法返回一个对象数组这个数组保存着所有相同元素名的节点列表

.....

</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:获取某个节点的属性

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>

var box1=documentsByClassName("box1")[0];

.log(box1.parentNode);

-------------------------------------------------------

兄弟节点:Sibling

Next:下一个节点

Previous:前一个节点

</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.对象

console.log(eleNode.src);

console.log(eleNode.[title]);//class 都要[]