文章目录
一.DOM简介
1.什么是DOM
2.DOM 树
二.获取元素的方法
1.根据ID获取
2.根据标签名获取
3.通过 HTML5 新增的方法获取(注意兼容)
4.获取特殊元素(body,html)
三.事件基础
1.事件概述
2.执行事件的步骤
3.常见的鼠标事件
四.操作元素
1.操作元素内容(改变元素内容)
2. 操作常见元素属性
3.操作表单元素属性
4.操作元素样式属性
5.自定义属性 的操作
6.H5自定义属性
五.节点操作
1.为什么要学习节点操作
2.节点概述
3.节点层级
一.DOM简介 1.什么是DOM
文档对象模型(简称DOM) 是W3C组织推荐的处理可扩展标记语言的标准编程接口 W3C已经定义来一系列DOM接口，通过这些DOM接口可以改变网页的内容、结构样式。
2.DOM 树
文档：一个页面就是一个文档，DOM 中使用 document 表示
元素：页面中的所有标签都是元素，DOM 中使用 element 表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示
文档树(Dom树)：以html为根节点，形成的一颗倒立的树状结构，我们成为DOM树；这个树上所有的东西都叫节点，节点有很多类，比如文本节点，元素节点等等，这些节点如果我们通过DOM方法去获取或者其他的操作去使用就叫做DOM对象，所有节点都是DOM对象
二.获取元素的方法 1.获取页面中的元素可以使用以下几种方式
根据ID获取
根据标签名获取
通过HTML5新增的方法获取
特殊元素获取
1.根据ID获取
使用getElementByld()方法可以获取带有ID的元素对象
getElementByld()，是document下的一个方法
代码演示
<body><div id="time">2020-11-26</div><script>// 1.因为我们文档页面从上往下加载，所以先得有标签 所以我们的script写在标签下面// 2. document文档 get 获得 element 元素 by 通过 驼峰命名法// 3.参数 id是大小写敏感的字符串// 4.返回的是一个对象var timer = document.getElementById('time');console.log(timer);// 5.console.dir 打印我们返回得的元素对象 更好的查看里面的属性和方法console.dir(timer);</script>
</body>
2.根据标签名获取
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合
document.getElementsByTagName('标签名')
注意：
1.因为得到的是一个对象的集合，使用我们想要操作里面的元素就需要遍历
得到元素对象是动态的
代码演示
<body><ul><li>我们的征程是星辰大海</li><li>我们的征程是星辰大海</li><li>我们的征程是星辰大海</li><li>我们的征程是星辰大海</li><li>我们的征程是星辰大海</li></ul><ul id="nav"><li>心存感恩，所遇皆美好~</li><li>心存感恩，所遇皆美好~</li><li>心存感恩，所遇皆美好~</li><li>心存感恩，所遇皆美好~</li><li>心存感恩，所遇皆美好~</li></ul><script>// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的var lis = document.getElementsByTagName('li')console.log(lis);// 2.如果想要依次打印里面的元素对象我们可以采取遍历方式for (var i = 0; i < lis.length; i++) {console.log(lis[i]);}// 3.这里可以是可以获取标签的.getElementsByTagName()可以得到这个元素里面的某些标签var nav1 = document.getElementById('nav') //这个获取nav元素var navli = nav.getElementsByTagName('li') //这里是获取nav 里面的li标签 要先获取 nav元素在获取里面的liconsole.log(navli);</script>
</body>
3.通过 HTML5 新增的方法获取(注意兼容) 1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
2. document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
3. document.querySelectorAll('选择器'); // 根据指定选择器返回所有元素对象集合
注意：querySelector 和 querySelectorAll里面的选择器需要加符号 ,比如:document.querySelector(’#nav’);
代码演示
<body><div class="box">盒子1</div><div class="box">盒子2</div><div id="nav"><ul><li>首页</li><li>产品</li></ul></div><script>// 1. getElementsByClassName 根据类名获得某些元素集合var boxs = document.getElementsByClassName('box');console.log(boxs);// 2. querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #navvar firstBox = document.querySelector('.box');console.log(firstBox);var nav = document.querySelector('#nav');console.log(nav);var li = document.querySelector('li');console.log(li);// 3. querySelectorAll()返回指定选择器的所有元素对象集合var allBox = document.querySelectorAll('.box');console.log(allBox);var lis = document.querySelectorAll('li');console.log(lis);</script>
4.获取特殊元素(body,html) - doucumnet.body // 返回body元素对象
. document.documentElement // 返回html元素对象
代码演示
<body><script>// 获取bdoy元素var bodyEle = document.bodyconsole.log(bodyEle); //返回body元素// 获取html元素var htmlEle = document.documentElementconsole.log(htmlEle); //返回html元素</script>
</body>
三.事件基础 1.事件概述
JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
简单理解： 触发— 响应机制。 网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个
代码演示
<body><button id="btn">浩哥</button><script>// 点击一个按钮，弹出一个对话框// 1.事件是有三部分组成的 1.事件源 2.事件类型 3.事件处理 程序 也称为事件三要素// (1).事件源 事件被触发的对象 var but = document.getElementById('btn')// (2).事件类型 如何触发 什么事件 比如鼠标点击(removed) 还是鼠标经过还是？？？？// (3).事件处理程序 通过一个函数赋值的方式 完成 因为函数就是实现某种功能的but.removed = function() {alert('浩哥爱编程')}</script>
</body>
2.执行事件的步骤 1. 获取事件源DOM对象(意思是你要获取那个元素)
代码演示
<body><div>123</div><script>// 事件执行步骤 点击div 控制台输出我被选中了// 1.获取事件源var div = document.querySelector('div')// 2.绑定事件 注册事件// div.removed// 3.添加事件处理程序div.removed = function() {console.log('我被点击了');}</script>
</body>
3.常见的鼠标事件 onmouseenter鼠标移入事件
四.操作元素 JS的DOM操作可以改变网页内容、结构和样式，利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性
1.操作元素内容(改变元素内容) elemeny.innerText
从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
elemernt.innerHTML
起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
elemernt. Content可以获取隐藏元素的文本，包含换行和空白
代码演示
<title>Document</title><style>div,p {height: 30px;width: 300px;line-height: 30px;text-align: center;color: #fff;background-color: pink;}</style>
</head><body><button>显示当前系统时间</button><div>某个时间</div><p>123</p><script>// 当我们点击了按钮，div里面的文字会发生变化// 1.获取元素 注意这里的按钮 和div都要获取到 因为 点击按钮div里面要发生变化所以都要获取var but = document.querySelector('button');var div = document.querySelector('div');// 2.绑定事件// but.removed// 3.程序处理but.removed = function() {// 改变元素内容 element(元素).innerTextdiv.innerText = '2020-11-27'}// 4.我们元素可以不用添加事件，就可以直接显示日期var p = document.querySelector('p');p.innerText = '2020-11-27';</script>
elemeny.innerText和elemeny.innerHTML的区别
<body><div></div><p></p><ul><li> 文字</li><li>123</li></ul><script>// innertText 和 innertHTML 的区别// 1. innerText 不识别html标签 非标准 去除空格和换行var div = document.querySelector('div');div.innerText = '<strong>今天是:</strong> 2020';// 2.innertHTML 识别html标签 W3C标准 保留空格和换行的 推荐尽量使用这个 因为这个是标准var p = document.querySelector('p')p.innerHTML = '<strong>今天是:</strong> 2020';// 3.这俩个属性是可读写的 意思是 除了改变内容还可以元素读取里面的内容的var ul = document.querySelector('ul')console.log(ul.innerText);console.log(ul.innerHTML);// .4innerHtml innerText 之间的区别：设置内容的时候，如果内容当中包含标签字符串 innerHtml会有标签的特性，也就是说标签会在页面上生效如果内容当中包含标签字符串 innerText会把标签原样展示在页面上，不会让标签生效读取内容的时候，如果标签内部还有其它标签，innerHtml会把标签内部带着其它的标签全部输出如果标签内部还有其它标签，innerText只会输出所有标签里面的内容或者文本，不会输出标签如果标签内部没有其它标签，他们两个一致；都是读取文本内容，innerHtml会带空白和换行</script>
</body>
2. 操作常见元素属性
innerText、innerHTML 改变元素内容
src、href
id、alt、title
代码演示
<body><button id="ldh">刘德华</button><button id="zxy">张学友</button><br><img src="./images/ldh.jpg" alt="" width="200px" height="200px" title="刘德华" id="img"><script>// 修改属性 src// 我们可以操作元素得方法 来修改元素得属性 就是 元素的是什么属性 在重新给值就可以完成相应的赋值操作了// 1.获取元素var ldh = document.getElementById('ldh')var zxy = document.getElementById('zxy')var img = document.getElementById('img')// 2.注册事件 程序处理zxy.removed = function() {// 当我们点击了图片的时候图片路径就发生变化 这里的.表示 的 得意思 img对象下的src属性img.src = './images/zxy.jpg';// 当我们变换图片得同时里面得title也要跟着变 所以前面要加上img.img.title = '张学友';}ldh.removed = function() {img.src = './images/ldh.jpg';img.title = '刘德华';}</script>
3.操作表单元素属性 利用DOM可以操作如下表单元素的属性
type、value、checked、selected、disabled
代码演示：
<body><button>按钮</button><input type="text" value="输入内容"><script>// 我想把value里面的输入内容改变为 被点击了// 1.获取元素var but = document.querySelector('button')var input = document.querySelector('input')// 2.注册事件 处理程序but.removed = function() {// input.innerHTML = '被点击了'; 这个是 普通盒子 比如 div 标签里面的内容// 表单里面的值 文字内容是通过value来修改的input.value = '被点击了'// 如果需要某个表单被禁用 不能再点击了使用 disabled 我们想要这个按钮 button禁用// but.disabled = true// 还有一种写法// this指向的是事件函数的调用者 谁调用就指向谁 这里调用者是btnthis.disabled = true}</script>
</body>
4.操作元素样式属性 我们可以通过 JS 修改元素的大小、颜色、位置等样式。
1.element.style 行内样式操作
注意：
JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor
JS 修改 style 样式操作，产生的是行内样式，所以行内式比内嵌式高
代码演示
<style>div {width: 200px;height: 200px;background-color: red;}</style>
</head><body><div></div><script>// 要求点击div变成粉色 height变为250px// 1.获取元素var div = document.querySelector('div');// 2.注册事件 处理程序div.removed = function() {// div.style里面的属性 采取的是驼峰命名法// this等于div this调用者 谁调用谁执行this.style.backgroundColor = 'pink'this.style.height = '250px'}</script>
2.element.className 类名样式操作
注意：
如果样式修改较多，可以采取操作类名方式更改元素样式。
class因为是个保留字，因此使用className来操作元素类名属性
className 会直接更改元素的类名，会覆盖原先的类名。
代码演示
<style>div {width: 100px;height: 100px;background-color: pink;}.change {background-color: purple;color: #fff;font-size: 25px;margin-top: 100px;}</style>
</head><body><div class="first">文本</div><script>// 1. 使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单的情况下使用var test = document.querySelector('div');test.removed = function() {// this.style.backgroundColor = 'purple';// this.style.color = '#fff';// this.style.fontSize = '25px';// this.style.marginTop = '100px';// 让我们当前元素的类名改为了 change// 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况 如果想继续添加样式即在change添加即可// 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器// this.className = 'change';this.className = 'first change';}</script>
5.自定义属性的操作 js给我们规定了可以自己添加属性 在操作元素属性的时候，元素.语法只能操作元素天生具有的属性,如果是自定义的属性，通过.语法是无法操作的只能通过getAttribute和setAttribute去操作，他俩是通用的方法，无论元素天生的还是自定义的都可以可以操作1.获取属性值
element.属性 获取属性值。
element.getAttribute(‘属性’)；
区别:
element.属性 获取内置属性值(元素本身自带的属性 如果是自定义属性不能被获取)
element.getAttribute(‘属性’)；主要获得自定义的属性 (标准) 我们自定义的属性
2.设置属性值
element.属性 = ‘值’ 设置内置属性值
element.setAttribute(‘属性’，‘值’)
区别：
element.属性 设置内置属性值
element.setAttribute(‘属性’)；主要设置自定义的属性(标准)
3.移除属性
element.removeAttribute(‘属性’)；
代码演示
<body><div id="demo" index="1" class="nav"></div><script>var div = document.querySelector('div');// 1.获取元素的属性值// (1) element.属性console.log(div.id);// (2) element.getAttribute('属性') get获取得到 attribute属性的意思 我们自己添加的属性称之为自定义属性console.log(div.getAttribute('id')); //democonsole.log(div.getAttribute('index')); // 1// 2.设置元素的属性值// (1) element.属性 = '值' div.id = 'test'div.className = 'navs'// (2) element.setAttribute('属性','值')div.setAttribute('index', 2);div.setAttribute('class', 'footer') //这里就是class 不是className 比较特殊// 3.移除属性 removeAttribute(属性)div.removeAttribute('index');</script>
</body>
只要是自定义属性最好都是用element.setAttribute(‘属性’，‘值’)来设置 如果是自带属性用element.属性来设置
6.H5自定义属性 自定义属性的目的：第一、是为了保存属性 第二、并且使用数据 。有一些数据可以保存到页面中而不用保存到数据库中。H5 给我们新增了 自定义属性：1.设置H5自定义属性
H5规定自定义属性data-开头做为属性名并且赋值 比如<div data-index:“1”>
或者使用JS设置element.setAttribute(‘deta-index’,2)
2.获取H5自定义属性
兼容性获取 element.getAttribute(‘data-index’) 推荐开发中使用这个
H5新增element.dataset.index 或者element.datase[‘index’] ie 11以上才支持
代码演示
<body><div getTime="10" data-index="20" data-name-list="40"></div><script>// 获取元素var div = document.querySelector('div');console.log(div.geTime); //undefined getTime是自定义属性不能直接通过元素的属性来获取 而是用自定义属性来获取的getAttribute(‘属性’)console.log(div.getAttribute('getTime')); //10// H5添加自定义属性的写法以data-开头div.setAttribute('data-time', 30)// 1.兼容性获取H5自定义属性console.log(div.getAttribute('data-time')); // 30// 2.H5新增的获取自定义属性的方法 它只能获取data-开头的// dataset 是一个集合的意思存放了所有以data开头的自定义属性 如果你想取其中的某一个只需要在dataset.的后面加上自定义属性名即可console.log(div.dataset);console.log(div.dataset.time); // 30// 还有一种方法dataset['属性']console.log(div.dataset['time']); // 30// 如果自定义属性里面有多个-链接的单词 我们获取的时候采取驼峰命名法 不用要-了console.log(div.dataset.nameList); // 40console.log(div.dataset['nameList']); // 40</script>
</body>五.节点操作 1.为什么要学习节点操作 获取元素通常使用俩种方式
2.节点概述 网页中的所有内容都是节点(标签、属性、文本、注释等等) ，在DOM中，节点使用node表示。HTML DOM
元素节点 nodeType 为 1
属性节点 node Name为 2
文本节点 nodeValue为 3 (文本节点包含文字、空格、换行等等)
实际开发中，节点操作主要操作的是元素节点
3.节点层级 利用DOM树可以把节点划分为不同得层级关系，常见得是父子兄层级关系
1.父级节点
1.node.parentNode
parenNode属性可以返回某节点得父节点，注意是最近的父节点哟！！！
如果指定的节点没有父节点就返回null
代码演示
<body><div class="box"><div class="box1"></div></div><script>var box1 = document.querySelector('.box1')// 得到的是离元素最近的父节点(亲爸爸) 得不到就返回得是nullconsole.log(box1.parentNode); // parentNode 翻译过来就是父亲的节点</script>
</body>2.子级节点操作
1.parentNode.children（非标准）
parentNode.children 是一个只读属性 ，返回所有的子元素节点 。它只返回子元素节点，其余节点不返回(重点记住这个就好，以后重点使用 )
代码演示
<body><ul><li>1</li><li>1</li><li>1</li><li>1</li></ul><script>// DOM 提供的方法（APL）获取 这样获取比较麻烦var ul = document.querySelector('ul')var lis = ul.querySelectorAll('li')// children子节点获取 ul里面所有的小li 放心使用没有限制兼容性 实际开发中经常使用的console.log(ul.children);</script>如何返回子节点的第一个和最后一个？
2.parentNode.firstElementChild
firstElementChild返回第一个子元素节点 ，找不到则返回unll
3.parentNode.lastElementChild
lastElementChild返回最后一个子元素节点 ，找不到则返回null
注意：这俩个方法有兼容性问题，IE9以上才支持 谨慎使用
如果想要第一个子元素节点，可以使用 parentNode.chilren[0]
如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1]
代码演示
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script>var ul = document.querySelector('ul')// 1.firstElementChild 返回第一个子元素节点 ie9 以上才支持注意兼容console.log(ul.firstElementChild);// 2.lastElementChild返回最后一个子元素节点console.log(ul.lastElementChild);// 3.实际开发中用到的既没有兼容性问题又可以返回子节点的第一个和最后一个console.log(ul.children[0]);console.log(ul.children[ul.children.length - 1]); //ul.children.length - 1获取的永远是子节点最后一个</script>
</body>3.兄弟节点
1.node.nextSibling
nextSibling 返回当前元素的下一个兄弟节点 ，找不到则返回null。注意包含所有的节点
2.node.previousSibling
previousSibling 返回当前元素上一个兄弟节点 ，找不到则返回null。注意包含所以有的节点
代码演示
<body><div>我是div</div><span>我是span</span><script>var div = document.querySelector('div')// 返回当前元素的下一个兄弟节点nextSibling，找不到返回null。注意包含元素节点或者文本节点等等console.log(div.nextSibling); //这里返回的是#text 因为它的下一个兄弟节点是换行// 返回的是当前元素的上一个节点previousSibling，找不到返回null。注意包含元素节点或者文本节点等等console.log(div.previousSibling); //这里返回的是#text 因为它的上一个兄弟节点是换行</script>
</body>3.node.nexElementSibling
nexElementSibling 返回当前元素下一个兄弟元素节点，找不到返回null
4.node.previousElementSibling
previousElementSibling返回当前元素上一个兄弟节点，找不到返回null
注意：这俩个方法有兼容性问题，IE9以上才支持
代码演示
<body><div>我是div</div><span>我是span</span><script>var div = document.querySelector('div')// nextElementSiblingd得到下一个兄弟元素节点console.log(div.nextElementSibling); // span // previousElementSibling 得到的是上一个兄弟元素节点console.log(div.previousElementSibling); // null 因为它上面没有兄弟元素了返回空的</script>
</body>怎么解决兼容性问题呢？
function getNextElementSibling(element) {var el = element;while (el = el.nextSibling) {if (el.nodeType === 1) {return el;} }return null;}
4.创建节点
1.document.createElement('tagName')
document.createElement( ) 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在的是根据我们的需求动态生成的，所有我们也称为动态创建元素节点
我们创建了节点要给添加到节点里面去 称为 添加节点
1.node.appendChild（child）
node.appendChild（ ）方法将一个节点添加到指定父节点的子节点列表末尾
2.node.insertBefore(child，指定添加元素位置)
node.insertBefore( ) 方法将一个节点添加到父节点的指定子节点前面
代码演示
<body><ul><li>1</li></ul><script>// 1.创建节点 createElementvar li = document.createElement('li')// 2.添加节点 创建了节点要添加到某一个元素身上去 叫添加节点 node.appendChild(child) done 父级 child 子级 如果前面有元素了则在后面追加元素类似数组中的push依次追加var ul = document.querySelector('ul')ul.appendChild(li)// 3.添加节点 node.insertBefore(child，指定元素) 在子节点前面添加子节点 child子级你要添加的元素var lili = document.createElement('li')ul.insertBefore(lili, ul.children[0]) //ul.children 这句话的意思是添加到ul父亲的子节点第一个// 总结 如果想在页面中添加元素分为俩步骤1.创建元素 2.添加元素</script>
</body>5.删除节点
node.removeChild(child)
node.removeChlid（）方法从DOM 中删除一个子节点，返回删除的节点 简单点就是从父元素中删除某一个孩子node就是父亲child就是孩子
删除的节点.remove(没有参数) 注意：ie不支持
代码演示
<body><button>按钮</button><ul><li>熊大</li><li>熊二</li><li>熊三</li></ul><script>// 1.获取元素var ul = document.querySelector('ul')var but = document.querySelector('button');// 2.删除元素// but.removed = function() {// ul.removeChild(ul.children[0])// }// 3.点击按钮键依次删除，最后没有删除内容了 就禁用按钮 disabled = true 禁用按钮语法but.removed = function() {if (ul.children.length == 0) {this.disabled = true} else {ul.removeChild(ul.children[0])} }</script>
</body>6.复制节点(克隆节点)
node.cloneNode()
node.dloneNode()方法返回调用该方法节点得一个副本，也称为克隆节点/拷贝节点
注意
代码演示
<body><ul><li>1</li><li>2</li><li>3</li></ul><script>// 1.获取元素var ul = document.querySelector('ul');// 2.复制元素 node.cloneNode() 如果参数括号为空或者false则只会复制元素不会复制内容，如果待有参数true则内容和元素都会被复制var lis = ul.children[0].cloneNode(true);// 3.获取元素ul.appendChild(lis)</script>
</body>7.替换(改)节点
node. replaceChild ( 新节点, 替换到什么位置)
代码演示
< body> < ul class = "list" > < li> 1 < / li> < li> 2 < / li> < / ul> < script> var ulNode = document. querySelector ( '.list' ) ; var liRead = document. createElement ( 'li' ) liRead. innerHTML = '5' ; ulNode. replaceChild ( liRead, ulNode. children[ 1 ] ) < / script>
< / body>
8.三种动态创建元素区别
document.write()
element.innerHTML
document.createElement()
区别
document.write()是直接将内容写入页面的内容流，但是文档流执行完毕，它则会导致页面全部重绘
element.innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
element.innerHTML 创建多个元素效率更高(不要拼接字符串，采取数组形式拼接)，结果有点复杂
createElement()创建多个元素效率低一点点，但是结果更加清晰
总结：不同浏览器下,innerHTML效率要比createElement()高
代码演示
<body><button>点击</button><p>abc</p><div class="inner"></div><div class="create"></div><script>// window.onload = function() {// document.write('<div>123</div>');// }// 三种创建元素方式区别 // 1. document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘// var btn = document.querySelector('button');// btn.removed = function() {// document.write('<div>123</div>');// }// 2. innerHTML 创建元素var inner = document.querySelector('.inner');// for (var i = 0; i <= 100; i++) {// inner.innerHTML += '<a href="#">百度</a>'// }var arr = [];for (var i = 0; i <= 100; i++) {arr.push('<a href="#">百度</a>');}inner.innerHTML = arr.join('');// 3. document.createElement() 创建元素var create = document.querySelector('.create');for (var i = 0; i <= 100; i++) {var a = document.createElement('a');create.appendChild(a);}</script>
</body>
