java dom 创建结点 setattribute_JavaScript DOM节点简介

DOM由节点组成

在 HTML DOM (文档对象模型)中，每个部分都是节点：

文档本身是文档节点

所有 HTML 元素是元素节点

所有 HTML 属性是属性节点

HTML 元素内的文本是文本节点

注释是注释节点

1．重要节点类型：标签(元素)节点，属性节点，文本节点。

2．重要节点属性：

(1)nodeType 节点类型(数字表示，标签1，属性2，文本3)

(2)nodeName 节点名字

(3)nodeValue 节点值

3.不同类型节点的属性取值

标签节点 属性节点 文本节点

nodeType节点类型 1 2 3

nodeName节点名字 对应的标签名 对应的属性名 #text

nodeValue节点值 null 对应的属性值 对应的文本内容

标签节点：

nodeType：1;

nodeName：对应的标签名;

nodeValue:null

属性节点:

nodeType：2;

nodeName：对应的属性名;

nodeValue:对应的属性值

文本节点:

nodeType：3;

nodeName：#text;

nodeValue:元素节点或属性节点中的文本内容

文档节点:

nodeType：9;

nodeName：表示整个文档(DOM 树的根节点)

nodeValue:document

获取节点

获得当前元素的父节点 : .parentNode

获得当前元素的子节点 :

.childNodes(标准属性)获取标签节点和文本节点

.children不是DOM的标签属性，但是所有的浏览器都支持，只会获得标签子节点

获取相邻节点的属性:

[next(previous)Sibling]、[next(previous)ElementSibling]

.nextSibling :

返回指定节点之后紧跟的节点(同级)。

被返回的节点以 Node 对象返回,元素中的空格被视作文本，而文本被视作文本节点

IE8及之前的浏览器会忽略空白文本节点

function getPrevNode (dom){

var preNode=dom.previousSibling;

var txt=preNode.nodeValue.trim(); //' '

if(preNode.nodeType==3 &&　txt.length==0){

return preNode.previousSibling

}else{

return preNode

}

}

.nextElementSibling:

IE8及之前的浏览器不支持这个属性，只会获得标签节点

//解决兼容性的问题

function getNextElement(element){

if(element.nextElementSibling){

return element.nextElementSibling;

}else{

var ele = element.nextSibling;

console.log(ele)

while(ele && ele.nodeType !==1){

ele= ele.nextSibling;

}

return ele;

}

}

父元素的first与last子节点 ：[first(last)Child]、[first(last)ElementChild]

.firstChild:

所有的浏览器都支持的，获取标签节点、文本节点，

但是IE8及之前的低版本的浏览器，是可以忽略空白文本节点的而获得的是标签节点

.firstElementChild:

IE8及之前的低版本的浏览器不支持，直接获取父元素的第一个标签节点

function getFirstElementChild(element){

if(element.firstElementChild){

return element.firstElementChild;

}else{

var ele = element.firstChild;

while(ele && ele.nodeType !==1){

ele = ele.nextSibling;

}

return ele;

}

}

function getLastElementChild(element){

if(element.lastElementChild){

return element.lastElementChild;

}else{

var ele = element.lastChild;

while(ele&&ele.nodeType!==1){

ele= ele.previousSibling;

}

return ele;

}

}

总结

. childNodes ;(标准属性)、next(previous)Sibling、first(last)Child

[不但可以获得标签节点，还会获取文本节点，但ie8及之前浏览器会忽略空本文本节点]

.children；[所有浏览器都支持，只会获得当前元素的标签子元素]

next(previous)ElementSibling、first(last)ElementChild

[IE8及之前的低版本浏览器不支持，只获取标签节点]

节点操作

动态创建节点元素

document.createElement("标签名");//创建元素节点；

document.createTextNode("txt");//创建文本节点；

1．父级元素. appendChild(节点元素)--把节点插入到父节点的末尾

2．父级元素.insertBefore(新节点,插入位置)--把新节点插入到位置的前面

父级元素.removeChild(节点元素); //删除节点元素

父级元素.replaceChild(节点1,节点2); //用节点1替换节点2

