JavaScript DOM（文档对象模型）

最新推荐文章于 2024-04-29 21:05:31 发布
最新推荐文章于 2024-04-29 21:05:31 发布
阅读量502 收藏
点赞数 1
分类专栏： web前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HC199854/article/details/107653070
版权

文章目录



DOM介绍：

  • 文档对象模型，通过DOM可以来任意来修改网页中各个内容

  • 文档

    • 文档指的是网页，一个网页就是一个文档

  • 对象

    • 对象指将网页中的每一个节点都转换为对象
      转换完对象以后，就可以以一种纯面向对象的形式来操作网页了

  • 模型

    • 模型用来表示节点和节点之间的关系，方便操作页面

  • 节点（Node）

    • 节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点
    • 虽然都是节点，但是节点的类型却是不同的
    • 常用的节点
      • 文档节点 （Document），代表整个网页
      • 元素节点（Element），代表网页中的标签
      • 属性节点（Attribute），代表标签中的属性
      • 文本节点（Text），代表网页中的文本内容

DOM操作

  • DOM查询

  • 在网页中浏览器已经为我们提供了document对象，
    它代表的是整个网页，它是window对象的属性，可以在页面中直接使用。

  • document查询方法：

    • 根据元素的id属性查询一个元素节点对象：
      • document.getElementById(“id属性值”);
    • 根据元素的name属性值查询一组元素节点对象:
      • document.getElementsByName(“name属性值”);
    • 根据标签名来查询一组元素节点对象：
      • document.getElementsByTagName(“标签名”);

  • 元素的属性：

    • 读取元素的属性：
      语法：元素.属性名
      例子：ele.name
      ele.id
      ele.value
      ele.className

    • 修改元素的属性：
      语法：元素.属性名 = 属性值

    • innerHTML

      • 使用该属性可以获取或设置元素内部的HTML代码

事件（Event）

  • 事件指的是用户和浏览器之间的交互行为。比如：点击按钮、关闭窗口、鼠标移动。。。
  • 我们可以为事件来绑定回调函数来响应事件。
  • 绑定事件的方式：
    1.可以在标签的事件属性中设置相应的JS代码
    例子：
    按钮
    2.可以通过为对象的指定事件属性设置回调函数的形式来处理事件
    例子：
<button id="btn">按钮</button>
<script>
	var btn = document.getElementById("btn");
	btn.onclick = function(){
	
	};
</script>

文档的加载

  • 浏览器在加载一个页面时，是按照自上向下的顺序加载的，加载一行执行一行。
  • 如果将js代码编写到页面的上边，当代码执行时，页面中的DOM对象还没有加载，
    此时将会无法正常获取到DOM对象，导致DOM操作失败。
  • 解决方式一：
    • 可以将js代码编写到body的下边
<body>
	<button id="btn">按钮</button>
	<script>
		var btn = document.getElementById("btn");
		btn.onclick = function(){
		
		};
	</script>
</body>
  • 解决方式二：
    • 将js代码编写到window.onload = function(){}中
    • window.onload 对应的回调函数会在整个页面加载完毕以后才执行，
      所以可以确保代码执行时，DOM对象已经加载完毕了
<script>
		window.onload = function(){
			var btn = document.getElementById("btn");
			btn.onclick = function(){
			
			};
		};
	
	</script>
DOM查询
  • 通过具体的元素节点来查询

    • 元素.getElementsByTagName()

      • 通过标签名查询当前元素的指定后代元素

    • 元素.childNodes

      • 获取当前元素的所有子节点
      • 会获取到空白的文本子节点

    • 元素.children

      • 获取当前元素的所有子元素

    • 元素.firstChild

      • 获取当前元素的第一个子节点

    • 元素.lastChild

      • 获取当前元素的最后一个子节点

    • 元素.parentNode

      • 获取当前元素的父元素

    • 元素.previousSibling

      • 获取当前元素的前一个兄弟节点

    • 元素.nextSibling

      • 获取当前元素的后一个兄弟节点

innerHTML和innerText：

  • 这两个属性并没有在DOM标准定义，但是大部分浏览器都支持这两个属性
  • 两个属性作用类似，都可以获取到标签内部的内容，
    不同是innerHTML会获取到html标签，而innerText会自动去除标签
  • 如果使用这两个属性来设置标签内部的内容时，没有任何区别的

