欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

DOM：Document Object Model实例讲解

程序员文章站 2022-06-30 17:06:32
DOM：Document Object Model document对象是DOM核心对象 作用：对html中的内容、属性、样式进行操作 节点树中节点之间的关系：父子、兄弟...

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);

上一篇： 1+1+1+1大于4？荣耀Magic3系列多主摄技术开宗立派：给iPhone13点颜色看看

下一篇： 升Windows 11后必做的一件事：性能可提升28%

推荐阅读