克隆节点：

cloneNode(boolean值)

1.该方法将复制并返回调用它的节点的副本。

2.如果传递的参数是 true，将递归复制当前节点的所有子孙节点。False的话只复制当前节点。

如果参数为False的话，仅仅克隆的是一个标签(不传参，默认值为false)

如果参数为true的话，标签之间的内容也会克隆，也叫做深度克隆

3.返回的节点不属于文档树，它的 parentNode 属性为 null。

4.当复制的是 Element 节点时，它的所有属性都将被复制。但是，当前节点上注册的事件不会被复制

节点属性

基本用法

1.对象.的方式设置、获取属性[元素是DOM对象]

例如：txt.value=”123”;{不能设置、获取自定义属性}

2.setAttribute(属性名，属性值) ：设置属性，也可设置自定义属性，推荐使用

注意：设置已经存在的属性时，会将原来的属性值覆盖

3.getAttribute() 可获得行内的原生属性，也可获得自定义属性

4.removeAttribute(要移除的属性名) 彻底删除

给元素节点设置样式

给元素设置样式的两种形式(通过对象.的方式)：

1.设置类名

className：元素的一个属性，设置类名；

[加入要为某个元素添加多个样式时，可以将样式都放在一个css的类样式中，然后通过元素的属性className获取该类名。]

dom.setAttribute('class','xxx');

IE6/7不支持setAttribute('class',xxx)方式设置元素的class。

dom.setAttribute('className', 'xxx')

IE8/9/10/Firefox/Safari/Chrome/Opera不支持setAttribute('className',xxx)方式设置元素的class

dom.className = 'xxx';

所有浏览器都支持

dom.className = dom.className.replace("hide","show");

//字符串的替换，仅仅是替换了要替换的字符，不改变其它的

2．Style：元素的一个属性，通过其设置一个样式。

例如：

dom.style.backgroundColor='red'; //将样式的中横线写法换成驼峰的写法

dom.style.background='red';

dom.style.color='red';

设置、清除类的方式

1．设置类名：dom.className='类名';

2．清除类名：dom.className='';

3．彻底清除类的属性：dom.removeAttribute('class')

设置、获取标签中的文本内容

获取内容区别：

1．innerText只打印标签之间的文本内容，不打印标签

2．innerHTML,不但打印文本内容，连标签间的标签也打印出来。高版本浏览器会将格式原样输出

设置内容区别：

1.innerText 设置内容时，无法设置标签，会将标签进行转义。

2.innerHtml设置内容时，能将里面的标签渲染成正常的html标签 。

小结：

(1)innerHTML所有的浏览器都支持，不但获取文本，还获取标签间的标签。

(2)innerText是老版本的火狐浏览器不支持，只支持用textContent；

(3)textContent是Ie8之前的浏览器不支持，只支持innerText；

动态创建元素

凡是通过js来设置页面的标签都可以称为动态的创建页面元素。

1.document.write() 几乎是很少用的

2.InnerHTML：直接在里面写html代码生成标签

3.document.creatElement(标签名)：创建一对标签

获取样式

obj.style：只能获取html标签中的style属性中的值(style="...")

获取定义在

.currentStyle(IE外部css文件)

.getComputedStyle (FF,只读，不能设置)

var btn=document.getElementById("button")

btn.onclick = function() {

var oStyle = btn.currentStyle? btn.currentStyle : getComputedStyle(btn, null);

/*alert(oStyle.height);*/

alert(oStyle['height']);

};

JS事件

注册事件

1.行内式注册事件(在标签内)

2.内嵌式注册事件

事件：

1.onfocus

2.onblur

3.onchange

4.onmouseover

5.onload

6.onkeyup

btn.onclick = function(e){

// 通过事件对象可以获得一些与事件相关的一些信息

// 事件对象里面存储了一些与事件相关的属性或是方法

// e.clientX pageX screenX

// IE8之前是不支持event window.event IE8也有事件对象，只不过是存在window属性里面，必须通过Window.event才能拿到

e = e || window.event;

console.log(e)

}