读取标签内部的文本内容

<h1>h1中的文本内容</h1>

元素.firstChild.nodeValue

  • document对象的其他的属性和方法

  • document.all

    • 获取页面中的所有元素，相当于document.getElementsByTagName("*");

  • document.documentElement

    • 获取页面中html根元素

  • document.body

    • 获取页面中的body元素

  • document.getElementsByClassName()

    • 根据元素的class属性值查询一组元素节点对象
    • 这个方法不支持IE8及以下的浏览器

  • document.querySelector()

    • 根据CSS选择器去页面中查询一个元素
    • 如果匹配到的元素有多个，则它会返回查询到的第一个元素

  • document.querySelectorAll()

    • 根据CSS选择器去页面中查询一组元素
    • 会将匹配到所有元素封装到一个数组中返回，即使只匹配到一个

DOM查询练习：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
		
			/*
			 * 定义一个函数，专门用来为指定元素绑定单击响应函数
			 * 	参数：
			 * 		idStr 要绑定单击响应函数的对象的id属性值
			 * 		fun 事件的回调函数，当单击元素时，该函数将会被触发
			 */
			function myClick(idStr , fun){
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}
		
			window.onload = function(){
				
				//为id为btn01的按钮绑定一个单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					//查找#bj节点
					var bj = document.getElementById("bj");
					//打印bj
					//innerHTML 通过这个属性可以获取到元素内部的html代码
					alert(bj.innerHTML);
				};
				
				
				//为id为btn02的按钮绑定一个单击响应函数
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					//查找所有li节点
					//getElementsByTagName()可以根据标签名来获取一组元素节点对象
					//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
					//即使查询到的元素只有一个，也会封装到数组中返回
					var lis = document.getElementsByTagName("li");
					
					//打印lis
					//alert(lis.length);
					
					//变量lis
					for(var i=0 ; i<lis.length ; i++){
						alert(lis[i].innerHTML);
					}
				};
				
				
				//为id为btn03的按钮绑定一个单击响应函数
				var btn03 = document.getElementById("btn03");
				btn03.onclick = function(){
					//查找name=gender的所有节点
					var inputs = document.getElementsByName("gender");
					
					//alert(inputs.length);
					
					for(var i=0 ; i<inputs.length ; i++){
						/*
						 * innerHTML用于获取元素内部的HTML代码的
						 * 	对于自结束标签，这个属性没有意义
						 */
						//alert(inputs[i].innerHTML);
						/*
						 * 如果需要读取元素节点属性，
						 * 	直接使用 元素.属性名
						 * 		例子：元素.id 元素.name 元素.value
						 * 		注意：class属性不能采用这种方式，
						 * 			读取class属性时需要使用 元素.className
						 */
						alert(inputs[i].className);
					}
				};
				
				//为id为btn04的按钮绑定一个单击响应函数
				var btn04 = document.getElementById("btn04");
				btn04.onclick = function(){
					
					//获取id为city的元素
					var city = document.getElementById("city");
					
					//查找#city下所有li节点
					var lis = city.getElementsByTagName("li");
					
					for(var i=0 ; i<lis.length ; i++){
						alert(lis[i].innerHTML);
					}
					
				};
				
				//为id为btn05的按钮绑定一个单击响应函数
				var btn05 = document.getElementById("btn05");
				btn05.onclick = function(){
					//获取id为city的节点
					var city = document.getElementById("city");
					//返回#city的所有子节点
					/*
					 * childNodes属性会获取包括文本节点在呢的所有节点
					 * 根据DOM标签标签间空白也会当成文本节点
					 * 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
					 * 	所以该属性在IE8中会返回4个子元素而其他浏览器是9个
					 */
					var cns = city.childNodes;
					
					//alert(cns.length);
					
					/*for(var i=0 ; i<cns.length ; i++){
						alert(cns[i]);
					}*/
					
					/*
					 * children属性可以获取当前元素的所有子元素
					 */
					var cns2 = city.children;
					alert(cns2.length);
				};
				
				//为id为btn06的按钮绑定一个单击响应函数
				var btn06 = document.getElementById("btn06");
				btn06.onclick = function(){
					//获取id为phone的元素
					var phone = document.getElementById("phone");
					//返回#phone的第一个子节点
					//phone.childNodes[0];
					//firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
					var fir = phone.firstChild;
					
					//firstElementChild获取当前元素的第一个子元素
					/*
					 * firstElementChild不支持IE8及以下的浏览器，
					 * 	如果需要兼容他们尽量不要使用
					 */
					//fir = phone.firstElementChild;
					
					alert(fir);
				};
				
				//为id为btn07的按钮绑定一个单击响应函数
				myClick("btn07",function(){
					
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					
					//返回#bj的父节点
					var pn = bj.parentNode;
					
					alert(pn.innerHTML);
					
					/*
					 * innerText
					 * 	- 该属性可以获取到元素内部的文本内容
					 * 	- 它和innerHTML类似，不同的是它会自动将html去除
					 */
					//alert(pn.innerText);
					
					
				});
				
				
				//为id为btn08的按钮绑定一个单击响应函数
				myClick("btn08",function(){
					
					//获取id为android的元素
					var and = document.getElementById("android");
					
					//返回#android的前一个兄弟节点（也可能获取到空白的文本）
					var ps = and.previousSibling;
					
					//previousElementSibling获取前一个兄弟元素，IE8及以下不支持
					//var pe = and.previousElementSibling;
					
					alert(ps);
					
				});
				
				//读取#username的value属性值
				myClick("btn09",function(){
					//获取id为username的元素
					var um = document.getElementById("username");
					//读取um的value属性值
					//文本框的value属性值，就是文本框中填写的内容
					alert(um.value);
				});
				
				
				//设置#username的value属性值
				myClick("btn10",function(){
					//获取id为username的元素
					var um = document.getElementById("username");
					
					um.value = "今天天气真不错~~~";
				});
				
				
				//返回#bj的文本值
				myClick("btn11",function(){
					
					//获取id为bj的元素
					var bj = document.getElementById("bj");
					
					//alert(bj.innerHTML);
					//alert(bj.innerText);
					
					//获取bj中的文本节点
					/*var fc = bj.firstChild;
					alert(fc.nodeValue);*/
					
					alert(bj.firstChild.nodeValue);
					
					
				});
				
			};
			
		
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>

				<br>
				<br>

				<p>
					你喜欢哪款单机游戏?
				</p>

				<ul id="game">
					<li id="rl">红警</li>
					<li>实况</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>

				<br />
				<br />

				<p>
					你手机的操作系统是?
				</p>

				<ul id="phone"><li>IOS</li> <li id="android">Android</li><li>Windows Phone</li></ul>
			</div>

			<div class="inner">
				gender:
				<input class="hello" type="radio" name="gender" value="male"/>
				Male
				<input class="hello" type="radio" name="gender" value="female"/>
				Female
				<br>
				<br>
				name:
				<input type="text" name="name" id="username" value="abcde"/>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">查找#bj节点</button></div>
			<div><button id="btn02">查找所有li节点</button></div>
			<div><button id="btn03">查找name=gender的所有节点</button></div>
			<div><button id="btn04">查找#city下所有li节点</button></div>
			<div><button id="btn05">返回#city的所有子节点</button></div>
			<div><button id="btn06">返回#phone的第一个子节点</button></div>
			<div><button id="btn07">返回#bj的父节点</button></div>
			<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
			<div><button id="btn09">返回#username的value属性值</button></div>
			<div><button id="btn10">设置#username的value属性值</button></div>
			<div><button id="btn11">返回#bj的文本值</button></div>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				
				//获取body标签
				//var body = document.getElementsByTagName("body")[0];
				
				/*
				 * 在document中有一个属性body，它保存的是body的引用
				 */
				var body = document.body;
				
				/*
				 * document.documentElement保存的是html根标签
				 */
				var html = document.documentElement;
				
				//console.log(html);
				
				/*
				 * document.all代表页面中所有的元素
				 */
				var all = document.all;
				
				//console.log(all.length);
				
				/*for(var i=0 ; i<all.length ; i++){
					console.log(all[i]);
				}*/
				
				//all = document.getElementsByTagName("*");
				//console.log(all.length);
				
				
				/*
				 * 根据元素的class属性值查询一组元素节点对象
				 * getElementsByClassName()可以根据class属性值获取一组元素节点对象，
				 * 	但是该方法不支持IE8及以下的浏览器
				 */
				//var box1 = document.getElementsByClassName("box1");
				//console.log(box1.length);
				
				//获取页面中的所有的div
				//var divs = document.getElementsByTagName("div");
				
				//获取class为box1中的所有的div
				//.box1 div
				/*
				 * document.querySelector()
				 * 	- 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
				 * 	- 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
				 * 	- 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
				 */
				var div = document.querySelector(".box1 div");
				
				var box1 = document.querySelector(".box1")
				
				//console.log(div.innerHTML);
				//console.log(box1.innerHTML);
				
				/*
				 * document.querySelectorAll()
				 * 	- 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
				 * 	- 即使符合条件的元素只有一个，它也会返回数组
				 */
				box1 = document.querySelectorAll(".box1");
				box1 = document.querySelectorAll("#box2");
				console.log(box1);
				
			};
			
			
		</script>
	</head>
	<body>
		<div id="box2"></div>	
		<div class="box1">
			我是第一个box1	 
			<div>我是box1中的div</div>
		</div>
		<div class="box1">
			<div>我是box1中的div</div>
		</div>
		<div class="box1">
			<div>我是box1中的div</div>
		</div>
		<div class="box1">
			<div>我是box1中的div</div>
		</div>
		
		<div></div>
	</body>
