Dom简介

浏览器已经为我们提供了文档节点对象，这个对象是window属性可以在页面中使用，文档节点代表的时整个网页
document是window提供的文档节点，可以获取整个文档中的任意节点

<body>
<button id="btn">我是一个按钮</button>
<script>//获取到button对象let btn = document.getElementById('btn');btn.innerText='提交'
</script>
</body>

通过dom文档对象可以获取到页面任意一个dom节点对象：找对象

事件

可以为按钮的对应事件绑定处理函数的形式来响应事件

<body>
<button id="btn">我是一个按钮</button>
<script>let btn = document.getElementById('btn');//绑定一个单击事件btn.onclick=function () {alert('ddd')}
</script>
</body>

JS文档的加载

浏览器在加载一个页面时，是按照从上到下的顺序进行加载的，读取到一行就运行一行

<script>window.onload=function () {let btn = document.getElementById('btn');btn.onclick=function () {alert('dagadsg')}}
</script>
<body>
<button id="btn">我是一个按钮</button>
</body>

onload事件会在整个页面加载完成之后才触发
为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确定我们的代码执行时所有的dom对象以及加载完毕了

dom查询

childNodes：表示当前节点的所有子节点
firstChild：表示当前节点的第一个子节点
lastChild：表示当前节点的最后一个字节点

获取父节点和兄弟节点

parentNode:表示当前节点的父节点
previousSibling:表示当前节点的前一个兄弟节点

