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