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

<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 都要[]