<script>window.onload=function () {let btn = document.getElementById('btn');btn.onclick=function () {alert(btn.value) //获取属性不加括号}}
</script>
<body>
<button id="btn" value="保存">我是一个按钮</button>
</body>

获取属性值不加括号

dom查询剩余方法

document.body:在document中有一个body，它保存的时body的引用
document.documentElement:保存的是html根标签
document.all:获取所有元素
document.querySelector('')：根据css选择器来查询节点

dom增、删、改

appendChild():把新的子节点添加到指定节点
removeChild()：删除子节点
replaceChild():替换子节点
insertBefore():在指定的子节点前面插入新的子节点
document.createAttribute():创建属性节点
document.createElement()：创建元素节点
createTextNode():创建文本节点
getAttribute():返回指定的属性值
setAttribute():把指定属性设置或修改为指定的值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>dom增删改</title><style type="text/css">table {border-collapse: collapse;width: 800px;}td {text-align: center;}/*让a链接没有下划线*/a:link, a:visited {text-decoration: none}thead {background-color: #7bb6ff}.table2 {width: 800px}</style><script>window.onload = function () {function myClick(str, fun) {document.getElementById(str).onclick = fun;}myClick('add', function () {let username = document.getElementById('username').value;let age = document.getElementById('age').value;let address = document.getElementById('address').value;let tBody = document.getElementById('tbody');let trObj = document.createElement('tr');let tdObj = document.createElement('td');let inputObj = document.createElement('input');inputObj.setAttribute('type', 'checkbox');inputObj.setAttribute('class', 'ch')inputObj.onclick = function () {let checkAll = document.getElementById('checkAll');if (inputObj.checked) {checkAll.checked = true;} else {let inputs = document.getElementsByClassName('ch');var isCheck = false;for (let input of inputs) {if (input.checked) {isCheck = true;}}if (isCheck) {checkAll.checked = true;} else {checkAll.checked = false;}}}tdObj.appendChild(inputObj);let tdObj01 = document.createElement('td');tdObj01.innerHTML = username;let tdObj02 = document.createElement('td');tdObj02.innerHTML = age;let tdObj03 = document.createElement('td');tdObj03.innerHTML = address;let tdObj04 = document.createElement('td');let aObj = document.createElement('a');aObj.onclick = function () {let tr = this.parentNode.parentNode;let del = confirm('确认删除？');if (del) {tBody.removeChild(tr);}}aObj.innerHTML = '删除';aObj.setAttribute('href', 'javascipt:void(0)');tdObj04.appendChild(aObj);trObj.appendChild(tdObj);trObj.appendChild(tdObj01);trObj.appendChild(tdObj02);trObj.appendChild(tdObj03);trObj.appendChild(tdObj04);tBody.appendChild(trObj);});let inputs = document.getElementsByClassName('ch');let checkAll = document.getElementById('checkAll');for (let input of inputs) {input.onclick = function () {if (input.checked) {checkAll.checked = true;} else {let inputs = document.getElementsByClassName('ch');var isCheck = false;for (let input of inputs) {if (input.checked) {isCheck = true;}}if (isCheck) {checkAll.checked = true;} else {checkAll.checked = false;}}}}//点击超连接以后删除let allA = document.getElementsByTagName('a');let tBody = document.getElementById('tbody');for (let a of allA) {a.onclick = function () {let tr = this.parentNode.parentNode;let del = confirm('确认删除？');if (del) {tBody.removeChild(tr);}}}//反选和全选let btnCheck = document.getElementById('checkAll');btnCheck.onclick = function () {let inputs = document.getElementsByTagName('input');if (btnCheck.checked) {for (let input of inputs) {input.checked = true;}} else {for (let input of inputs) {input.checked = false;}}}//批量删除myClick('batchDelete', function () {let inputs = document.getElementsByClassName('ch');var isCheck = false;for (let input of inputs) {if (input.checked) {isCheck = true;}}if (isCheck) {for (let input of inputs) {if (input.checked) {let tr = input.parentNode.parentNode;tBody.removeChild(tr);} else {continue;}}document.getElementById('checkAll').checked = false;} else {alert('请至少勾选一条数据进行删除！');}})}</script>
</head>
<body>
<table><tr><td>姓名：<input type="text" id="username"></td><td>年龄：<input type="text" id="age"></td><td>地址：<input type="text" id="address"></td><td><input type="button" value="添加一行" id="add"></td><td><input type="button" value="批量删除" id="batchDelete"></td></tr>
</table>
<table border="1" class="table2"><thead><tr><td><input type="checkbox" id="checkAll"></td><td>姓名</td><td>年龄</td><td>地址</td><td>操作</td></tr></thead><tbody id="tbody"><tr><td><input type="checkbox" class="ch"></td><td>zzq</td><td>25</td><td>上海</td><td><a href="javascript:;">删除</a></td></tr><tr><td><input type="checkbox" class="ch"></td><td>zzq</td><td>25</td><td>北京</td><td><a href="javascipt:;">删除</a></td></tr><tr><td><input type="checkbox" class="ch"></td><td>zzq</td><td>25</td><td>重庆</td><td><a href="javascipt:;">删除</a></td></tr></tbody>
</table>
</body>
</html>

insertBefore():可以在指定的子节点前面插入新的子节点，语法：父节点.insertBefore(新节点,旧节点);

使用dom操作css

通过JS修改元素的样式，语法：元素.style.样式名='样式值'

    <style>#box1{width: 200px;height: 200px;background-color: red;}</style><script>window.onload=function () {let boxl = document.getElementById('box1');let btn = document.getElementById('btn');btn.onclick=function () {boxl.style.width='500px';boxl.style.backgroundColor='yellow';}}</script>
</head>
<body>
<button id="btn">点击</button>
<div id="box1">
</div>
</body>

如果CSS的样式名中含有 '-' 这种名称在JS中是不合法的比如background-color，需要将这种样式名修改为驼峰命名法backgroundColor
我们通过style属性设置和读取的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示

读取当前属性的样式

通过getComputedStyle()方法获得

 <script>window.onload=function () {let boxl = document.getElementById('box1');let btn = document.getElementById('btn');btn.onclick=function () {alert(getComputedStyle(boxl).width);}}</script>

其他样式相关属性

clientWidth:获取元素的可见宽度，只读(不包含px)，返回一个数字，不包括边框
clientHeight：获取元素的可见高度，只读(不包含px)，返回一个数字，不包括边框

    <script>window.onload=function () {let boxl = document.getElementById('box1');let btn = document.getElementById('btn');btn.onclick=function () {alert(boxl.clientWidth);alert(boxl.clientHeight);}}</script>

offsetHeight:返回元素的高度，可以获取元素整个的高度，包括边框
offsetWidth:返回元素的宽度，可以获取元素整个的宽度，包括边框

offsetParent:会获取到离当前元素最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位，则返回body
offsetLeft:当前元素相对于其定位父元素的水平偏移量
offsetTop:当前元素相对于其定位父元素的垂直偏移量
clientLeft,clientTop: 这两个返回的是元素周围边框的厚度（border）,如果不指定一个边框或者不定位改元素,他的值就是0.

scrollHeight:元素滚动区域高度
scrollLeft：左侧滚动的距离
scrollTop:离上边滚动的距离
scrollWidth:元素滚动区域宽度

 <script>window.onload=function () {let boxl = document.getElementById('box1');let btn = document.getElementById('btn');btn.onclick=function () {alert(boxl.scrollHeight);alert(boxl.scrollLeft);alert(boxl.scrollTop);alert(boxl.scrollWidth);}}</script>

滚动到底部的时候：boxl.scrollHeight-boxl.scrollTop=boxl.clientHeight

    <style>#box1{width: 200px;height: 300px;background-color: aliceblue;overflow: auto;}#box2{width: 300px;height: 500px;background-color: antiquewhite;overflow: auto;}</style><script>window.onload=function () {let btn = document.getElementById('btn');let box1 = document.getElementById('box1');btn.onclick=function () {alert(box1.clientHeight);//283alert(box1.scrollHeight);//500alert(box1.scrollHeight-box1.scrollTop);/283}}</script>
</head>
<body>
<button id="btn">点击</button>
<div id="box1"><div id="box2"></div>
</div>
</body>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#info{width: 300px;height: 400px;background-color: aliceblue;overflow: auto;}</style><script>window.onload=function () {let info = document.getElementById('info');info.onscroll=function () {if (info.scrollHeight - info.scrollTop === info.clientHeight) {let inputs = document.getElementsByTagName('input');for (let input of inputs) {input.disabled=false;}}}}</script>
</head>
<body>
<h3>欢迎亲爱的用户注册
</h3>
<p id="info">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;秦孝公据崤函之固，拥雍州之地，君臣固守以窥周室，有席卷天下，包举宇内，囊括四海之意，并吞八荒之心。当是时也，商君佐之，内立法度，务耕织， 修守战之具，外连衡而斗诸侯。于是秦人拱手而取西河之外。孝公既没，惠文、武、昭襄蒙故业，因遗策，南取汉中，西举巴、蜀，东割膏腴之地，北收要害之郡。诸侯恐惧，会盟而谋弱秦，不爱珍器重宝肥饶之地，以致天下之士，合从缔交，相与为一。当此之时，齐有孟尝，赵有平原，楚有春申，魏有信陵。此四君者，皆明智而忠信，宽厚而爱人，尊贤而重士，约从离衡，兼韩、魏、燕、楚、齐、赵、宋、卫、中山之众。于是六国之士，有宁越、徐尚、苏秦、杜赫之属为之谋，齐明、周最、陈轸、召滑、楼缓、翟景、苏厉、乐毅之徒通其意，吴起、孙膑、带佗、倪良、王廖、田忌、廉颇、赵奢之伦制其兵。尝以十倍之地，百万之众，叩关而攻秦。秦人开关延敌，九国之师，逡巡而不敢进。秦无亡矢遗镞之费，而天下诸侯已困矣。于是从散约败，争割地而赂秦。秦有余力而制其弊，追亡逐北，伏尸百万，流血漂橹；因利乘便，宰割天下，分裂山河。强国请服，弱国入朝。 延及孝文王、庄襄王，享国之日浅，国家无事。及至始皇，奋六世之余烈，振长策而御宇内，吞二周而亡诸侯，履至尊而制六合，执敲扑而鞭笞天下，威振四海。南取百越之地，以为桂林、象郡；百越之君，俯首系颈，委命下吏。乃使蒙恬北筑长城而守藩篱，却匈奴七百余里；胡人不敢南下而牧马，士不敢弯弓而报怨。于是废先王之道，焚百家之言，以愚黔首；隳名城，杀豪杰；收天下之兵，聚之咸阳，销锋镝，铸以为金人十二，以弱天下之民。然后践华为城，因河为池，据亿丈之城，临不测之渊，以为固。良将劲弩守要害之处，信臣精卒陈利兵而谁何。天下已定，始皇之心，自以为关中之固，金城千里，子孙帝王万世之业也。始皇既没，余威震于殊俗。然陈涉瓮牖绳枢之子，氓隶之人，而迁徙之徒也；才能不及中人，非有仲尼，墨翟之贤，陶朱、猗顿之富；蹑足行伍之间，而倔起阡陌之中，率疲弊之卒，将数百之众，转而攻秦；斩木为兵，揭竿为旗，天下云集响应，赢粮而景从。山东豪俊遂并起而亡秦族矣。且夫天下非小弱也，雍州之地，崤函之固，自若也。陈涉之位，非尊于齐、楚、燕、赵、韩、魏、宋、卫、中山之君也；锄櫌棘矜，非铦于钩戟长铩也；谪戍之众，非抗于九国之师也；深谋远虑，行军用兵之道，非及向时之士也。然而成败异变，功业相反，何也？试使山东之国与陈涉度长絜大，比权量力，则不可同年而语矣。然秦以区区之地，致万乘之势，序八州而朝同列，百有余年矣；然后以六合为家，崤函为宫；一夫作难而七庙隳，身死人手，为天下笑者，何也？仁义不施而攻守之势异也。
</p>
<input type="checkbox" disabled="disabled">我已经仔细阅读相关协议
<input type="submit" value="注册" disabled="disabled">
</body>
</html>

JS核心05：宿主对象dom和bom介绍相关推荐

html dom树的结构图,什么是DOM对象?DOM树形结构介绍
JavaScript中,经常需要操作DOM.所谓DOM指的是文档对象模型(Document Object Model).它提供了对文档结构化的描述,并将HTML页面与脚本.程序语言联系起来. 为了大家 ...
提升对前端的认知，不得不了解Web API的DOM和BOM
了解Web API的DOM和BOM 引言正文一.DOM操作 1.DOM的本质 2.DOM节点操作 (1)property形式 (2)attribute形式 3.DOM结构操作 (1)新增/插入节点 ...
JS中的DOM与BOM
一.Javascript组成 JavaScript的实现包括以下3个部分: ECMAScript(核心) 描述了JS的语法和基本对象. 文档对象模型 (DOM) 处理网页内容的方法和接口浏览器对象模 ...
JavaScript学习笔记05【高级——DOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript核心 DOM 和 BOM操作
JavaScript核心 DOM 和 BOM操作 Web APIs 简介 1. Web APIs 和 JS 基础关联性 1.1 JS 的组成 1.2 JS 基础阶段以及 Web APIs 阶段 JS ...
web前端-JS（DOM、BOM）
web前端-JS(DOM.BOM) 1. DOM- 操作元素 1.1 获取元素 1.2 事件基础 1.3 操作元素 1.3.1 改变元素的内容 1.3.2 常见元素的属性操作 1.3.3 表单元素的属 ...
『前端学习笔记』 JavaScript 事件与对象、DOM与BOM
参考视频:[极客学院]Web前端开发教学 - 第一部分:H5+CSS+JS 参考文档:JavaScript 教程 W3school 文章目录 DOM对象 HTML DOM 操作HTML 操作CSS E ...
JS的DOM和BOM
* JavaScript分三个部分: ECMAScript标准:JS的基本的语法 DOM:Document Object Model --->文档对象模型----操作页面的元素 BOM:Brow ...
js中DOM, DOCUMENT, BOM, WINDOW 区别
全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js系列教程7-DOM操作全解 js中DOM, DOCUMENT, BOM, WINDOW 区别 DOM 全称是 Document ...

JS核心05：宿主对象dom和bom介绍

宿主对象dom和bom介绍