JavaScript（十一）Dom

Dom(Document object module)

1.获取dom对象的方法

正常用的方法 推荐　　
getElementById()//通过id选择唯一的dom
getElementsByClassName()//通过class选出一组
getElementsByTagName()//通过标签名选出一组
getElementsByName()//通过name属性选出一组

括号里可以直接写 css的选择器
IE7以下版本没有　　而且和上面的几种相比会慢很多 
而且这种获取后就是静态的了  所以很少用
querySelector()　　//多个同样的元素只选出第一个
querySelectorAll()//选出满足条件的一组

2.通过NodeType判断Dom节点类型(dom.attraibute[0].nodetype)

元素节点——1

属性节点——2

文本节点——3

注释节点——8

document——9

DocumentFragment——11

3.节点的属性

nodeName——元素的标签名 只读

nodeValue——文本、注释节点有  且可读写 

nodeType——区分不同节点

attribute——存了这个元素所有属性节点的集合

4.节点的方法

Node.hasChildNodes()　　返回true false 文本节点也算

5.遍历节点树

parentNode 　　父节点   (html标签外面还有  最外面的是  #document)

childsNodes　　子节点们　　chaildNodes.length　　（包括全部节点类型）

firstChild　　　   第一个子节点

lastChild　　　　最后一个子节点

nextSibling　　　下一个兄弟节点

previousSibling　前一个兄弟节点

6.基于元素节点树的遍历(很久之前做的笔记 下面这些IE不兼容  如今试了一下都可以的)

parentElement　　返回当前元素的父元素节点

children　　　　　返回当前元素的元素子节点

childElementCount 返回子元素节点的个数

firstElementChild　　返回第一个元素节点

lastElementchild　　返回最后一个元素节点

nestElementSibling\previousElementSibling　　返回 后一个\前一个元素节点

7.Dom结构树

8.Dom的基本操作

　　添加节点

　　createElement();

　　createTextNode()

　　createComment()

var box = document.createElement('div')

　　创建事件

document.createEvent('dong');

　   设置节点的样式

box.style.width=100+'px';
box.style.height=100+'px';
box.style.background = 'blue';

　　　把添加的节点插入元素

　　insertBefore()　　父级.insertBefor(新,某个子元素);

　　removeChild()　　删除子元素节点

　　replaceChild()　　替换子元素节点

document.body.appendchild(box);

　　获取元素节点的样式

　　getComputedStyle()　　//获取计算样式

　　style.attr　　　　　　　//行间样式   可读写

var oBox = document.getElementById('only');
var oWidth = getComputedStyle(oBox).width;

　　元素节点的属性

　　 getAttribute() 获取元素节点的某个属性

　　  setAttribute()设置元素节点的某个属性

　　  hasAttribute()判断是否有某个属性

oBox.setAttribute('class','box');
console.log(oBox.getAttribute('class'));

　　设置 class 还可以使用  dom.className = ''　　多个class 就用字符串拼接