</html>
DOM修改

  • document.createElement()

    • 可以根据标签名创建一个元素节点对象

  • document.createTextNode()

    • 可以根据文本内容创建一个文本节点对象

  • 父节点.appendChild(子节点)

    • 向父节点中添加指定的子节点

  • 父节点.insertBefore(新节点,旧节点)

    • 将一个新的节点插入到旧节点的前边

  • 父节点.replaceChild(新节点,旧节点)

    • 使用一个新的节点去替换旧节点

  • 父节点.removeChild(子节点)

    • 删除指定的子节点
    • 推荐方式：子节点.parentNode.removeChild(子节点)

添加和删除练习：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>添加删除记录练习</title>
		<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
		<script type="text/javascript">
		
			/*
			 * 删除tr的响应函数
			 */
			function delA() {

				//点击超链接以后需要删除超链接所在的那行
				//这里我们点击那个超链接this就是谁
				//获取当前tr
				var tr = this.parentNode.parentNode;

				//获取要删除的员工的名字
				//var name = tr.getElementsByTagName("td")[0].innerHTML;
				var name = tr.children[0].innerHTML;

				//删除之前弹出一个提示框
				/*
				 * confirm()用于弹出一个带有确认和取消按钮的提示框
				 * 	需要一个字符串作为参数，该字符串将会作为提示文字显示出来
				 * 如果用户点击确认则会返回true，如果点击取消则返回false
				 */
				var flag = confirm("确认删除" + name + "吗?");

				//如果用户点击确认
				if(flag) {
					//删除tr
					tr.parentNode.removeChild(tr);
				}

				/*
				 * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
				 * 	但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
				 */
				return false;
			};

			window.onload = function() {

				/*
				 * 点击超链接以后，删除一个员工的信息
				 */

				//获取所有额超链接
				var allA = document.getElementsByTagName("a");

				//为每个超链接都绑定一个单击响应函数
				for(var i = 0; i < allA.length; i++) {
					allA[i].onclick = delA;
				}

				/*
				 * 添加员工的功能
				 * 	- 点击按钮以后，将员工的信息添加到表格中
				 */

				//为提交按钮绑定一个单击响应函数
				var addEmpButton = document.getElementById("addEmpButton");
				addEmpButton.onclick = function() {

					//获取用户添加的员工信息
					//获取员工的名字
					var name = document.getElementById("empName").value;
					//获取员工的email和salary
					var email = document.getElementById("email").value;
					var salary = document.getElementById("salary").value;

					//alert(name+","+email+","+salary);
					/*
					 *  <tr>
							<td>Tom</td>
							<td>tom@tom.com</td>
							<td>5000</td>
							<td><a href="javascript:;">Delete</a></td>
						</tr>
						需要将获取到的信息保存到tr中
					 */

					//创建一个tr
					var tr = document.createElement("tr");

					//设置tr中的内容
					tr.innerHTML = "<td>"+name+"</td>"+
									"<td>"+email+"</td>"+
									"<td>"+salary+"</td>"+
									"<td><a href='javascript:;'>Delete</a></td>";
									
					//获取刚刚添加的a元素，并为其绑定单击响应函数				
					var a = tr.getElementsByTagName("a")[0];
					a.onclick = delA;
					
					//获取table
					var employeeTable = document.getElementById("employeeTable");
					//获取employeeTable中的tbody
					var tbody = employeeTable.getElementsByTagName("tbody")[0];
					//将tr添加到tbodye中
					tbody.appendChild(tr);
					/*tbody.innerHTML += "<tr>"+
					
					"<td>"+name+"</td>"+
									"<td>"+email+"</td>"+
									"<td>"+salary+"</td>"+
									"<td><a href='javascript:;'>Delete</a></td>"
					
					+"</tr>";*/

				};

			};
		</script>
	</head>

	<body>

		<table id="employeeTable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th>&nbsp;</th>
			</tr>
			<tr>
				<td>Tom</td>
				<td>tom@tom.com</td>
				<td>5000</td>
				<td>
					<a href="javascript:;">Delete</a>
				</td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>jerry@sohu.com</td>
				<td>8000</td>
				<td>
					<a href="deleteEmp?id=002">Delete</a>
				</td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>bob@tom.com</td>
				<td>10000</td>
				<td>
					<a href="deleteEmp?id=003">Delete</a>
				</td>
			</tr>
		</table>

		<div id="formDiv">

			<h4>添加新员工</h4>

			<table>
				<tr>
					<td class="word">name: </td>
					<td class="inp">
						<input type="text" name="empName" id="empName" />
					</td>
				</tr>
				<tr>
					<td class="word">email: </td>
					<td class="inp">
						<input type="text" name="email" id="email" />
					</td>
				</tr>
				<tr>
					<td class="word">salary: </td>
					<td class="inp">
						<input type="text" name="salary" id="salary" />
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<button id="addEmpButton">
						Submit
					</button>
					</td>
				</tr>
			</table>

		</div>

	</body>

