DOM（一）

DOM：Document  Object  Model

document对象是DOM核心对象

作用：对html中的内容、属性、样式进行操作

节点树中节点之间的关系：父子、兄弟

DOM常用属性

1、title属性：返回或设置当前文档的标题

2、all：返回所有元素的集合

3、forms：返回文档中所有form对象的引用

通过集合来访问相应的对象：

    1、通过下标的方式

    2、通过name的方式

DOM的查询方法

1、document.getElementById(id);       //返回拥有指定id的（第一个）对象的引用

2、document.getElementsByTagName(tagName);       //返回指定标签名的集合，就算找到的标签名只有一个，返回的也是一个集合

注：上面两个方法没有兼容性问题

3、document.getElementsByName(name);       //返回带有指定name指定名称的对象集合（有兼容性问题）

注：document.getElementsByName()因为兼容性问题，主要适用于表单

4、document.write();      将内容打印在页面中

5、document.getElementsByClassName(className);       //返回带有指定className指定名称的对象的集合。有兼容问题

function byClassName(sClassName){
	if(document.getElementsByName){//判断在没有兼容性下的直接输出
		return document.getElementsByClassName(sClassName);
	}else{
		//获取所有元素
		var tag = document.getElementsByTagName('*');//*表示通配符
		var result = [];
		for(var i = 0 ; i < tag.length; i++){//遍历获取的所有元素
			if(tag[i].className == sClassName){
				result.push(tag[i]);
			}
		}
		return result;
	}
}
console.log(byClassName('pink').length);

操作内容

1、innerHTML：用来设置或获取对象起始和结束标签内（例如div框架，它只会获取div里面的内容，而不会获取div）的内容(识别html标签) 

2.innerText：用来设置或获取对象起始和结束标签内的内容 (只是获取文字内容)(适用于IE，最新版火狐已支持)。

  textContent用来设置或获取对象起始和结束标签内的内容 (只是获取文字内容)(适用于火狐，IE8及其以下不支持)。

3.outerHTML  用来设置或获取包括本对象在内的起始和结束标签内（例如div框架，不仅会获取div里面的内容，也会获取div自身的内容）的内容(识别html标签) 。

4.outerText  用来设置或获取包括本对象在内的起始和结束标签内的内容(只是获取文字内容)（火狐不支持）。

区别：

  
  
  
  
       
　　   
　　   
　　
   
　　
innerHTML效果.
   
　　
innerText效果.
   
　　
outerHTML效果.
   
　　
outerText效果.
   
　　
   
　　   
　　  

操作属性

1、直接操作

         对象.属性     //获取属性，某些浏览器有兼容性问题，例如name（如果不是标签特有的属性，在chrome/火狐访问不到，在IE8以其以下浏览器能获取得到）

         对象.属性 = 值       //设置、添加属性（属性值）

2、通过方法

        getAttribute("属性")              //获取给定的属性的值

        setAttribute("属性","值")             //设置或是添加属性

        removeAttribute("属性")           //删除属性

操作样式

1、行内样式

        对象.style.属性         //获取样式属性

        对象.style.属性 = 值         //设置、添加样式属性

注：遇到属性是‘-’连接的，要将‘-’去掉并将后面的首字母大写

例：background-color      就是       backgroundColor

2、行内样式和css层叠样式通用的方式

        对象.currentStyle.属性

DOM增删改查

一、创建节点（注释和文档节点一般不需要创建）

      1、创建元素节点

             document.createElement("元素标签名")；

      2、创建属性节点

              var oAttr = document.createAttribute("属性名")；（不常用）

              oAttr.value = "attr-name";

  

              oDiv.setAttributeNode(oAttr);

              对象.属性 = 属性值（常用）

      3、创建文本节点

              对象.innerHTML = "";

              var oText = document.createTextNode("文本")；           //文本中的HTML标签实体化

              oDiv.appendChild(oText);

二、追加到页面当中

          父对象.appendChild(newNode)       //插入到父对象的最后

                         例：oList.appendChild(oLi);

          父对象.inserBefore(newNode,existsNode)          //插入到什么对象之前

                        例：oList.insertBefore(oLi, aLi[0]);

三、修改（替换）节点

          父对象.replaceChild(newNode,existsNode)        //前面的替换后面的

                         例：oList.replaceChild(oLi, aLi[0]);

四、删除节点

           父元素.removeChild(oldNode);

           如果确定要删除节点，最好也清空内存     对象 = null；

五、表格操作

          // 获取tBody
var tBody = oTable.tBodies[0];
// 获取tr
// var oTr = tBody.rows[2];
// 获取td
// var oTd = oTr.cells[1];
// 读取
// console.log(oTd.innerHTML);
// 修改
// oTd.innerHTML = '宋second';
// 添加新的一行
// var oNewTr = tBody.insertRow(5);
// // 创建四列
// var oNewTd = oNewTr.insertCell(0);
// oNewTd.innerHTML = 5;
// var oNewTd = oNewTr.insertCell(1);
// oNewTd.innerHTML = '宋老五';
// var oNewTd = oNewTr.insertCell(2);
// oNewTd.innerHTML = 0;
// var oNewTd = oNewTr.insertCell(3);
// oNewTd.innerHTML = '女';
// 删除一行
var oDeleteTr = tBody.rows[tBody.rows.length - 1];
tBody.removeChild(oDeleteTr);