DOM节点详解

Haiy_CN

已于 2022-09-01 19:42:29 修改

阅读量136

点赞数 1

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

于 2022-08-15 16:36:03 首次发布

本文链接：https://blog.youkuaiyun.com/m0_72687687/article/details/126348855

版权

Javascript 专栏收录该内容

8 篇文章

订阅专栏

这篇博客详细介绍了DOM（文档对象模型）的各种操作，包括选择器如getElementById、getElementsByTagName等，内容操作如innerText、innerHTML，样式操作如style和classList，以及层次节点、子元素获取和节点操作如创建、追加、删除、替换等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM：

document object model 文档对象模型
DOM选择器:
getElementById：通过Id获取
   getElementsByTagName:通过标签名称获取,返回类数组
   getElementsByClassName:通过类名称获取,返回类数组
   getElementsByName:通过name属性名称获取,返回类数组
   querySelector:返回符合条件的第一个元素
   querySelectorAll:返回符合条件的所有元素
DOM内容操作：
tag.innerText
tag.innerHTML
tag.value 表单操作
类数组转换为数组: Array.from(类数组)
样式操作:
tag.style.样式名="样式值"
tag.className="类名"
tag.classList.add("类名") /tag.classList.remove("类名")
层次节点:
获取子元素:tag.children||tag.childNodes
获取子元素长度:
父元素.childElementCount
子元素数组.length
获取第一个子元素：
tag.firstElementChild||tag.firstChild
获取最后一个子元素：
tag.lastElementChild||tag.lastChild;
获取前一个同级元素：
tag.previousElementSibling||tag.previousSibling
获取下一个同级元素：
tag.nextElementSibling||tag.nextSibling;
节点操作:
创建节点: document.creatElement("")
追加节点:document.appendChild("")

节点追加案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select>
			<option value="410000">河南省</option>
			<option value="440000">广东省</option>
		</select>
		<script>
			var _select = document.querySelector("select");
			_select.onchange = function() {
				//获取当前选中的option的valu
				var val = _select.value;
				console.log(val);
				//获取档期阿布选中的option的下标
				var selectIndex = _select.selectedIndex;
				console.log(selectIndex);
				//获取select下所有options
				var options = _select.options;

				//获取当前选中的option的文本值
				console.log(options[selectIndex].innerText);
			}
			
			//追加节点
			var _option=document.createElement("option");
			_option.value="460000";
			_option.innerText="海南省";
			_select.appendChild(_option);
			
			//新方式追加节点new Option("text","value",true,"是否选中")
			var _option2=new Option("山东省","370000",true,"true");
			var _option3=new Option("湖北省","420000",true,"true");
			// //追加
			_select.add(_option3,null);
			//插入
			_select.add(_option2,_select.firstElementChild);
		</script>
	</body>
</html>

效果：

插入节点:document.insertBefore("","")
删除节点:
tag.remove()
父元素.removeChild(tag)
替换节点:
父元素.replaChild(替换，被替换)
获取节点名称：tag.nodeName
获取节点类型：tag.nodeType //元素节点 1
设置属性： tag.setAttribute(属性名，属性值) 自定义属性
tag.属性名=属性值现有属性
获取属性: tag.getAttribute(属性名)