当前位置： 移动技术网 > IT编程>网页制作>CSS > DOM：Document Object Model实例讲解

DOM：Document Object Model实例讲解

2018年01月27日  | 移动技术网IT编程  | 我要评论

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：用来设置或获取对象起始和结束标签内（例如p框架，它只会获取p里面的内容，而不会获取p）的内容(识别html标签)

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

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

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

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

区别： 
<!DOCTYPE html>    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
<title>innerHTML、outerHTML和innerText、outerHTML的区别</title>    
    <script type="text/javascript">     
　　//.innerHTML    
　　function innerHTMLDemo()    
　　{     
　　　test_id1.innerHTML="<i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i>";     
　　}     
　　//.innerText    
　　function innerTextDemo()    
　　{     
　　　test_id2.innerText="<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>";     
　　}     
　　//.outerHTML    
　　function outerHTMLDemo()    
　　{     
　　　test_id3.outerHTML="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";     
　　}    
　　//.outerText    
　　function outerTextDemo()    
　　{     
　　　test_id4.outerText="<br></br><i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>";     
　　}    
　　</script>     
　　</head>     
　　<body>     
　　<ul>     
　　<li id="test_id1" onclick="innerHTMLDemo()">innerHTML效果.</li>     
　　<li id="test_id2" onclick="innerTextDemo()">innerText效果.</li>     
　　<li id="test_id3" onclick="outerHTMLDemo()">outerHTML效果.</li>     
　　<li id="test_id4" onclick="outerTextDemo()">outerText效果.</li>     
　　</ul>     
　　</body>     
　　</html>
操作属性
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);

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网