操作DOM

最新推荐文章于 2024-09-15 11:12:32 发布

白菜4220

最新推荐文章于 2024-09-15 11:12:32 发布

阅读量483

点赞数

分类专栏： H5+CSS3

本文链接：https://blog.csdn.net/qq_39263663/article/details/80717826

版权

H5+CSS3 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

DOM(文档对象模型)是W3C指定的一套技术规范，用来描述JavaScript脚本怎样与HTML或XML文档进行交互的Web 标准。DOM规定了一系列标准接口，允许开发人员通过标准方式访问文档结构，操作网页内容，控制样式和行为等。

文章要点：

了解DOM
使用JavaScript操作结点
使用JavaScript操作元素节点
使用JavaScript操作文本和属性结点
使用JavaScript操作文档结点

1，DOM基础

DOM级：

第一级别： core

第二级： HTML XML Range Events Traversal Views StyleSheets

第三级： Events(MutationEvents，HTMLEvents，UIEvents)，Views(UIEvents，css)

2，使用结点

2.1 节点类型

DOM规定：整个文档是一个文档结点，每个标签是一个元素节点，元素包含的文本是文本节点，元素的属性是一个属性节点，注释属于注释节点，如此等等。每个节点都有一个nodeType属性。

例子：使用nodeType检索当前文档中包含元素的个数。

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>DOM</h1>
	<script>
		function count(n){
			var num = 0;
			if(n.nodeType == 1)
				num++;
			var son = n.childNodes;
			for(var i = 0;i<son.length;i++){
				num+=count(son[i]);
			}
			return num;
		}
		console.log(count(document));
	</script>
	</body>
</html>

2.2 节点名称和值

使用结点的nodeName和nodeValue

		var node = document.getElementsByTagName("h1")[0];
		if(node.nodeType == 1)
			var value = node.nodeName;
		console.log(value);

2.3 节点关系

DOM把文档视为一种树结构。节点之间的关系包括：上下级别的父子关系，相邻级别的兄弟关系。

2.4 访问节点

ownerDocument parentNode childNodes firstChild lastChild nextSibling previousSibling

2.5 操作结点

appendChild() cloneNode() hasChildNodes() insertBefore() normalize() removeChild() replaceChild()

3，使用文档结点

在DOM中，Document类型表示文档结点，HTMLDocument是Document的子类，document对象是HTMLDocument的实例，它表示HTML文档。同时，document对象又是window对象的属性，因此可以在全局作用域中直接访问document对象。document节点具有如下特征：

nodeType值为9
nodeName值为"#document"
nodeValue值为null
parentNode值为null
ownerDocument值为null
其子节点可能是:DocumentType, Element ProcessingInstruction 或Comment

3.1 访问文档子结点

documentElement childNodes

var html = document.documtneElement;
var html = document.childNodes[0];

3.2 访问文档信息

HTMLDocument的实例对象document包含很多属性，用来访问文档信息，简单说明如下。

title：设置或返回title标签中的文本信息
lastModified：返回文档最后被修改的日期和时间
URL：返回当前文档的完整URL，即地址栏中显示的地址信息
domain：返回当前文档的域名
referrer：返回链接到当前页面的那个页面的URL。

3.3 访问文档元素

document对象包含多个访问文档内元素的方法，简单说明如下：

getElementById()：返回指定id属性值的元素
getElementsByTagName()：返回指定标签名称的元素节点
getElementsByName()：返回所有指定名称(name属性值)的元素节点。该方法多用于表单结构中，用于获取单选按钮组或复选框组

3.4 访问文档集合

除了属性和方法，document对象还定义了一些特殊的集合，这些集合都是HTMLCollection对象，为访问文档常用对象提供了快捷方式如下：

document.anchors：返回文档中所有Anchor对象，即所有带有name特性的<a>标签
document.forms：返回文档中所有Form对象，与document.getElementByTagName("form")得到的结果相同
document.images
document.links：返回文档中所有Area和Link对象，即所有带href特性的<a>标签

3.5 使用HTML5 Doucment

1，readyState

loading：正在加载文档
complete：已经加载完文档

功能类似onload事件处理程序，表示文档已经加载完毕

if(document.readyState == "complete"){
    //执行操作
}

2，compatMode

