文章目录
- 什么是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-colorjs: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>
运行效果
点击添加
点击添加
