JS——DOM

HTML DOM（文档对象模型）

  • DOM是一项W3C（World Wide Web Consortium）标准。
  • 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
  • 通过DOM，JavaScript获得创建动态HTML的所有力量。
  • W3C文档对象模式（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。
  • 在DOM中，所有HTML元素都被定义为对象。
  • 方法是您能够完成的动作（比如添加或删除HTML元素）
  • 属性时您能够获取或设置的值（比如更改HTML元素的内容）
JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件

例句：

<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>

// getElementByID 为DOM方法，而innerHTML是属性。

DOM的Document对象：

如果希望访问HTML网页中的任何元素，那么总是从访问document对象开始的。

常用的ducument对象：

getElementByid（获取属性之ID节点）

  1. 返回的值为单一的值，可以使用后续的属性。
<body>
    <p id="head">xuan</p>
<script>
    var box = document.getElementById('head')
	console.dir(box);  #查看返回值中的属性
</script>
</body>

getElementsByClassName（获取类节点）

  1. 返回的是伪数组形式，需要遍历或者取单一值进行其他方法的使用。
<body>
		<ul >
			<li class = 'box'>1</li>
			<li class = 'box'>2</li>
			<li class = 'box'>3</li>
			<li class = 'box'>4</li>
			<li class = 'box'>5</li>
			<li class = 'box'>6</li>
		</ul>
		
		<script>
			var lis = document.getElementsByClassName('box');
			for(var i=0;i<lis.length;i++){
				console.log(lis);
			};
		</script>
	</body>

getElementsByTagName（获取元素节点）

  1. 返回的是伪数组，需要遍历或取某个特定值才可配置方法。
<body>
    <p id="head">xuan</p>
<script>
	var box = document.getElementsByTagName('p')
	console.dir(box);  #查看返回值中的属性
</script>
</body>

createElement（创建元素）

<body>
		<ul id='uul'></ul>
		<script>
			// 1. 获取事件源对象
			var lis = document.getElementById('uul');
			var jli = document.createElement('li')
			lis.appendChild(jli)
		</script>

使用实例：

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Validation</h1>

<p>请输入 1 到 10 之间的数字：</p>

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
  // 获取 id = "numb" 的输入字段的值
  let x = document.getElementById("numb").value;
  // 如果 x 不是数字或小于 1 或大于 10
  let text;
  if (isNaN(x) || x < 1 || x > 10) {
    text = "输入无效";
  } else {
    text = "输入没问题";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

案例2：

自动HTML表单验证，如果表单字段为空，则required属性会阻止提交次表单。

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 验证</h1>

<form action="/demo/html/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="提交">
</form>

<p>如果您点击提交，而不填写文本字段，浏览器将显示错误消息。</p>
//因为在input中，写入了required参数。

</body>
</html>

查找HTML元素：

方法 描述
document.getElementById(id) 通过元素 id 来查找元素
document.getElementsByTagName(name) 通过标签名来查找元素
document.getElementsByClassName(name) 通过类名来查找元素
document.anchors 返回拥有 name 属性的所有 <a> 元素。
document.applets 返回所有 <applet> 元素（HTML5 不建议使用）
document.baseURI 返回文档的绝对基准 URI
document.body 返回 <body> 元素
document.cookie 返回文档的 cookie
document.doctype 返回文档的 doctype
document.documentElement 返回 <html> 元素
document.documentMode 返回浏览器使用的模式
document.documentURI 返回文档的 URI
document.domain 返回文档服务器的域名
document.domConfig 废弃。返回 DOM 配置
document.embeds 返回所有 <embed> 元素
document.forms 返回所有 <form> 元素
document.head 返回 <head> 元素
document.images 返回所有 <img> 元素
document.implementation 返回 DOM 实现
document.inputEncoding 返回文档的编码（字符集）
document.lastModified 返回文档更新的日期和时间
document.links 返回拥有 href 属性的所有 <area> 和 <a> 元素
document.readyState 返回文档的（加载）状态
document.referrer 返回引用的 URI（链接文档）
document.scripts 返回所有 <script> 元素
document.strictErrorChecking 返回是否强制执行错误检查
document.title 返回 <title> 元素
document.URL 返回文档的完整 URL

更改HTML元素：

方法 描述
element.innerHTML = new html content 改变元素的 inner HTML
element.attribute = new value 改变 HTML 元素的属性值
element.setAttribute(attribute, value) 改变 HTML 元素的属性值
element.style.property = new style 改变 HTML 元素的样式
document.createElement(element) 创建 HTML 元素
document.removeChild(element) 删除 HTML 元素
document.appendChild(element) 添加 HTML 元素
document.replaceChild(element) 替换 HTML 元素
document.write(text) 写入 HTML 输出流
document.getElementById(id).onclick = function(){code} 向 onclick 事件添加事件处理程序

样式操作：

  1. 设置节点对象的样式、属性、类。
  2. 样式操作时，需要先获取源对象，然后再绑定事件，然后才可以进行对样式的操作。
  3. 操作时使用_绑定事件.style.XXX的格式，style后面是和CSS中一样的，如遇到CSS中的下划线方式，则使用驼峰式书写即可。

设置样式：

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box{
				width: 200px;
				height: 200px;
				background-color: #666;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<script>
			// 1. 获取事件源对象
			var lis = document.getElementById('box');
			// 2. 绑定事件
			lis.onmouseover = function(){
			// 3. 样式操作
			lis.style.backgroundColor = '#999'
			};
			lis.onmouseout = function(){
				lis.style.backgroundColor = '#666'
			};
		</script>

设置属性：

obj.setAttribute（name,value）

obj.getAttribute（name）

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box{
				width: 200px;
				height: 200px;
				background-color: #666;
			}
			#uul{
				width:300px;
				heigh: 400px;
				background-color: #222;
			}
		</style>
	</head>
	<body>
		<div id="box" class="hh">123</div>
		<ul id='uul'></ul>
		<script>
			var box = document.getElementById('box');
			box.setAttribute('id','uul');
			
		</script>
	</body>

设置类：

obj.className

obj.title

posted @   新兵蛋Z  阅读(49)  评论(0)  编辑  收藏  举报
相关博文：
· JS——BOM&事件
· jQuery——选择器
· JavaScript DOM
· 学习Js-day09
· 04_JavaScript DOM编程_基础篇
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