document.compatMode返回文档的渲染模式，标准模式("CSS1Compat") 怪异模式("BackCompat")

3，head

引用文档的head元素

var head = document.head||document.getElementsByTagName("head")[0];

4,charset

4，使用元素节点

Element类型是最常用的节点类型，它具有以下特征：

nodeType值为1
nodeName为元素的标签名称，也可以使用tagName属性。在HTML中，返回标签名始终为大写，在脚本中比较需要全部小写化:if(element.tagName.toLowerCase() == "div"){}
nodeValue值为null

所有HTML元素都是HTMLElement类型或者其子类型的实例，HTMLElement又是Element的子类，在继承Element类型时添加了一些属性，添加的这些属性分别对应每个HTML元素下列标准特性。

id title lang dir className

4.1 访问元素

getElementById() getElementsByTagName()

4.2 遍历元素

parentNode nextSibling previousSibling firstChild 和lastChild

4.3 创建元素

createElement()

var p = document.createElement("p");
document.body.appendChild(p);

4.4 复制节点

cloneNode()方法可以创建一个节点的副本，

4.5 插入节点

appendChild() insertBefore()

4.6 删除节点

removeChild()

<div id="red">
	<h1>xiaobaicai</h1>
	<h1>xiaohuihui</h1>
</div>
<script>
	var red = document.getElementById("red");
	var h1 = document.getElementsByTagName("h1")[0];
	red.removeChild(h1);
</script>

4.7 替换节点

replaceChild()

nodeObject.replaceChild(new_node,old_node);

4.8 获取焦点元素

HTML5新增DOM焦点管理功能，使用document.activeElement属性可以引用DOM中当前获得了脚垫的元素，元素获取焦点的方式包括：页面加载，用户输入，（如按tab键）和在脚本中调用focus()方法。

<input type="text">
<input type="text">
<input type="text">
<script>
var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
	inputs[i].onfocus = function(e){
		document.activeElement.style.backgroundColor = "yellow";
	}
	inputs[i].onblur = function(e){
		this.style.backgroundColor = "#fff";
	}
}
</script>

4.9 检测包含节点

contains()

5，使用文本节点

文本节点由Text类型表示，包含纯文本内容，或转义后的HTML字符，但不能包含HTML代码。Text节点具有以下特征:

nodeType值为3
nodeName值为"#text"
nodeValue值为节点所包含的文本

5.1 访问文本节点

利用innerText获取文本内容

<p>hello</p>
<script>
var text = document.getElementsByTagName("p")[0];
alert(text.innerText);
</script>

5.2 创建文本节点

document.createTextNode(data)

<script>
var element = document.createElement("div");
element.className = "red";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);
</script>

5.3 操作文本节点

appendData(string) deleteData(start,length) insertData(start,length) replaceData(start,length,string) splitText(offset) substringData(start,length)

5.4 读取HTML字符串

使用innerHTML

<p id="hi">hello</p>
<script>
var hi = document.getElementById("hi");
alert(hi.innerHTML);
</script>

<div id="hi">
<p>hello</p>
</div>
<script>
var hi = document.getElementById("hi");
alert(hi.innerHTML);
</script>

5.5 插入HTML字符串

innerHTML属性

innerHTML属性可以修改元素中的内容

<div id="hi">
<p>hello</p>
</div>
<script>
var hi = document.getElementById("hi");
hi.innerHTML = "helloworld";
</script>

5.6 替换HTML字符串

outerHTML

6，使用文档片段节点

7，使用属性节点

7.1 访问属性节点

setAttribute()

<img id="img1" src="" />
<script>
var img=docyment.getElementById("img1");
img.setAttribute("src","http://xiaobaicai.com");
</script>

7.2 读取属性值

getAttribute()

<img id="img1" src="" />
<script>
var img=document.getElementById("img1");
alert(img.getAttribute("id"));
</script>

7.3 设置属性值

setAttribute()

7.4 删除属性

removeAttribute()

7.5 使用类选择器

document.getElementsByClassName()

7.6 自定义属性

自定义属性需要使用data- 作为前缀，可以通过dataset属性访问自定义属性

<div id="box" data-myname="xiaobaicai">helloworld</div>
<script>
var div = document.getElementById("box");
alert(div.dataset.myname);
</script>

白菜4220

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录