JavaScript 操作（DOM）文档对象模型

文章目录

    • 什么是DOM
    • 浏览器内置解析器
    • JavaSiript 如何修改结构与样式
      • 浏览器解析顺序
      • DOM相关API
        • getElementById
        • getElementsByTagName
        • createElement
        • innerText与innerHTML
        • appendChild
      • JavaScript 修改结构与样式案例

什么是DOM

DOM：DOM（文档对象模型）将正文上下文看做一个对象，全部封装在文档节点document中， html和xml都只有一个文档节点，也就是html。

浏览器内置解析器

浏览器内置两个解析器，一个是标签解析器，一个是脚本解析器，从上往下解析，如果出现解析异常则停止解析通过控制台报错，如果解析无误，则将整个html文档节点封装进document中，全文只有一个文档节点。

根据这个节点中的结构样式，创建一个文档对象模型格式如下:

             			  document
			                  |
			                 html
			                  |
			                  |
			        ---------------------------------------
			        |                                     |
			        |                                     |
			      head                                  body
			        |                                     |
			     ----------                       ----------------------
		         |        |                       |                    |
			    title     meta                   button              table
			                                                           |
			                                                           |
			                                                           tr
			                                                           |
			                                                           |
			                                                           td

JavaSiript 如何修改结构与样式

JavaSiript不能直接修改页面的结构和样式 必须通过文档对象模型来修改页面的结构和样式

JavaSiript中的的方法可以对document进行增删查改，修改之后，文档对象模型与页面实际结构和样式不再统一，浏览器根据这个模型重新刷新页面，使之保持一致。

浏览器解析顺序

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>加载顺序</title>
		<style>
			
		</style>
		<script>		
			window.onload = function(){ 
				//根据id从全文拿取一个元素节点
				let domBtn = document.getElementById('btn')
				//当按钮单击时
				domBtn.onclick = function(){
					 //alert('进来啦！')
				}
			}

		</script>
	</head>
	<body>
		<button id="btn">按钮</button>
	</body>
</html>

如果这里去掉了window.onload之后那么浏览器从上往下解析，首先解析到的就是

 let domBtn = document.getElementById('btn')

从模型中根据btn这个id拿取元素节点，可是注意window.onload前提被删除了，整个页面还没有解析，模型未被创建，所以根本无法从模型中根据id拿取元素，所以报错。

那么是不是必须书写window.onload来保证模型创建完整呢？
不是必须书写，通常将js脚本书写在页面body闭合标签标签之前，保证最后执行js脚本
优先加载html和css 并且保证模型创建完毕。

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>加载顺序</title>
		<style>
			
		</style>
		<script>		
			window.onload = function(){ 
				//根据id从全文拿取一个元素节点
				let domBtn = document.getElementById('btn')
				//当按钮单击时
				domBtn.onclick = function(){
					 //alert('进来啦！')
				}
			}

		</script>
	</head>
	<body>
		<button id="btn">按钮</button>
		<script>
			/*
			 *   js如果放置在此处，则不需要每次都添加window.onload
			 *   页面的加载顺序应该是 html ==> css ==>js
			 */
		</script>
	</body>
</html>

DOM相关API

getElementById

根据id从全文拿取一个元素节点

let domBtn = document.getElementById('btn')
getElementsByTagName

根据table标签名拿取一个元素节点列表NodeList，这个NodeList封装了所有匹配table的元素。

let domTb = document.getElementsByTagName('table')[0]
createElement

创建一个tr元素节点<tr></tr>

let domTr = document.createElement('tr')
innerText与innerHTML

修改这个元素的节点，向内部添加文本或者超文本
innerText:向元素节点中添加文本
innerHTML:向元素节点中添加超文本
添加前:<tr></tr>
添加后:<tr><td style="color:coral">我是添加的一列</td></tr>
不管是innerHTML还是innerText如果元素节点中存在节点值不管是文本还是子元素 则全部被覆盖

//let domTr = document.createElement('tr')
domTr.innerHTML = '<td style="color:coral">我是添加的一列</td>'
appendChild

元素节点.appendChild(子元素)
元素节点中原先的子元素不受影响，追加到原先子元素之后

//let domTb = document.getElementsByTagName('table')[0]
//let domTr = document.createElement('tr')
domTb.appendChild(domTr)

JavaScript 修改结构与样式案例

通过修改style属性来间接修改页面的样式

节点.style.样式名 = 样式值

注意：这里的样式名与CSS的样式名书写略有出入 不能出现- 必须 使用驼峰书写格式

  • css:background-color
  • js:backgroundColor

font-size ==> fontSize

//let domTb = document.getElementsByTagName('table')[0]
domTb.style.backgroundColor = 'rgb('+r+','+g+','+b+')'

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>文档对象模型</title>
		<style>
			table{
				width:200px;
				/* 重叠的边框合并成一条 */
				border-collapse: collapse;
			}

			table,tr,td{
				/* 显示边框 */
				border:solid 2px red;
			}
		</style>
		<script>
		
			window.onload = function(){
				//根据id从全文拿取一个元素节点
				let domBtn = document.getElementById('btn')
				//当按钮单击时
				domBtn.onclick = function(){
					let domTb = document.getElementsByTagName('table')[0]
					console.log(domTb)
					
					let domTr = document.createElement('tr')
					console.log(domTr)
				
					domTr.innerHTML = '<td style="color:coral">我是添加的一列</td>'
					//将组装好的tr追加到table中作为子元素，不影响原先的子元素
					domTb.appendChild(domTr)
					
					/*
					 *   Math:计算内置对象，专门用来进行数学运算
					 *   Math.floor():返回小于或者等于一个给定数字的最大整数
					 *   Math.random():返回介于 0(包含) ~ 1(不包含)之间的数
					 *
					 */
					let r = Math.floor(Math.random()*255)
					let g = Math.floor(Math.random()*255)
					let b = Math.floor(Math.random()*255)

					/*
					 *   使用ES6提供的模板字符串来避免进行字符串的拼接
					 *	`${要输出的值}`
					 */
					domTb.style.backgroundColor = `rgb(${r},${g},${b})`

				}
			}
		
		</script>
	</head>
	<body>
		<button id="btn">添加一行</button>
		<table>
			<tr>
				<td>我是默认存在的一列</td>
			</tr>
		</table>
	</body>
</html>

运行效果

在这里插入图片描述
点击添加

在这里插入图片描述
点击添加
在这里插入图片描述