DOM--节点操作

好久都没写博客啦 今天把笔记都搬上来 嘻嘻 

1.排他思想

//tab栏切换

2.dom节点

js有三部分组成

ECMAscript DOM BOM

核心（ECMAScript）欧洲计算机制造商协会

描述了JS的语法和基本对象。

文档对象模型（DOM）

处理网页内容的方法和接口

浏览器对象模型（BOM）

与浏览器交互的方法和接口

window.alert() 很大的兼容问题

1、DOM 定义

DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。

目的其实就是为了能让js操作html元素而制定的一个规范。

DOM 树 ：将网页划分为这样的结构

2、节点

标签 标记 元素 节点

由结构图中我们可以看到，整个文档就是一个文档节点。

而每一个HMTL标签都是一个元素节点。

标签中的文字则是文字节点。

标签的属性是属性节点。

一切都是节点……

3、访问节点

我们学过几个访问节点 ：

getElementById() id 访问节点

getElementsByTagName() 标签访问节点

getElementsByClassName() 类名 有兼容性问题

主流浏览器支持 ie 67 8 不认识

怎么办？ 我们自己封装自己的类 。

4、封装自己class类 笔试题 //解决兼容性问题

原理 : (核心)

我们要取出所有的盒子，利用遍历的方法 ，通过每一个盒子的className 来判断。如果相等就留下。

5、判断真假

6、父节点

父 ： parentNode

<script>

varx =document.getElementById("x");

x.onclick= function () {

//父节点关掉的是它的父亲

this.parentNode.style.display= "none";

}

</script>

7、兄弟节点

nextSibling 下一个兄弟 ----ie 678

nextElementSibling -----正常浏览器

previousSibling 上一个兄弟 ----ie678

previousElementSibling -----正常浏览器

我们想要兼容 我们可以写 || 或者

8、孩子节点

1、

firstChild 第一个孩子 ie678

firstElementChild 第一个孩子 正常浏览器

兼容性写法

var one.firstElementChild || one.firstChild;

lastChild

lastElementChild 少用

2、

childNodes 选出全部的孩子

childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点

火狐 谷歌等高本版会把换行也看做是子节点

利用 nodeType == 1 时才是元素节点 来获取元素节点 标签 元素

children 重要 选取所有的孩子 （只有元素节点）

ie 678 注释节点也会被识别成孩子 这个要避免开。

设置节点属性

     1）获取节点属性

           getAttribute(属性)      获取属性     

           通过这个方法，可以得到 某些元素的  某些属性 。

      2）设置节点属性

            setAttribute(“属性”,”值”);

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

      alert(box.getAttribute("title"));

     box.setAttribute("class","two");

     box.removeAttribute("title”);

节点操作--案例：微博发布

思路：1：获取对象，创建一个ul放在盒子中  

           2：判断输入的内容，是否为空，空就做alert提示

           3：判断是第一次输入就把内容放在ul后面，非第一次就放在元素的前面

           4：做a标签的点击删除