DOM初识、三种节点、Document对象、Element对象、Attribute对象、ul动态添加li、获取属性、统计各种节点、获取多选按钮值、设置div颜色

本文介绍了DOM的基本概念，包括三种节点类型：元素节点、文本节点和属性节点。详细讲解了Document对象、Element对象和Attribute对象的使用，并通过示例展示了如何动态添加li到ul，获取text框的最大长度属性，统计div节点数量，获取多选按钮的选中值以及改变div颜色等操作。

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

BOM介绍

列：获取text框的值最大长度（获取属性）

列：统计div节点个数、获去div元素节点和文本节点

列：获取多选按钮选中的值

列：设置div颜色

BOM介绍

BOM-JavaScript是运行在浏览器中，提供了一系列对象与浏览器窗口进行交互，主要对象有：window、document、location、navigator和screen等，通常称为浏览器对象模型（Brower Object Model）

DOM对html元素的访问

dom（文档对象模型），它不是一种技术，而是一种访问节结构化文档的一种思想。

借助DOM模型，可以对DOM树进行修改、删除、增新等操作

DOM模型中三种节点

元素节点Element 各种标签就是元素节点的名称
文本节点text 包含在元素节点内部
属性节点Attrbute 修饰元素节点的就是属性节点

如：<a href="#">nihao</a> a是元素节点，href是属性节点，nihao是文本节点

Document对象

创建文本节点：document.createTextNode()
创建元素节点：document.createElement()

Element对象

html页面中所有的标签都是element元素

element.appendChild()	向元素添加新的子节点，作为最后一个子节点。
element.firstChild	返回元素的首个子节点。
element.getAttribute()	返回元素节点的指定属性值。
element.innerHTML	设置或返回元素的内容。
element.insertBefore()	在指定的已有的子节点之前插入新节点。
element.lastChild	返回元素的最后一个子元素。
element.setAttribute()	把指定属性设置或更改为指定值。
element.removeChild()	从元素中移除子节点。
element.replaceChild()	替换元素中的子节点。

Attribute对象

html页面中所有标签里面的属性都是attribute

列：ul动态添加li

html

		<input type="button" value="添加新城市" id="btn" />
		<ul id="ul1">
			<li>北京</li>
			<li>上海</li>
			<li>广州</li>
		</ul>

JavaScript

		<script>
			window.onload=function(){
				document.getElementById('btn').onclick=function(){
				//1 获取ul元素节点
					var ulEle=document.getElementById('ul1');
					//2 创建文本节点
					var textNode=document.createTextNode('深圳');
					//3 创建li元素节点
					var liEle=document.createElement('li');
					//4 将文本节点添加到li元素节点中
					liEle.appendChild(textNode);
					//5 将li元素节点添加到ul中
					ulEle.appendChild(liEle);
				}
			}
		</script>

结果：

列：获取text框的值最大长度（获取属性）

		<script type="text/javascript">
			window.onload = function() {
				//显示text框的值和最大长度
				var username = document.getElementById('username');
				alert(username.value)
				alert(username.maxLength)
			}
		</script>
	<body>
		<input type="text" id="username" value="老王" maxlength="30" />
	</body>

列：统计div节点个数、获去div元素节点和文本节点

		<script type="text/javascript">
			window.onload = function() {
				var divs = document.getElementsByTagName("div");
				alert(divs.length)
				for (var i = 0; i < divs.length; i++) {
					alert(divs[i].tagName + "/n" + divs[i].innerHTML);

				}
			}
		</script>	
     <body>
		<div>box1</div>
		<div>box2</div>
		<div>box3</div>
		<div>box4</div>
	</body>

列：获取多选按钮选中的值

		<script type="text/javascript">
			window.onload = function() {
				var loves = document.getElementsByName("loves");
				for (var i = 0; i < loves.length; i++) {
					loves[i].checked = true;
					alert(loves[i].value);
				}
			}
		</script>
    <body>
		<input type="checkbox" name="loves" value="net">net
		<input type="checkbox" name="loves" value="music">music
		<input type="checkbox" name="loves" value="sports">sports
	</body>

列：设置div颜色

		<style type="text/css">
			.box {
				width: 200px;
				height: 50px;
				background-color: greenyellow;
				border: 1px solid red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				//获取标签的type值
				//alert(text.getAttribute('type'));
			
			    document.getElementById('mybox').setAttribute("color", "red");
				document.getElementById('mybox').removeAttribute("color");

				//访问样式
				document.getElementById('box').style.color = 'red';
				document.getElementById('box').style.background = 'green';

				//css元素的类
				document.getElementById('box').className = 'box';
			}
		</script>
	</head>

	<body>
		<div id="box">box1</div>
		<div id='mybox'>box2</div>
		<div>box3</div>
		<div>box4</div>
	</body>