</html>

效果如下：
在这里插入图片描述


DOM对CSS的操作

读取和修改内联样式

  • 使用style属性来操作元素的内联样式

  • 读取内联样式：
    语法：元素.style.样式名

    • 例子：
      元素.style.width
      元素.style.height
      • 注意：如果样式名中带有-，则需要将样式名修改为驼峰命名法
        将-去掉，然后-后的字母改大写
      • 比如：background-color --> backgroundColor
        border-width —> borderWidth

  • 修改内联样式：
    语法：元素.style.样式名 = 样式值

    • 通过style修改的样式都是内联样式，由于内联样式的优先级比较高，
      所以我们通过JS来修改的样式，往往会立即生效，
      但是如果样式中设置了!important，则内联样式将不会生效。
读取元素的当前样式

一般浏览器

使用getComputedStyle()

  • 这个方法是window对象的方法，可以返回一个对象，这个对象中保存着当前元素生效样式
  • 参数：
    1.要获取样式的元素
    2.可以传递一个伪元素，一般传null
  • 例子：
    获取元素的宽度
    getComputedStyle(box , null)["width"];
  • 通过该方法读取到样式都是只读的不能修改

IE8

使用currentStyle

  • 语法：
    元素.currentStyle.样式名
  • 例子：
    box.currentStyle[“width”]
  • 通过这个属性读取到的样式是只读的不能修改
