html dom堆叠,DOM

解析过程：

HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。结构如下图：

常用的DOM方法：

操作节点，必须首先找到该元素。有三种方法来做这件事：

通过id 找到HTML 元素

document.getElementById("demo");

通过标签名找到HTML 元素

document.getElementsByTagName("div");

通过类名找到HTML 元素

document.getElementsByClassName("a");

DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。如父节点，子节点，兄弟节点

设置属性：

//两种方式不能交换使用，赋值和获取值必须使用用一种方法。

var div = document.getElementById("box");

//元素节点.属性(元素节点[属性]):绑定的属性值不会出现在标签上。

div.aaaa = "1111";

console.log(div.aaaa);

//get/set/removeAttribut: 绑定的属性值会出现在标签上。

div.setAttribute("bbbb","2222");

console.log(div.getAttribute("aaaa"));

console.log(div.getAttribute("bbbb"));

打印结果：

1111

null

2222

其他的用法:

innerHTML:    testDiv.innerHTML  =

这是一段文字

 比较粗放，可以把一段html内容插入标签，一旦使用了它它的全部内容就会被替换。

createElement:创建一个新的元素， 语法：document.createElement(nodename),使用了这个方法但它不是dom节点树的组成部分，只是文档碎片。

appendChild: 语法parent.appendChild(child) 插入文档树中

createTextNode: 创建文本节点，把文本节点追加到元素节点上,语法 var text  = document.createTextNode("hello world");child appendChild(text); 这样就能看到文本了

insertBefore(new,target) 在现有的元素之前插入新的元素，但是很遗憾没有插入之后的

node(nodeChild/nodetype/nodename/nodevalue)

nodeName 属性含有某个节点的名称。

* 元素节点的 nodeName 是标签名称

*属性节点的 nodeName 是属性名称

* 文本节点的 nodeName 永远是 #text

* 文档节点的 nodeName 永远是 #document

nodeValue

对于文本节点，nodeValue 属性包含文本。

对于属性节点，nodeValue属性包含属性值。

nodeValue属性对于文档节点和元素节点是不可用的。

nodeType 属性可返回节点的类型。

最重要的节点类型是：

元素类型 节点类型

元素element 1

属性attr 2

文本text 3

注释comments 8

文档document 9

判断字符串已『xx』开头:

var str = "abcdefg";

//判断str是否以a为开头？(给定字符串然后他的索引值为0)

var num = str.indexOf("ab");

//只有返回值为0，那么字符串才是以参数为开头  ,如果查询不到，返回值为-1；

alert(num);

zIndex

属性设置元素的堆叠顺序。该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

Default z-index is 0. Z-index -1 has lower priority.

Object.style.zIndex=auto|number

attachEvent与addEventListener区别

obj.attachEvent("on"+e,fun);//测试浏览器，发现：firefox、chrome、IE9、IE10、IE11、safari、opera都不兼容,IE7、IE8兼容，

obj.addEventListener(e,fun,false);//测试浏览器，发现：firefox、chrome、IE、safari、opera都兼容，IE7、IE8不兼容，