DOM（一）

最新推荐文章于 2024-03-28 23:55:28 发布

宇宙超级美少女

最新推荐文章于 2024-03-28 23:55:28 发布

阅读量325

点赞数 1

分类专栏： DOM

本文链接：https://blog.csdn.net/kobe081959/article/details/79161195

版权

DOM 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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 用来设置或获取包括本对象在内的起始和结束标签内的内容(只是获取文字内容)（火狐不支持）。

区别：

<!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" οnclick="innerHTMLDemo()">innerHTML效果.</li>   
　　<li id="test_id2" οnclick="innerTextDemo()">innerText效果.</li>   
　　<li id="test_id3" οnclick="outerHTMLDemo()">outerHTML效果.</li>   
　　<li id="test_id4" οnclick="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
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM（一）

DOM：Document Object Modeldocument对象是DOM核心对象作用：对html中的内容、属性、样式进行操作节点树中节点之间的关系：父子、兄弟DOM常用属性1、title属性：返回或设置当前文档的标题2、all：返回所有元素的集合3、forms：返回文档中所有form对象的引用通过集合来访问相应的对象： 1、通过下标的方式
复制链接

扫一扫

专栏目录