内容回顾
一. JavaScript的DOM操作(一)
1.1. 继承的优点
- 代码复用
1.2. 节点导航
-
如果我们获取到一个节点(Node)后,可以根据这个节点去获取其他的节点,我们称之为节点之间的导航
-
节点之间存在如下的关系:
-
父节点:parentNode
-
前兄弟节点:previousSibling
-
后兄弟节点:nextSibling
-
子节点:childNodes
-
第一个子节点:firstNode
-
第二个子节点:lastNode
-
<!-- 我是注释, 哈哈 -->
我是文本, 呵呵呵
<div class="box">哈哈哈哈哈</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
// html元素
// var htmlEl = document.documentElement
// body元素
// var bodyEl = document.body
// head元素
// var headEl = document.head
// 文档声明
// var doctype = document.doctype
// console.log(htmlEl, bodyEl, headEl, doctype)
// 1. 获取节点导航
var bodyEl = document.body
// 1.1. 获取body所有的子节点
// console.log(bodyEl.childNodes)
// 1.2 获取body第一个子节点
// console.log(bodyEl.firstChild)
var bodyElFirstChild = bodyEl.firstChild
// 1.3 获取body中的注释
var bodyElCommentChild = bodyElFirstChild.nextSibling
console.log(bodyElCommentChild)
// 1.4 获取body的父节点
var bodyParent = bodyEl.parentNode
console.log(bodyParent)
1.3. 元素导航
-
**如果我们获取到一个元素(Element)后,可以根据这个元素去获取其他的元素,我们称之为***元素之间的导航节点之间存在如下的关系:
-
父元素:parentElement
-
前兄弟节点:previousElementSibling
-
后兄弟节点:nextElementSibling
-
子节点:children
-
第一个子节点:firstElementChild
-
第二个子节点:lastElementChild
-
<!-- 我是注释, 哈哈哈 -->
我是文本, 呵呵呵
<div class="box">哈哈哈哈哈</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
var bodyEl = document.body
// 根据body元素去获取子元素(element)
var childElement = bodyEl.children
// console.log(childElement)
// 获取box元素
var boxEl1 = bodyEl.firstElementChild
// 索引去获取
var boxEl2 = bodyEl.children[0]
// console.log(boxEl1)
// console.log(boxEl2)
// 获取ul元素
// 后兄弟元素
var ulEl = boxEl1.nextElementSibling
// console.log(ulEl)
var liEl = ulEl.children
console.log(liEl)
1.4. table、form导航
-
元素支持 (除了上面给出的,之外) 以下这些属性:
-
table.rows — 元素的集合;
-
table.caption/tHead/tFoot — 引用元素 ,,;
-
table.tBodies — 元素的集合;
-
-
,, 元素提供了 rows 属性:
- tbody.rows — 表格内部 元素的集合;
-
:
-
tr.cells — 在给定 中的 和 单元格的集合;
-
tr.sectionRowIndex — 给定的 在封闭的 // 中的位置(索引);
-
tr.rowIndex — 在整个表格中 的编号(包括表格的所有行);
-
- 和 :
- td.cellIndex — 在封闭的 中单元格的编号。
/*
table元素支持(除上面给出的之外)一下这些属性
table.rows <tr> 元素的集合
table.caption/tHead/tFoot 引用元素 <caption> <thead> <tfoot>
table.tBoodies <tbody> 元素的集合
<thead> <tfoot> <tbody>元素提供了rows属性
tbody.rows 表格内部<tr>元素的集合
<tr>
tr.cells 在给定<tr>中的<td>和<th>单元格的集合
tr.sectionRowindex 给定的<tr>在封闭的<thead> <tbody> <tfoot>中位置(索引)
tr.rowindex 在整个表格中 <tr>的编写(包括表格的所有行)
<td> 和 <th>
td.ceiindex 在封闭的<tr>单元格的编号
*/
// 小技巧 加上 as HTMLTableElement下面的tHead就有提示了
var tableEl = document.body.children[0]
// 通过table元素获取内部的后代元素
console.log(tableEl.tHead, tableEl.tBodies, tableEl.tFoot)
// rows所有的行
console.log(tableEl.rows)
// 拿到一行元素
var rowEl = tableEl.rows[2]
console.log(rowEl.cells[0])
<form action="">
<input name="account" type="text">
<input name="password" type="password">
<input name="kobes" type="checkbox" checked>
<select name="fruis">
<option value="apple">苹果</option>
<option value="orange">橘子</option>
</select>
</form>
// 获取form
// var formEl = document.body.firstElementChild
var formEl = document.forms[0]
// 获取form元素的子元素
// var inputEl = formEl.children[0]
var inputEl = formEl.elements.account
// console.log(inputEl)
setTimeout(function () {
console.log(inputEl.value)
}, 5000)
1.5. 获取任意元素方法
方法名 搜索方式 可以在元素上调用? 实时的?
querySelector CSS-selector ✔ -
querySelectorAll CSS-selector ✔ -
getElementById id - -
getElementsByName name - ✔
getElementsByTagName tag or '*' ✔ ✔
getElementsByClassName class ✔ ✔
- document.getElementsByClassName
- document.getElementById
- document.querySelector()
- document.querySelectorAll()
-
开发中如何选择呢?
-
目前最常用的是querySelector和querySelectAll;
-
getElementById偶尔也会使用或者在适配一些低版本浏览器时;
-
-
<div class="box"> <h2>我是标题</h2> <div class="container"> <p> 我是段落, <span class="keyword">coderwhy</span> 哈哈哈 </p> <p> 我也是段落, <span class="keyword">coderwhy</span> 哈哈哈 </p> <div class="articls"> <h2 id="title">我是小标题</h2> <p> 我是文章的内容, 哈哈哈哈哈哈哈哈哈哈啊啊啊啊啊啊啊啊啊啊啊啊 </p> </div> </div> </div>
// 拿到body
// var bodyEl = document.body
// 拿到box
// var boxEl = bodyEl.firstElementChild
// 拿到container
// var containerEl = boxEl.children[1]
// 拿到p元素
// var pEl = containerEl.children[0]
// 拿到keyword
// var spanEl = pEl.children[0]
// console.log(spanEl)
// spanEl.style.fontSize = "60px"
// spanEl.style.color = "red"
//
// 直接获取到keyword
// var spanEl = document.querySelector(".keyword")
// spanEl.style.fontSize = "60px"
// spanEl.style.color = "red"
// 通过class获取
// var keywords = document.getElementsByClassName("keyword")
// keywords.style.color = "red"
// console.log(keywords)
// 修改第一个
// keywords[0].style.color = "red"
// 修改所有的keyword
// for (var i = 0; i < keywords.length; i++) {
// keywords[i].style.color = "red"
// }
// 通过id获取元素
// var titleEl = document.getElementById("title")
// titleEl.style.color = "red"
/*
当元素彼此靠近或者相邻时, DOM导航属性非常有用
但是, 在实际开发中, 我们希望可以任意获取到某一元素应该如何操作
DOM为我们提供了获取元素的方法
querySelector
querySelectorAll
getElementById
getElementsByName 几乎用不到
getElementsByTagName 偶尔可能会用
getElementsByClassName
开发中如何选择呢
目前最常用的是querySelector和querySelectorAll
getElementByid偶尔也会使用或者在适配一些的低版本浏览器时
*/
// 通过选择器
// 如果由多个keyword就找到第一个就不找了
// var keywordEl = document.querySelector(".keyword")
// 多个keyword
var keywordEl = document.querySelectorAll(".keyword")
// for (var i = 0; i < keywordEl.length; i++) {
// keywordEl[i].style.color = "red"
// }
for (var el of keywordEl) {
el.style.color = "red"
}
var titleEl = document.querySelector("#title")
titleEl.style.color = "red"
1.6. Node节点常见的属性
- nodeType
- nodeName/tagName
- innerHTML/outerHTML/textContent
- nodeValue/data
-
目前,我们已经可以获取到节点了,接下来我们来看一下节点中有哪些常见的属性:
-
当然,不同的节点类型有可能有不同的属性;
-
这里我们主要讨论节点共有的属性;
-
-
nodeType属性:
-
nodeType 属性提供了一种获取节点类型的方法;
-
它有一个数值型值(numeric value);
-
常量 值 描述
Node.ELEMENT_NODE 1 一个 元素 节点,例如 <p> 和 <div>。
Node.TEXT_NODE 3 Element 或者 Attr 中实际的 文字
Node.COMMENT_NODE 8 一个 Comment 节点。
Node.DOCUMENT_NODE 9 一个 Document 节点。
Node.DOCUMENT_TYPE_NODE 10 描述文档类型的 DocumentType 节点。例如 <!DOCTYPE
html> 就是用于 HTML5 的。
-
nodeName:获取node节点的名字;
-
tagName:获取元素的标签名词;
-
tagName 和 nodeName 之间有什么不同呢?
-
tagName 属性仅适用于 Element 节点;
-
nodeName 是为任意 Node 定义的:
-
对于元素,它的意义与 tagName 相同,所以使用哪一个都是可以的;
-
对于其他节点类型(text,comment 等),它拥有一个对应节点类型的字符串;
-
-
-
innerHTML 属性
- 将元素中的 HTML 获取为字符串形式;
- 设置元素中的内容;
-
outerHTML 属性
-
包含了元素的完整 HTML
-
innerHTML 加上元素本身一样;
-
-
textContent 属性
- 仅仅获取元素中的文本内容;
-
innerHTML和textContent的区别:
-
使用 innerHTML,我们将其“作为 HTML”插入,带有所有 HTML 标签。
-
使用 textContent,我们将其“作为文本”插入,所有符号(symbol)均按字面意义处理。
-
-
nodeValue/data
- 用于获取非元素节点的文本内容
// 1. 获取三个节点
// 获取body所有的子节点
var bodychildNodes = document.body.childNodes
var commentNode = bodychildNodes[1]
var textNode = bodychildNodes[2]
var divNode = bodychildNodes[3]
// console.log(commentNode, textNode, divNode)
// 2. 节点属性
// nodeType 节点类型
// for (var node of bodychildNodes) {
// if (node.nodeType === 8) {
// } else if (node.nodeType === 3) {
// }
// }
// console.log(commentNode.nodeType, textNode.nodeType, divNode.nodeType)
// 3. nodeName 节点名称
// tagName 针对元素(element)
// console.log(commentNode.nodeName, textNode.nodeName, divNode.nodeName)
// console.log(commentNode.nodetagName, divNode.tagName)
// 4 data(nodeValue)/innerTHML/textContent
// data 针对非元素节点获取数据
// innerHTML 对应html元素也会获取
// textContent只会获取文本
// console.log(commentNode.data, textNode.data, divNode.data)
// console.log(divNode.innerHTML)
// console.log(divNode.textContent)
// 设置文本, 作用是一样
// 设置文本中包含元素内容, 那么innerHTML浏览器会解析, textContent会当成文本的一部分
// divNode.innerHTML = "<h2>呵呵呵呵</h2>"
// divNode.textContent = "<h2>嘿嘿嘿</h2>"
// 5. outerHTML
console.log(divNode.outerHTML)
1.7. 全局属性-hidden
- hidden属性:也是一个全局属性,可以用于设置元素隐藏
<button class="btn">切换</button>
<!-- hidden -->
<div id="abc" class="cba" title="aaa" style="color: red;">
哈哈哈哈哈
</div>
// 1. 获取元素
var boxEl = document.querySelector(".cba")
var btnEl = document.querySelector(".btn")
// 2. 监听btn的点击
btnEl.onclick = function() {
// 1. 只是隐藏
// boxEl.hidden = true
// boxEl.style.display = "none"
// 2. 切换
// if (boxEl.hidden === false) {
// boxEl.hidden = true
// } else {
// boxEl.hidden = false
// }
// 3. 直接取反
boxEl.hidden = !boxEl.hidden
}
二. JavaScript的DOM操作(二)
2.1. attribute分类
-
浏览器在解析HTML元素时,会将对应的attribute也创建出来放到对应的元素对象上。
-
比如id、class就是全局的attribute,会有对应的id、class属性;
-
比如href属性是针对a元素的,type、value属性是针对input元素的;
-
-
属性attribute的分类:
- 标准的attribute:某些attribute属性是标准的,比如id、class、href、type、value等;
- 非标准的attribute:某些attribute属性是自定义的,比如abc、age、height等;
<!-- 属性: attribute(特性) -->
<!--
attribute分类
1. 如果是HTML标准指定的attribut, 称之为标准Attribute
2. 而自定义的Attribute, 称之为非标准Attributte
-->
<div id="abc" class="box" title="box"
age="18" height="1.88">
我是box
</div>
<a href="www.baidu.com">百度一下</a>
<script>
/*
前面学到了如何获取节点, 以及节点通常所包含的属性, 接下来我们来仔细研究元素Element
我们知道, 一个元素有开始标签, 结束标签, 内容之外, 还有很多属性(attribute)
浏览器在解析html元素时, 会将对应的attribute也创建出来放到对应的元素对象上
比如id, calss就是全局的attribute, 会有对应的id, calss属性
比如href属性是针对a元素的, type, value属性是针对input的
*/
2.3. 所有attribute操作
-
对于所有的attribute访问都支持如下的方法:
-
elem.hasAttribute(name) — 检查特性是否存在。
-
elem.getAttribute(name) — 获取这个特性值。
-
elem.setAttribute(name, value) — 设置这个特性值。
-
elem.removeAttribute(name) — 移除这个特性。
-
attributes:attr对象的集合,具有name、value属性;
-
<div id="abc" class="box" title="box" age="18" height="1.88"> 我是box </div> <input type="checkbox" checked="checked">
-
var boxEl = document.querySelector(".box") /* 对于所有的attribute访问都支持如下的方法 elem.hasAttribute(name): 检查特性是否存在 elem.getAttribute(name): 获取这个特性值 elem.setAttribute(value): 设置这个特性值 elem.removeAttribute(name): 移除这个特性 attributes: attr对象的几个, 具有name, value属性 attribute具备以下特性 它们的名字是大小写不敏感的(id与ID相同) 它们的值总是字符串类型的 */ // 1. 所有的attribute都支持的操作 console.log(boxEl.hasAttribute("age"), boxEl.hasAttribute("abc"), boxEl.hasAttribute("id")) console.log(boxEl.getAttribute("age"), boxEl.getAttribute("abc"), boxEl.getAttribute("id")) boxEl.setAttribute("id", "cba") boxEl.removeAttribute("id") var boxAttribute = boxEl.attributes for (var attr of boxAttribute) { console.log(attr.name, attr.value) } // 2. 通过getAttribute()一定是字符串类型 var inputEl = document.querySelector("input") console.log(inputEl.getAttribute("checked"))
-
-
attribute具备以下特征:
-
它们的名字是大小写不敏感的(id 与 ID 相同)。
-
它们的值总是字符串类型的
-
2.4. property操作
-
什么叫property
- 对象中的属性称之为property
-
标准的attribute会转成对象模型中的property
-
两个之间会相互影响
-
对于标准的attribute,会在DOM对象上创建与其对应的property属性:
-
在大多数情况下,它们是相互作用的
-
改变property,通过attribute获取的值,会随着改变;
-
通过attribute操作修改,property的值会随着改变;
- 但是input的value修改只能通过attribute的方法;
-
-
除非特别情况,大多数情况下,设置、获取attribute,推荐使用property的方式:
- 这是因为它默认情况下是有类型的;
<!-- 元素中的属性称之为attribute -->
<!-- 标准的attribute在对应的对象模型中都有对应的property -->
<div id="abc" class="box" title="标题" age="18" height="1.88">
我是box
</div>
<input type="checkbox" checked>
账号: <input type="text" class="account">
<button class="btn">设置input的值</button>
// 通过property获取attribute的值
// 获取box元素
var boxEl = document.querySelector(".box")
console.log(boxEl.id, boxEl.title, boxEl.age, boxEl.height)
// input元素
var inputEl = document.querySelector("input")
// if (inputEl.getAttribute("checked")) {
// console.log(input选中状态)
// }
if (inputEl.checked) {
console.log('input选选中状态')
}
// 2. attribute和property是相互影响的
boxEl.id = "aaaaa"
console.log(boxEl.getAttribute("id"))
boxEl.setAttribute("title", "哈哈哈")
console.log(boxEl.title)
// 3. 比较特殊的情况input设置值 (了解一下)
var accountInputEl = document.querySelector(".account")
// accountInputEl.value = "why"
// accountInputEl.setAttribute("value", "kobe")
var btnEl = document.querySelector(".btn")
btnEl.onclick = function() {
// 优先级更高
accountInputEl.value = "why"
// accountInputEl.setAttribute("value", "kobe")
}
2.5. class和style
2.5.1. class和style用法区别
-
有时候我们会通过JavaScript来动态修改样式, 这个时候我们有两个选择
-
选择一: 在css中编写好对应的样式, 动态添加class
-
选择二: 动态的修改style属性
-
-
开发中如何选择
-
在大多数情况下, 如果可以动态修改class完成某个功能, 更推荐使用动态calss
-
如果对于某些情况, 无法通过动态修改class, (比如精准修改某个css属性的值, 那么就可以修改style
-
-
元素的class attribute,对应的property并非叫class,而是****className:
-
这是因为JavaScript早期是不允许使用class这种关键字来作为对象的属性,所以DOM规范使用了className;
-
虽然现在JavaScript已经没有这样的限制,但是并不推荐,并且依然在使用className这个名称;
-
-
我们可以对className进行赋值,它会替换整个类中的字符串。
-
如果我们需要添加或者移除单个的class,那么可以使用classList属性。
// 1. 获取box
var boxEl = document.querySelector(".box")
// 2. 监听点击
var counter = 1
boxEl.onclick = function() {
// 直接修改style
// boxEl.style.color = "red"
// boxEl.style.fontSize = "24px"
// boxEl.style.backgroundColor = "green"
// 动态的添加某一个class
boxEl.className = "active"
// 动态修改boxEl的宽度
boxEl.style.width = 100 * counter + "px"
counter++
}
2.5.2. className、classList
-
elem.classList 是一个特殊的对象:
-
elem.classList.add (class) :添加一个类
-
elem.classList.remove(class):添加/移除类。
-
elem.classList.toggle(class) :如果类不存在就添加类,存在就移除它。
-
elem.classList.contains(class):检查给定类,返回 true/false。
-
◼ classList是可迭代对象,可以通过for of进行遍历。
.active {
color: #fff;
background-color: #f80;
font-size: 25px;
}
<div class="box">
我是box
</div>
<button>切换</button>
var boxEl = document.querySelector(".box")
var btnEl = document.querySelector("button")
// 1. 方法一" className
// boxEl.className = "abc"
// 2. 方法二: classList
// 添加
boxEl.classList.add("abc")
boxEl.classList.add("active")
// 移除
boxEl.classList.remove("abc")
// 需求, 让box在active之间进行切换
btnEl.onclick = function() {
// 方法一: 添加移除
// if(boxEl.classList.contains("active")) {
// boxEl.classList.remove("active")
// } else {
// boxEl.classList.add("active")
// }
// 方法二: toggle
boxEl.classList.toggle("active")
}
2.5.3. style的用法
- 驼峰写法
- 设置空字符串使用默认值
- cssText(了解)
-
如果需要单独修改某一个CSS属性,那么可以通过style来操作:
-
对于多词(multi-word)属性,使用驼峰式 camelCase
-
如果我们将值设置为空字符串,那么会使用CSS的默认样式:
-
-
多个样式的写法,我们需要使用cssText属性:
- 不推荐这种用法,因为它会替换整个字符串;
var boxEl = document.querySelector(".box")
// 在property中使用驼峰格式
// console.log(boxEl.style)
// 如果将一个属性值, 设置为空字符串, 那么使用默认值
// boxEl.style.display = ""
// boxEl.style.fontSize = ""
// 设置多个样式
// boxEl.style.fontSize = "30px"
// boxEl.style.color = "red"
boxEl.style.cssText = "font-size: 30px; color: red;"
2.5.4. getComputedStyle方法
-
如果我们需要读取样式:
-
对于内联样式,是可以通过style.*的方式读取到的;
-
对于style、css文件中的样式,是读取不到的;
-
-
这个时候,我们可以通过getComputedStyle的全局函数来实现:
var boxEl = document.querySelector(".box")
console.log(boxEl.style.backgroundColor)
// console.log(boxEl.style.fontSzie)
//
console.log(getComputedStyle(boxEl).fontSize)
2.6. dataset(掌握)
data-* -> dataset
- 前面我们有学习HTML5的data-*自定义属性,那么它们也是可以在dataset属性中获取到的
var boxEl = document.querySelector(".box")
// 小程序开发中使用
console.log(boxEl.dataset.age)
console.log(boxEl.dataset.height)
boxEl