这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战
☆☆☆ 温故而知新! 今天学习巩固的内容(DOM-文档对象模型) 重要!! 今天依然要加油哟!! ☆☆☆
可作为初学者的学习路线, 可参考一下, 学习进度也不是特别赶! 持续更新,
用自己的理解, 简单又全面概括基础知识点, 大部分内容为白话文内容, 基础中的基础 方便加深理解!
巩固学习 JavaScript 基础知识, 加深理解记忆, 打牢地基才能筑高楼! 加油
开始今天的学习吧! 认真对待!!
1、梳理昨天学习知识点
-
BOM 模型（浏览器对象模型） ：
location、history、event、document、screen、navigator、window -
window 对象有哪些常见方法 ：
alertpromptconfirmsetIntervalsetTimeoutopen("url","","外观")close -
location: 页面跳转location.href = urlassign()replace() -
document查找页面元素的方式 :对元素操作
- 样式操作
.style.样式.style.cssText.className - 属性操作
- 内容操作
value、innerHTML、innerText - 样式操作
2、DOM document object model 文档对象模型
2.1 节点 ：
html 为 dom 根节点
- 所有的
html元素都叫做元素节点 - 所有元素节点的属性 叫做属性节点 比如 ：
src 属性 - 所有元素节点的内容 叫做文本节点 比如 ：
<p>文本节点</p> - 一切都是节点
2.2 节点关系(属性，通过这些节点关系属性 找到相关元素) ：
父节点 ： parentNode
-
第一个孩子节点： firstElementChild(没有 Element 表示兼容 IE firstChild)
-
最后孩子节点 ： lastElementChild
-
前一个兄弟节点 ： previousElementSibling
-
后一个兄弟节点 ： nextElementSibling
-
孩子节点 ：
childrenchildNodes
tagName 或 nodeName 获取标签名
2.3 区分节点类型属性 nodeType
值有三种情况
nodeType 值
元素节点 1
文本节点 3
属性节点 2
3、节点的动态操作 （创建 添加 删除）
创建 添加 删除
3.1 创建 ：
document.createElement() 创建元素节点
document.createTextNode(); 创建文本节点（了解）
注意 ： 动态创建的元素 添加事件时， 事件添加在动态创建元素之后（在同一个函数体内部 ）
也可以通过委托实现
3.2 添加: appendChild():
用法 ： 父节点.appendChild(要添加的节点)
insertBefore()
用法:
父节点.insertBefore( 要添加的子节点 , 参照节点 )
如果参照节点为 null ， 默认是 同 appendChild 效果 追加
一定要写满两个参数
3.3 删除 ： removeChild() 或 remove()
-
父节点.removeChild( 要删除的元素 )
-
要删除的元素.remove()
4、节点克隆
cloneNode( )
如果有参数 true， 表示即克隆元素本身，又克隆内容 深克隆
如果不加参数 true ， 只克隆元素本身 浅克隆
5、文档碎片 :
相当于 计算机 缓存 ，
- 作用 ： 提高程序的执行效率
document.createDocumentFragment()
面试题 ：
请准确编写这样一个函数：
该函数接受两个参数，第一个参数为一个 DOM 元素，第二个参数为一个正整数，
要求第二个参数传入的数字是几，就向 DOM 元素上挂载几个<div>hello world</div>标签，实现过程中，请考虑 JS 性能优化。
function fn( ele , m ){...}
6、节点属性动态操作
getAttribute()
可以获取自定义和固有 属性值
obj.getAttribute(“属性名”)
setAttribute()
设置属性
obj.setAttribute("属性",“值”)
预告: 加油, 追梦人
学习就是一个不断进行的过程, 坚持下去, 定有收获!
日积月累, 巩固基础, 早进大厂!
坚持很不容易, 坚持下来更不容易, 你真棒!
Calm Down & Carry On!
更多阅读:
前文更新回顾
【重学 JS】每天学习巩固基础:
更多期待再路上...任重而道远