其他的样式相关的属性

注意：以下样式都是只读的

  • clientHeight

    • 元素的可见高度，指元素的内容区和内边距的高度

  • clientWidth

    • 元素的可见宽度，指元素的内容区和内边距的宽度

  • offsetHeight

    • 整个元素的高度，包括内容区、内边距、边框

  • offfsetWidth

    • 整个元素的宽度，包括内容区、内边距、边框

  • offsetParent

    • 当前元素的定位父元素
    • 离他最近的开启了定位的祖先元素，如果所有的元素都没有开启定位，则返回body

  • offsetLeft和offsetTop

    • 当前元素和定位父元素之间的偏移量
    • offsetLeft水平偏移量 offsetTop垂直偏移量

  • scrollHeight和scrollWidth

    • 获取元素滚动区域的高度和宽度

  • scrollTop和scrollLeft

    • 获取元素垂直和水平滚动条滚动的距离

判断滚动条是否滚动到底

  • 垂直滚动条
    scrollHeight - scrollTop = clientHeight

  • 水平滚动
    scrollWidth - scrollLeft = clientWidth

逍遥自在”
关注
专栏目录
JavaScript高级程序设计 第十四章---DOM 文档对象模型
weixin_40794404的博客
09-03 1189
第十四章 本章内容 理解文档对象模型（DOM）的构成 节点类型 浏览器兼容性 MutationObserver 接口 文档对象模型（DOM，Document Object Model）是HTML 和XML 文档的编程接口。DOM 表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。脱胎于网景和微软早期的动态HTML（DHTML，Dynamic HTML），DOM 现在是真正跨平台、语言无关的表示和操作网页的方式。 14.1 节点层级 任何HTML 或XML 文档都可以用DOM表示
文档对象模型DOM通俗讲解
09-04
文档对象模型（DOM）是Web开发中的一个关键概念，它为HTML和XML文档提供了一个结构化的表示，并允许程序和脚本动态地访问和更新文档内容、结构和样式。DOM是独立于语言的标准，这意味着任何支持DOM的编程语言都可以...
【JavaScript】JS中的文档对象模型DOM
一文不值的博客
10-31 815
介绍【Javascript】中文档对象模型DOM的相关知识点，包括页面元素的创建、增加、删除、获取，对元素属性的获取、改变，对元素事件的操作...
JavaScript对象模型DOM总结
weixin_46767263的博客
10-27 212
开发工具与关键技术：vs2015 C# 作者：萧氏萧然 撰写时间：2020年10月 27日 JavaScript_DOM文档对象模型 - DOM，全称Document Object Model文档对象模型 - JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的 操作WEB页面。 文档 - 文档表示的就是整个的HTML网页文档 对象 - 对象表示将网页中的每一个部分都转换为了一个对象 模型 - 使用模型来表示对象之间的关系，这样方便我们获取对象 节点： - 节点Node，是构.
JavaScriptDOM编程document对象
m0_67768699的博客
03-18 211
2.DOM全称：document object model 文档对象模型 3.DOM是W3C组织指定的一套标准，实现对HTML文档中标签及属性进行增删改查 4.BOM浏览器对象模型：包含了document对象，而document属于DOM。BOM包含DOM。
DOM文档对象模型
chenmo2001的博客
05-01 704
DOM文档对象模型 什么是（DOM）文档对象模型 DOM 是 W3C（万维网联盟）的标准。 DOM 定义了访问 HTML 和 XML 文档的标准： “W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。” W3C DOM 标准被分为 3 个不同的部分： 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型 HTML .
文档对象模型DOM
li_chun_can的博客
09-06 257
定义 DOM全称为“文档对象模型”（Document Object Model），DOM是针对HTML和XML文档的一个API（Application programming interfaces–应用程序编程接口）,DOM描绘了一个层次化的节点树，允许开发人员添加，移除，修改页面的某一部分。 • 文档 – 文档表示的就是整个的HTML网页文档 • 对象 – 对象表示将网页中的每一个部分都转换为了一个对象。 • 模型 – 使用模型来表示对象之间的关系，这样方便我们获取对象 节点层级 任何 HTML 或
JavascriptDOM 文档对象模型
最新发布
n17742637334的博客
04-29 720
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），简称DOM。DOM模型被结构化为对象树，又称DOM树。树的每个节点代表文档中的一个元素、属性、文本等。JavaScript DOM是用来操作HTML文档的一种编程接口，通过它可以实现对文档的各种操作和交互。Javascript 获取HTML元素1、使用() 方法，通过元素的 id 属性来获取元素。代码如下：2、使用() 方法，通过元素的 class 属性来获取元素。
JavaScriptDOM文档对象模型
IUNIQUE技术册
10-10 539
首先，想必大家都知道JavaScript由三部分组成： 1、ECMAScript标准 2、BOM浏览器模型 3、DOM文档对象模型接着，我们就来复习一下DOM文档对象模型，可能大家和我有这么一种感受，学了这些东西之后，有时候用的时候，一时记不起，那可能就是我们没有复习的结果。一、为什么要学习DOM？ 原因就是DOM提供了一组按树状形式结构组织HTML文档，树状中的每一个对象被称为一个节点（即
第七篇-JavascriptDOM 文档对象模型
weixin_56187723的博客
04-01 1261
Javascript DOM 概念当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），简称DOM。DOM模型被结构化为对象树，又称DOM树。树的每个节点代表文档中的一个元素、属性、文本等。JavaScript DOM是用来操作HTML文档的一种编程接口，通过它可以实现对文档的各种操作和交互。
常用手册 DOM文档对象模型.chm
05-25
DOM文档对象模型允许开发人员通过JavaScript或其他脚本语言与HTML或XML文档进行交互，例如添加、删除或修改文档元素。这个模型将整个文档视为一棵树，每个节点代表文档的一部分，如元素、属性、文本等。在DOM中，...
解析XML中的树形结构与DOM文档对象模型
09-24
以上知识点总结了XML中的树形结构和DOM文档对象模型的核心概念和用途，以及如何使用JavaScript来操作DOM以解析XML文档。这些知识点在前端开发、数据交换格式设计等领域具有广泛的应用，是每一位IT专业人员需要掌握的...
CSS选择器总结
覃会程的博客
02-22 6625
元素选择器：    作用：通过元素选择器可以选择页面中的所有元素    语法：标签名{ }; 如下：选中所有的P标签。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS常见选择器</title> <style type="te...
CSS元素定位和背景图片设置
覃会程的博客
03-09 3165
定位： 定位是指将元素摆放到页面的任意位置，通过定位可以任意的摆放元素。 通过position属性来设置元素的定位. 可选值： 1. static：默认值，没有开启元素的定位。 2. relative：开启元素的相对定位。 3. absolute：开启元素的绝对定位。 4. fixed：开启元素的固定定位（也是绝对定位的一种）。 当开启了元素的定位（position属性值是一个非static的值）...
CSS表格和表单设置
覃会程的博客
03-09 1623
表格：   再HTML中使用table标签来创建一个表格；在table标签中使用tr标签来表示表格中的一行；在tr标签中使用td来常见一个单元格。可以用th标签来表示表头（自动加粗和居中）；th的用法和td一样；table是一个块元素。   表格的列数有td最多的那行决定。   td标签中可以使用colspan来合并横向的单元格。合并两个单元格如下： <td colspan="2">D...
HTML常见标签总结
覃会程的博客
02-13 1174
一、常用标签： 标题标签： 在HTML中一共有六级标题标签， h1到h6。在显示效果上h1最大，h6最小。但是文字的大小我们并不关心（可以使用CSS修改），使用HTML标签时，关心的是表亲啊的语义，我们使用的标签都是语义化标签。 六级标签中h1最重要，表示一个网页中的主要内容，和 ...
CSS盒子模型相关知识总结
覃会程的博客
03-02 1061
盒子模型（框模型）概念： CSS处理网页时，他认为每一个元素都包含在一个不可见的盒子里。如果把所有的元素都想象成盒子，那么我们队网页的布局就像是在摆放盒子。我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。 盒子模型可以分成几个部分： 内容区（content） 内边距（padding） 边距（border） 外边距（margin） 盒子模型的边框样式： width：用来设置盒...
CSS解决高度塌陷问题
覃会程的博客
03-09 996
高度塌陷问题：   在文档流中，父元素的高度默认是被子元素撑开的；也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流；这是将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下面的元素都会向上移动，这样将会导致页面布局混乱。 解决方案1之开启BFC：   可以将父元素的高度写死，但父元素的高度将不能自动适应于子元素的高度。不推荐...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

逍遥自在”

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值