日考
一：js包括哪几部分？
- DOM BOM ES
二：什么是DOM？
DOM：文档对象模型 DOM是操作文档的接口 （API）
三DOM有几大对象？
- 文档对象：document
- 元素对象：elment 唉理门特
- 文本对象：text
- 属性对象：Attribnt 唉吹目
- 节点对象：node 檽熬的
四：什么是BOM？
BOM：浏览器对象模型 BOM操作浏览器的接口（API）
五：BOM有几大对象？
- 窗口：window
- 历史记录：history 黑丝蕊
- 地址栏：location 洛k神
- 版本信息：navigator 糯雾给的
- 屏幕：screen 四鬼应的
js包含哪几部分
ES：一门语言，学习ES学习的是语法（ECMA：欧洲计算机协会 ECMAScript）
BOM：浏览器对象模型
用途：提供给ES一个接口来操作浏览器
DOM：文档对象模型
用途：提供给ES一个接口来操作文档
BOM简介
-
BOM ： Browser Object Model 浏览器对象模型
-
BOM把浏览器的一切定义成了一个对象模型。
Window：整个浏览器被定义成了window对象
document：把文档定义成了一个对象
Screen：把显式浏览器窗口的屏幕定义成一个对象
Location：把地址栏定义成一个对象
Navigator：把浏览器的介绍信息定义成一个对象 -
BOM的用途：允许ES来操作浏览器的一切
-
BOM目前没有标准
DOM简介
-
DOM：Dcoument Object Model 文档对象模型
-
用途：DOM就是为了操作文档用的
-
在DOM眼泪，整个文档的内容都是对象。
-
DOM把一切内容都定义成了对象。
文档是对象
html元素是对象
文本是对象
属性是对象
样式是对象 -
DOM是W3C制定的一套标准
DOM树
40e4a0a4095e0425978e235284a3247.png
8da3c46f29ac7540c345ac51a8e25ec.png
Document
- Documnet对象表示网页文档
- Documnet对象是DOM的核心对象
- Documnet 对象是访问文档的入口
用途
Document对象主要用途：
- 查：获取元素
- 增：创建元素
- 删：删除元素
- 改：替换元素
获取元素的方法
一：传统方法
- 通过id获取元素getElementById()
window.document.getElementById("id")
//等同于
document.getElementById("id")
- 通过标签名获取元素getElementsByTagName()
window.document.getElementsByTagName("标签名")
//等同于
document.getElementsByTagName("标签名")
- 通过element获取
const U1 = document.getElementById("u1")
const Li = U1.getElementsByTagName("li")//element获取
console.log(Li)//返回一个全是li标签的元素对象
二：H5新增方法
-
通过class选择器：
document.getElementsByClassName("class")
element.getElementsByClassName("class") -
通过css选择器：document.querySelector("selector")
-
通过css选择器获取一组元素：
document.quenrySelectorAll("sclector")
element.quenrySelectorAll("sclector")
const arr = document.getElementsByClassName("l1")
const arr1 = document.getElementById("u1")
const l1 = arr1.getElementsByClassName("l1")
console.log(l1)
三：特殊方法
- document.title 获取标题标签
- document.body 获取主体标签
- document.head 获取头部标签
- document.documentElement 获取根元素
- document.links获取页面中所有的<a>元素
- document.forms 获取页面中所有的表单<input>元素
- document.images获取页面中所有的图片<ung>元素
console.log(document.title);
console.log(document.body);
console.log(document.head);
console.log(document.documentElement);//重点，获取到html根元素
操作文档内容
在获取完元素之后，接下来我们要学习元素对象之间的关系。DOM定义了两套API：
Node API(节点API)：把DOM树中的的对象看成节点（node）树
Element API(元素API)：把DOM树中的对象看成元素树
Node API
定义：Node APL把文档中的一切对象看成是节点（node）。“Node”对象是API的核心对象。
用途：
-
查找节点的基本信息
-
查找节点之间的关系：父子，兄弟，后代
-
操作节点
增
删
改
查
三大基本属性
Node.nodeType
定义：表示节点的类型，节点类型用一个数字表示，Node把节点分为了9种。
| 节点名称 | 数字表示 |
|---|---|
| 元素节点 | 1 |
| 属性节点 | 2 |
| 文本节点 | 3 |
| 注释节点 | 8 |
| 文档节点 | 9 |
1：元素节点
console.log(document.documentElement.nodeType)//1
2：属性节点:元素.getAttributeNode("属性名"):方法从当前元素中通过名称获取属性节点
console.log(document.body.getAttributeNode("id").nodeType)//2
3：文本节点：childNodes，属性可返回指定节点的子节点的节点列表
<body id="home">
<h2>二级标题</h2>
<!-- 注释节点 -->
<script>
//获取文本节点的方法
const arr = document.body.childNodes
console.log(arr[0].nodeType)//3
</script>
8：注释节点：childNodes，属性可返回指定节点的子节点的节点列表
<body id="home">
<h2>二级标题</h2>
<!-- 注释节点 -->
<script>
//获取注释节点的方法
const arr = document.body.childNodes
console.log(arr[3].nodeType)//8
</script>
9：文档节点:
console.log(document.nodeType)//=9
Node.nodeName
Node.nodeValue
节点定义
父节点：一个节点之上的直接节点就它的父节点
子节点：一个节点之下的直接节点就它的子节点
兄弟节点：具有同父节点下的节点
后代节点：一个节点之下的所有节点
查找节点关系
- Node.childNodes:属性可返回指定节点的子节点的节点列表
- 元素.getAttributeNode("属性名"):方法从当前元素中通过名称获取属性节点
- Node.parentNode:返回当前节点的父节点
- Node.chiIdNodes:返回当前节点的子节点
- Node.nextSibling：返回当前节点的下一个子节点
- Node.previousSibling：返回当前节点的上一个子节点
- Node.firstChild：返回当前节点的第一个子节点
- Node.lastChild：返回当前节点的最后一个子节点
Array.from(伪数组名)
- 将伪数组转成真正的数组
Array.from(document.images)//把伪数组转成真正的数组
1.Node.appendChild()
append ： 绑定
定义:
方法用于将一个节点添加到指定父节点的子节点列表的末尾
语法：
父节点节点.appendChild(子节点对象)
- 父节点对象：就是你获取元素
- 子节点对象：已有节点，新建节点
返回值：返回追加后的子节点
实例：
2.Node.insertBefore()
定义：
方法用于将一个节点添加到指定父节点的子节点列表的开头
语法：
parentNode.insertBefore(newNode, referenceNode);
insertedNode 被插入节点 (newNode)
parentNode 新插入节点的父节点
newNode 用于插入的节点
referenceNode newNode 将要插在这个节点之前
返回值：
3.Node.removeChild()
定义：
从父节点身上删除子节点。
语法：
父节点对象.removeChild(子节点对象)
返回值：返回删除的子节点对象或null
4.document.createElement()
定义：
创建一个新元素。(在挂在到DOM之前，新元素存储在内存里)
语法：
document.createElement('标签名')
返回值：返回删除的子节点对象或null
对照表
- next 奈可四特 ： 下一个
- Pre 破蕊 ：前
看：view 预习：preview - Previous 破蕊微哦死 ：上一个
- som
- child 孩子 （单数） children孩子们（复数）
- 父母：parent
- sibing：兄弟姐妹 c搏琳
- ndoe ：节点
- element：元素
| Element API | Node API | |
|---|---|---|
| 获取子对象列表 | children | childNodes |
| 获取第一个子节点 | firstElementChild | firstChild |
| 获取最后一个子对象 | lastElementChild | lastChild |
| 获取下一个子节点 | nextElementSibling | nextSibling |
| 获取上一个子节点 | previousElementSibling | previousSibling |
| 获取子对象的父对象 | parentElement | parentNode |
Node API操作节点对照表
| 父.append(子) | ||
| 父.insertBefore(新,旧) | ||
1.dom是什么
文档对象模型 操作文档的接口
w3c制定的一套标准
核心对象：document
可以对文档进行
- 添加元素
- 修改元素
- 获取元素
- 删除元素
dom把一切都看成了对象
元素对象
样式对象
文本对象
文档对象
属性对象
dom定义两套API
元素 API
节点 API
2.dom树的理解
- 浏览器会解析你的html代码，生成dom树
- DOM把整个文档定义成了树状模型
- 在DOM眼里，全部文档内容都是对象,其中有五种常见的：
元素对象
文本对象
文档对象：其中文档对象是dom的核心对象
属性对象
注释对象 - dom定义了许多API ( 属性和方法 ) 操作这些对象
3.对document的认识
定义：
- Documnet对象表示网页文档
- Documnet对象是DOM的核心对象
- Documnet 对象是访问文档的入口
用途：
document对象主要用于查找元素,修改文档，创建元素
在查找元素时，有三类方法：
- 传统方法
- H5新增方法
- 特殊方法（选择元素的快捷键）
4.对象Node API的认识
- 定义：Node API 把DOM树全部对象看成节点树，并为这些节点定义了大量属性和方法
用途：
- 查找元素,修改文档，创建元素，删除元素（增，删，改，查）
- 查找节点之间的关系：父子，兄弟，后代
5.Node API 和document API查找元素的区别
- document API查找元素的方式是：直接查找
- Node API查找元素的方式是：间接查找，也就是按照元素之间的关系查找。
6.Node API 如何查找节点的基本信息
三大基本属性：
node type：查找节点的类型
node nome：查找节点名称
node value：查找节点值
- 返回文本节点，属性节点和注释节点的值
- 元素和文档节点返回null
<h2>hello wold</h2>
<script>
const h2 = document.querySelector("h2")
console.log(h2)
console.log(h2.nodeType)//1
console.log(h2.nodeName)//h2
console.log(h2.nodeValue)//标签默认null
console.log(h2.firstChild.nodeValue)//hello wold
// 元素.getAttributeNode("属性名")
const aaa = h2.getAttributeNode("id")
console.log(aaa.nodeType)//2
console.log(aaa.nodeValue)//aaa
console.log(aaa.nodeName)//id
</script>
7.Node APl 操作节点的方法有6种
1.Node.appendChid("子元素")
const li =document.createElement("li")
//向ul添加子元素li Node.appendChid("元素") Node.insertBefore(元素，元素位置)
const ul = document.querySelector("ul")
li.innerHTML = "wold"
ul.appendChild(li)
2.Node.insertBefore(子元素，子元素位置)
const li2 =document.createElement("li")
//向ul添加子元素li Node.appendChid("元素") Node.insertBefore(元素，元素位置)
li2.innerHTML = "hello"
ul.insertBefore(li2,li)
3.Node.removeChild(node):必须在父级节点上执行removeChild()
定义：在父节点身上删除子节点
语法：
父节点.removeChild(子节点)
返回值：删除的子节点
实例：点击按钮删除div的子节点
<button>按钮</button>
<div><a href="#">和</a><a href="">魈</a><a href="">宝</a><a href="">6</a></div>
<script>
document.querySelector("button").onclick=function(){
document.querySelector("div").removeChild(document.querySelector("div").firstElementChild)
}
4.Node.remove():删除父节点
定义：将元素从DOM中删除
语法：
Node.remove()无参数
返回值：无
实例：
<button>按钮</button>
<script>
//点击按钮，删除按钮
document.querySelector("button").onclick=function(){
this.remove()
}
</script>
5.Node.replaceChild(子节点)：在父节点上执行替换子节点的方法
定义：替换子节点为其他节点
语法：
node.replaceChild (newnode,oldnew )
参数：
node：父节点
newnode : 必需，替换元素
oldnew : 必需，被替换是元素。
返回值：成功就返回被替换的节点，失败返回null
实例1.0：
<body>
<ul>
<li>月月</li>
<li>笑亮</li>
</ul>
<ul>
<li>大白</li>
<li>魈黑</li>
</ul>
<script>
console.log( document.body.replaceChild(document.body.firstElementChild,document.body.lastElementChild))
</script>
实例2.0:点击按钮，将hello替换成你好
<button>按钮</button>
<div> <h2>hello</h2></div>
<script>
//点击按钮，创建新文本“你好”节点
const btn = document.querySelector("button")
const h2 = document.querySelector("h2")
let h1
btn.addEventListener("click",()=>{
h1 = document.createElement("h1")
// h1.innerHTML = "你好"
const text= document.createTextNode("你好")
h1.appendChild(text)
document.querySelector("div").replaceChild(h1,h2)
})
</script>
6.Node.hasChidNodes():在父节点身上查询子节点
定义：该方法用来判断一个元素是否有子节点
语法：
父节点.hasChildNodes()//没有参数
返回值：
- 返回值为true或者false
- 文本节点和属性节点不可能再包含子节点，所以对于这两类节点使用ChildNodes()方法返回值永远为false
- 如果hasChildNodes()返回值为false，则childNodes，firstChild，lastChild将为空数组或者空字符串
实例：查询ul是否有子节点
<ul>
<li>1</li>
<li>2</li>
</ul>
<script>
// hasChildNodes()
console.log( document.querySelector("ul").hasChildNodes())//true
</script>
Element
用途：查找元素，元素的属性，元素的内容
查找元素
Element.parentElement 查找父元素
Element.children 查找子元素列表
Element.firstElementChild 查找第一个子元素
Element.lastElementChild 查找最后一个子元素
Element.nextElementSibling 查找下一个子元素
Element.previousElementSibling 查找上一个子元素
Element.childElementCount 查找子元素数量
查找属性
元素.getAttributeNode("属性名")
方法从当前元素中通过名称获取属性节点
元素.attribute//非标准
返回一个伪数组，包含指定元素的所有属性节点
实例：
<body>
<div>
<h2 id="aaa" class="bbb">hello world</h2>
</div>
<script>
const div = document.querySelector("div")
const h2 = document.querySelector("h2")
console.log(div.childNodes)
//元素.getAttributeNode("属性名")
console.log(h2.getAttributeNode("id"))
//元素.attribute//非标准
console.log(h2.attributes)//NamedNodeMap [ id="aaa", class="bbb" ]
console.log(h2.attributes.id)//id="aaa"
操作class，两种方法
- 利用元素的属性去操作
btn.addEventListener("click",function(){
div.firstElementChild.nextElementSibling.style.color = "red"
h2.className = "red"
console.log(11)
})
h5后：元素.classList 返回一个伪数组
classList 伪数组三个方法
- 元素.classList.add()//向class值列表中添加一个值
- 元素.classList.remove()//向class值列表中删除一个值
- 元素.classList.toggle()//如果class值有，就执行remove，没有执行add
btn[0].addEventListener("click",function(){
//1.点击按钮，让文字变成红色 add
h2.classList.add("red")
//2.点击按钮删除边框 remove
// h2.classList.remove("blue")
})
btn[1].addEventListener("click",function(){
//3.点击按钮，变黑
h2.classList.remove("red")
})
btn[2].addEventListener("click",function(){
//3.点击按钮，如果文字为红，就变黑，是黑就变红
h2.classList.toggle("red")
})
查找或设置元素内容
Element API与Node API均提供了三种操作元素内容的属性:
Element.innerHTMLElement.innerTextElement.textContent
Node.innerHTML
展示'机读‘内容
返回html代码(把HTML代码看成代码)
Node.innerText
展示’人类可读‘内容 :表示当前的HTML内容。
返回文本内容，忽略标签和空格(把HTML代码看成纯文本)
Node.TextContent
返回文本内容，只忽略标签
获取节点和后代节点的HTML内容
注意：Node.textContent和HTMLElement.innerText很相似，但有区别。
示例: innerText、innerHTML和textContent区别
示例：
<div>
hello world! <a href="#">欢迎来到我的叫车站</a>
</div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<script>
const div = document.querySelector("div")
const ul = document.querySelector("ul")
//元素.innerHTML:返回html代码(把HTML代码看成代码)
console.log(div.innerHTML)//hello world! <a href="#">欢迎来到我的叫车站</a>
ul.firstElementChild.innerHTML = div.innerHTML
//innerText：返回文本内容，忽略标签和空格(把HTML代码看成纯文本)
console.log(div.innerText)//hello world! 欢迎来到我的叫车站
ul.firstElementChild.nextElementSibling.innerText = div.innerHTML
//TextContent：返回文本内容，只忽略标签
console.log(div.textContent)
ul.lastElementChild.textContent = div.textContent
创建元素
Document.createElement()
定义：用于创建一个新的元素节点
语法：
document.createTextNode(元素)
实例：
<div>
<button>按钮</button>
<h1>抽到0号获得神秘大奖</h1>
</div>
<script>
let h1 = document.createElement("h1")
document.querySelector("button").onclick = function () {
let str = document.createTextNode(Math.round(Math.random()*(10000-1)+1))
h1.innerHTML = str.nodeValue
document.querySelector("div").appendChild(h1)
}
</script>
Document.createTextNode()
定义：用于创建一个新的文本节点
语法：
document.createTextNode("新文本")
返回值：返回Text文本节点对象
实例：
<button>按钮</button>
<div> <h2>hello</h2></div>
<script>
//点击按钮，创建新文本“你好”节点
const btn = document.querySelector("button")
const h2 = document.querySelector("h2")
let h1
btn.addEventListener("click",()=>{
h1 = document.createElement("h1")
// h1.innerHTML = "你好"
const text= document.createTextNode("你好")
h1.appendChild(text)
document.querySelector("div").replaceChild(h1,h2)
})
</script>
Node.insertBefore(子元素，子元素位置)
定义：
方法用于把新节点添加到父节点的指定子节点之前
语法：
Node.insertBefore(新子元素，位置节点)
返回值：新节点
实例：
<div>
<button>按钮</button>
<ul>
</ul>
</div>
<script>
let btn = document.querySelector("button")
let num = 0
btn.addEventListener("click",()=>{
num++
let li = document.createElement("li")
let str = document.createTextNode(num+"娃娃￥"+Math.round(Math.random()*(10000-1)+1))
li.appendChild(str)
if(document.querySelector("ul").children.length !== 0){
document.querySelector("ul").insertBefore(li,document.querySelector("ul").firstElementChild)
}else{
document.querySelector("ul").appendChild(li)
}
})
</script>
element.insertAdjacentElement()
定义：
向目标元素的指定位置添加新元素
语法：
元素.insertAdjacentElement("position",新元素)
"position"该参数是一个字符串，它有四个值（不区分大小写），表示插入新元素的方法
-
boforeBegin在开始标签之前 -
beforeEnd在结束标签之前 -
afterEnd在结束标签之后 -
afterbegin在开始标签之后
begin ：理解为目标元素的开始标签 end：理解为目标的结束标签
返回值：返回新元素
实例：
<button>前插</button><button>后插</button><button>内前插</button><button>内后插</button>
<ul>
<li>项目</li>
</ul>
<script>
const btn = document.querySelectorAll("button")
const ul = document.querySelector("ul")
btn[0].onclick = ()=>{
let li = document.createElement("li")
li.innerHTML = "我在目标元素外前面"
ul.insertAdjacentElement("beforebegin",li)
}
btn[1].onclick = ()=>{
let li = document.createElement("li")
li.innerHTML = "我在目标元素后面"
ul.insertAdjacentElement("afterend",li)
}
btn[2].onclick = ()=>{
let li = document.createElement("li")
li.innerHTML = "我在目标元素前面"
ul.insertAdjacentElement("afterbegin",li)
console.log( ul.insertAdjacentElement("afterbegin",li));
}
btn[3].onclick = ()=>{
let li = document.createElement("li")
li.innerHTML = "我在目标元素外后面"
let m = ul.insertAdjacentElement("beforeend",li)
console.log(m)
}
DOM属性操作
DOM属性主要是指使用脚本操作标签的属性，主要包括：
- 定义属性
- 操作属性
- 查询属性
- 删除属性
- 添加属性
- 修改属性
- classList ：H5新增
- DataSet数据集 ：H5新增
定义属性：
HTMl标签是有属性的，她的属性是属性名 / 值构成
<div class = "aa" id="bb" style="color:red" title="cc"></div>
Document API获取元素之后，我们拿到的是js元素对象
const div = document.querySelector("div")
console.log(div) //[object HTMLDivElement] 是标签<div>对应的元素名
为了操作标签的属性，DOM为JS脚本定义了一个属性的映射集，映射了所有的HTML属性。改映射中的属性都是元素对象的属性，它对应HTML属性
转换属性规则：
- 如果HTML元素属性名是一个单词，那么元素对象属性也是单词
- 如果HTML元素属性名是一个JS保留字，那么要做特殊转换
class => className
for=> htmlFor - 所有的属性值都是字符串，但是有两个例外
input标签的checked 的属性值是布尔
option标签的selected 的属性值是布尔
<form>
<input type="checkbox" />
<input type="radio" />
<sele>
</form>
查找元素的属性
1.Element.getAttribute()
定义：查找元素的属性
语法：
元素.getAttribute("属性名")
返回值：返回字符串值或null（找不到）
实例：
<h1 id="aaa" class="bbb" style="color:#333;"></h1>
<script>
const h1= document.querySelector("h1")
//读取属性的方法
console.log(h1.id);
console.log(h1['style']);
console.log(h1.getAttribute("class"));
</script>
2.attributes
定义：属性用于查询指定元素的所有属性。
语法：
元素.attributes
返回值：返回NamedNodeMap对象，该对象包含指定元素的所有属性节点的实时集合。
NamedNodeMap对象不是数组，也不是伪数组，而是一个包含字符串的键值对。可以使用for...of枚举。
实例：
console.log(h1.attributes);//NamedNodeMap(3) [ id="aaa", class="bbb", style="color:#333;" ]
删除属性
1.Element.removeAttribute()
定义：用于查询指定元素是否具有指定的属性。
语法：
元素.removeAttribute('属性名')
返回值：无
实例：
h1.removeAttribute("class")
检测属性
1.Element.hasAttribute()
定义：Element.hasAttribute() 方法用于查询指定元素是否具有指定属性。
语法：
元素.hasAttribute('元素名')
返回值：布尔值，找到了返回true 找不到返回false
实例：
<div class="aaa" id="bbb" ></div>
<script>
// 元素.hasAttribute('元素名')
const div= document.querySelector("div")
console.log(div.hasAttribute("class"))//true
console.log(div.hasAttribute("abc"))//false
设置元素的属性
1.Element.setAttribute()
定义：Element.setAttribute()方法用于设置指定元素的属性值。如果该属性已经存在，则更新该值；
语法：
Element.setAttribute("属性名"," 属性值")
没有返回值
实例：
div.setAttribute("id","hello")
console.log(div["id"])
classList
classList 伪数组三个方法
- 元素.classList.add()//向class值列表中添加一个值
- 元素.classList.remove()//向class值列表中删除一个值
- 元素.classList.toggle()//如果class值有，就执行remove，没有执行add
btn[0].addEventListener("click",function(){
//1.点击按钮，让文字变成红色 add
h2.classList.add("red")
//2.点击按钮删除边框 remove
// h2.classList.remove("blue")
})
编程能力有几种
- 基础知识储备的能力
- 描述能力，提炼出app包含几种功能
选中目标元素，点击前插可在目标元素前面插入新元素，后插亦然
选中新元素，也可在新元素前后插入新元素
还可以重置，恢复初始状态
网友评论