JavaScript_00000_00001

wisdom4

已于 2024-02-16 18:01:05 修改

阅读量113

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

于 2022-10-19 16:29:15 首次发布

本文链接：https://blog.csdn.net/wisdom1a/article/details/125840802

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

DOM
- 事件

DOM

DOM(Document Object Model)，文档对象模型。

节点的属性：

	ndoeName	nodeType	nodeValue
文档节点	#document	9	null
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容

document.getElementById() 根据id属性值获取一个元素节点对象。
元素节点.firstChild; 获取元素节点的第一个子节点，一般为文本节点。
元素节点.getAttributeNode(“属性名”);

获取元素节点：通过document对象调用。

getElementById() 通过id属性获取一个元素节点对象。
getElementsByTagName() 通过标签名获取一组元素节点对象。
getElementsByName() 通过name属性获取一组元素节点对象。

获取元素节点的子节点：通过具体的元素节点调用。

getElementsByTagName() 方法，返回当前节点的指定标签名后代节点。
childNodes 属性，表示当前节点的所有子节点。
firstChild 属性，表示当前节点的第一个子节点。
firstElementChild 属性，表示当前节点的第一个子元素。
lastChild 属性，表示当前节点的最后一个子节点。
lastElementChild 属性，表示当前节点的最后一个子元素。

获取父节点和兄弟节点：通过具体的节点调用。

parentNode 属性，表示当前节点的父节点。
previousSibling 属性，表示当前节点的前一个兄弟节点。
previousElementSibling 属性，表示当前节点的前一个兄弟元素。
nextSibling 属性，表示当前节点的后一个兄弟节点。

元素节点的属性获取：元素对象.属性名
例：
element.value
element.id
element.className

设置元素对象.属性名=新值
例：
element.value = “hello”
element.id = “id01”
element.className = “newClass”

其他属性

nodeValue 文本节点可以通过nodeValue属性获取和设置文本节点的内容。
innerHTML 元素节点通过该属性获取和设置标签内部的html代码。

使用CSS选择器进行查询

querySelector()
querySelectorAll()
这两个方法都是用document对象来调用，两个方法使用相同，都是传递一个选择器字符串作为参数，方法会自动根据选择器字符串去网页中查找元素。不同的地方是querySelector()只会返回找到的第一个元素，而querySelectorAll()会返回所有符合条件的元素。

节点的修改
• 这里的修改我们主要指对元素节点的操作。
• 创建节点
– document.createElement(标签名)
• 删除节点
– 父节点.removeChild(子节点)
• 替换节点
– 父节点.replaceChild(新节点 , 旧节点)
• 插入节点
– 父节点.appendChild(子节点)
– 父节点.insertBefore(新节点 , 旧节点)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	<body>
		
		<button id="btn">我是一个按钮</button>
		
		<script type="text/javascript">
		
			console.log(document);
			
			//获取到button对象
			var btn = document.getElementById("btn");
			
			//修改按钮上显示的文字
			btn.innerHTML = "I'm Button";
			
		</script>
		
	</body>
	
</html>

事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	<body>
		
		<button id="btn" onmousemove="alert('宋江');">我是一个按钮</button>
		
		<button id="btn1">我是一个按钮</button>
		
		<script type="text/javascript">
			
			//获取按钮对象
			var btn = document.getElementById("btn1");
			
			btn.onclick = function(){
				
				alert("卢俊义");
				
			};
			
			
		</script>
		
	</body>
	
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script type="text/javascript">
		
			window.onload = function(){
				
				var btn = document.getElementById("btn");
				
				btn.onclick = function(){
					alert("hi");
				};
				
			};
			
		</script>
		
	</head>
	
	<body>
		
		<button id="btn">点我一下</button>
	
	</body>
	
</html>