JS——文档对象模型(DOM)

最新推荐文章于 2022-09-13 10:53:54 发布

Hydra.

最新推荐文章于 2022-09-13 10:53:54 发布

阅读量341

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_40657585/article/details/101164956

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

DOM介绍

DOM（Document Object Model）即文档对象模型，针对HTML和XML的API（应用程序接口）。
它描绘了一个层次化的节点数，运行开发人员添加、移除和修改页面的某一部分。

节点树

节点种类

元素节点
文本节点
属性节点

<div title="属性节点">测试Div<div>

元素节点方法

方法	说明
getElementById(id)	获取特定id元素的结点
getElementsByName(name)	获取特定元素名name的节点列表
getElementsByTagName(标签名)	根据标签名获取相同元素的节点列表
getAttribute(‘str’)	获取名为str的属性值
setAttribute(属性名,属性值)	表示设置属性名=属性值
removeAttribute(属性名)	表示删除属性名对应的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function getAttr(){
				return document.getElementById("mydiv").getAttribute("name");
			}
			function setAttr(){
				document.getElementById("mydiv").setAttribute("style","height: 200px;border: 1px blue solid;")
			}
			function removeAttr(){
				document.getElementById("mydiv").removeAttribute("style");
			}
		</script>
	</head>
	<body>
		<div id="mydiv" name="fstdiv">
			
		</div>
		<input type="button" value="获取属性结点" onclick="alert(getAttr());"/>
		<input type="button" value="设置结点的属性" onclick="setAttr();"/>
		<input type="button" value="删除节点的样式属性" onclick="removeAttr();"/>
	</body>
</html>

层次节点的属性

事例：alert(box.childNodes[0]);//获取第一个子节点对象

属性	说明
childNodes	当前元素节点的所有子节点（包括文本节点）的集合
children	当前元素节点的所有子元素节点的集合
firstChild	第一个子节点（包含文本节点）
firstElementChild	第一个子元素节点
lastChild	最后一个子节点
parentNode	父节点
previousSibling	当前节点的前一个同级节点
nextSibling	当前节点的下一个同级节点
attributes	当前节点的所有属性节点的集合

节点操作的常用方法

方法	说明
write()	把任意字符串插入到文档中
createElement()	创建一个元素节点
appendChild()	将新节点追加到子节点列表的末尾
createeTextNode()	创建一个文件节点
insertBefore()	将新节点插入在前面
replaceChild	将新节点替换纠结点
cloneNode()	复制节点
removeChild()	移除节点

1.write()方法

document.write('<p>这是一个段落！</p>')';//输出任意字符串

2.createElement()方法

document.createElement('p');//创建一个元素节点

3.appendChild(node)

将node节点追加到本节点的子节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>dom的节点操作</title>
	</head>
	<body>
		<div id="mydiv"><span>hello</span></div>
	</body>
	<script>
		var curNode = document.getElementById("mydiv");
		document.write(curNode.id);
		document.write("<br />");
		document.write(curNode.textContent);//纯文本，不输出标签
		
		var pNode = document.createElement("p");
		pNode.value = "这是元素标签p里的内容";
		document.write("<br />"+pNode.value);
		
		curNode.appendChild(pNode);
		document.write(curNode.childNodes[1].value);
	</script>
</html>

4.createTextNode()

创建文本节点

var textNode = document.createTextNode("新建文本节点");
document.write("<br />"+textNode.textContent);

5.insertBefore(newNode,node) 将节点newNode插入到节点node之前。

把节点创建到指定节点的前面

curNode.parentNode.insertBefore(pNode,curNode);
document.write("<br />"+curNode.previousSibling.value);

6.replaceChild(newNode,node)

将子节点newNode替换原来的子节点node

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>replaceChild</title>
	</head>

	<body>
		<ul id="myList"><li name="qwe">学习</li><li>money</li><li>movie</li></ul>//中间不能有空格和回车，否则报错！！！
		<p id="demo">不喜欢学习没关系，点击替换</p>
		<button onclick="myFunction()">试一下</button>
	</body>
	<script>
		function myFunction() {
			var textnode = document.createTextNode("study");
			var item = document.getElementById("myList").childNodes[0];
			console.log(item);
			item.replaceChild(textnode, item.childNodes[0]);
		}
	</script>

</html>

马格即，心态炸了，从来没见过多打个回车，代码就报错了。

7.cloneNode()复制节点

true 深拷贝 false浅拷贝

8.removeChild()移除节点

DOM的事件处理

焦点事件
- onFocus（）获取焦点
- onBlur（）失去焦点
onLoad( )页面内容加载完成
鼠标事件
- onclick（）鼠标点击时
- onMouseOver（）鼠标移入某元素的范围内
- onMouseOut( ) 鼠标移出某元素的范围外
键盘事件
- onKeyPress（）键盘上某键被按下并释放
- onKeyDown（）键盘上按下某键
- onKeyUp（）键盘上释放某键
表单元素
- 文本的onchange() 跟之前的文本相比，不一致的时候，触发事件
- form的onsubmit()，写在form表单的开始标签中，onsubmit()的返回值必须是boolean型，该方法在点击了submit按钮后， form表单被提交前执行，如果返回值为true，则继续提交表单，如果返回为false则终止表单的提交。

Hydra.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS——文档对象模型(DOM)

DOM介绍DOM（Document Object Model）即文档对象模型，针对HTML和XML的API（应用程序接口）。它描绘了一个层次化的节点数，运行开发人员添加、移除和修改页面的某一部分。节点树节点种类元素节点文本节点属性节点<div title="属性节点">测试Div<div>元素节点方法方法说明 getEle...
复制链接

扫一扫