【js-DOM】最全最精简，快速记忆回顾使用

DOM

注：本文删去了解释代码，只保留了精简知识点，初学者建议配合教学视频使用

1、 dom文档对象模型，一个html页面里面的所有都是文档里面的节点，包括标签，属性，文档，注释，等等，同时，他们有全部是对象，浏览器解析时生成dom对象
2、 使用dom提供的方法，可以操作这些节点，比如创建，撤销，以及对事件作出反应，
3、 浏览器解析dom文档的过程：1、解析html构 2、加载外部文件 3、解析执行脚本代码，对不符合规定的代码进行改变 4、构建dom树 5、加载图片6、加载完毕

1、节点对象

1、12中节点对象
2、常用节点是document，标签元素，文本节点，注释节点
3、继承来自node类型，有相同的属性和方法
4、节点的原型链是：
Object->eventtratget->node->element/documennt->htmlelement/htmldoucment->
5、xml是可扩展标记语言，自定义标签，语法严格，用于数据存储和传输

3、对象特征

1、 利用object.assign修改节点属性
• //修改节点属性
• let divs = document.getElementById(“div”);
• Object.assign(divs,{
• name:“div1”,
• onclick(){
• this.style.backgroundColor = “red”;
• }
• });
• //只有值加引号
• console.log(divs.getAttributeNode);

4、DOCUMENT

1、 浏览器对象window的属性，全局定义的都是window的属性
2、 htmldocument的实例，htmldocument的原型是document，document的原型是node和element一样
3、 可以使用nodename/nodetype，因为含有原型链node
4、 打印出来是编写的文档

5、文档信息

1、 获取文档标题document.title
2、 获取document.url获取本文档的地址
3、 域名：domain
4、 来源地址：referrer
5、 Document获取文档信息

6、节点属性

1、nodeType、123元素属性文本/89注释document对象
2、nodeName节点名字，属性和标签是名字，文本是#text/，注释是#comment结果大写
3、tagName
4、nodevalue,节点的值，元素节点的值是null，其余的都是内容

7、节点集合

1、 节点集合有nodelist和htmlcollection，querry返回nodelist，gettagname和item和nameitem返回html，制定了标签名
2、 Nodelist是动态的，添加后会动态获取
3、都具有length属性，记录节点数量

8、转换数组

1、 将集合转化为数组
2、 使用slice方法，返回字符串，不修改新的字符串，参数是开始和结束
3、 let arr = Array.prototype.slice.call(elements, 0)
4、 Splice可以插入删除，修改原来的字符串
5、 使用array.form转换，前提是有length顺序
6、 使用点语法转换

9、获取节点集合的元素

1、 获取元素，nodes.item(0
2、 node[0]获取索引也可以，数字索引，返回nodelist
3、 html.nameitem(‘标签的名字’)返回htmlcollection
4、 html[‘标签名字’]，字符串索引
5、 item和nodeitem返回的是htmlcollection

10、document快速选择

1、body/links/anchors/head/forms/images/documentElement

节点关系

0、父子/兄弟
1、 childnodes所有的子节点，不能是孙子节点，有空行就包括文本节点
2、 parentnode父节点
3、 firstchild第一个子节点
4、 lastchild最后一个子节点
5、 nextsibiling/previoussibiling前一个后一个兄弟节点
6、对象获取，不能是集合调用，必须是对象调用
7、html的父节点是document
8、得到的节点集合可以用forof遍历
9、判断的时候记得转化为大写，因为返回大写

11、元素节点关系

1、 获取所有父子元素，parentelement(node)/children(childnodes)
2、 第一个/最后一个节点，firstelementchild
3、 第一个后一个兄弟节点中间加上element
4、 Html有父节点，但是没有父便签

12、选取标签节点

1、 Getelementbyid，定义了id元素可以作为window对象的属性访问，
2、 Getelementbyname ，一般对表单，
3、 Getlelmentbytagname 返回htmlcollection对象
4、 Getelementclassname 只要包括改参数就可以选择
5、 返回nodelist对象
6、 传入*表示选择所有
7、 具有length属性

13、遍历节点

1、 使用[]，当作最基本的数组
2、 Foreach对于nodelist可以遍历，事先需要解构、用回调函数对数组遍历，参数位置固定，第一个就是当前值，第二个就是索引，第三个就是数组，可以用数组调用
Nodelist节点列表也可以使用forEach来进行遍历，但HTMLCollection则不可以
3、 map遍历，map不改变原数组，返回新数组，foreach不返回新数组
可以直接解构调用map，也可以Array.prototype.map.call(nodes, (node, index) => {
4、 使用forof，htmlcolleciton也可以使用
5、 Foreach只能是数组调用，非数组需要解构，forof是可迭代对象，forin主要用于遍历对象

14、样式选择器

1、 就是queryselector，参数是css里面的样式
2、 返回nodelist列表
3、 静态的，一斤获取就不在改变
4、 获取类.class 获取id #id 获取id为class为多少的元素 #id.class
5、 获取属性为[属性名=属性值]

14、matches

1、节点.matchs[样式]含有或者匹配就返回true

15、closest

1、查找最近的祖先元素，node.cloest(‘样式’)，包括自己

#动态与静态
通过 getElementsByTagname 等getElementsBy… 函数获取的Nodelist与HTMLCollection集合是动态的，即有元素添加或移动操作将实时反映最新状态。
• 使用getElement…返回的都是动态的集合
• 使用querySelectorAll返回的是静态集合

16、标准属性

• 元素的标准属性，有对应的dom对象属性
• 属性值不一定是字符串
• Style属性是cssstyledeclaration的对象

17、属性别名

1、属性名和js关键字冲突，class别名classname
2、For别名htmlfor

18、操作属性

1、 点语法、标准属性例如class/name/style/src等等可以直接用 div.name=’’来操作和设置
2、 属性值为数字字符串，需要转化为数字，parseint(input.value)
3、 Href返回完整连接

19、元素特征

1、 特征是可迭代对象，属性是在dom里面存放的，可以直接用.语法操作
2、 可以认为特征就是dom里面的属性集合，
3、 特征中记录标准和定制属性
4、 特征值都为字符串类型
5、 不区分大小写
6、 标签对象.get/set/remove/has/attribute(属性字符串,参数)
7、 获取所有属性.attributes,返回迭代对象，名字，值
8、 类型转换：字符数字转变为数字，*1或者+0
9、 特征值与HTML定义是一致的，这和属性值是不同的

20、attributes

1、 获取所有属性，div.attributes,以[属性名，属性值]的格式返回类数组，可以迭代，不可以用foreach
2、 Div.setattribute(‘color’,’red’);设置属性
3、 DIV.getattribute(‘color’)得到属性值
4、 Div.removeattribute(‘color’)删除属性
5、 Div.hasattribute(‘color’)获得属性
6、 注意可以链式调用，得到属性后.nodevalue
7、 使用dataset获得属性，div.dataset.classname
8、

21、自定义特征

1、 自定义属性格式使用data-content 获取的时候使用dataset-content
2、 多个单词使用驼峰法，data-title-name获取的时候使用dataset-TitleName

22、属性同步

1、 修改class属性值的用到className
2、 就是指保存属性的两个部分，特征集和属性集合，修改一个会不会同步到另外一个
3、 使用attribute相关的是特征更改，使用点语法的是属性更改

22、创建节点

创建节点的就是构建出DOM对象，然后根据需要添加到其他节点中

0、createTextNode创建文本对象
1、 createElement方法可以标签节点对象
2、 使用document调用，参数是创建对象的名称
3、 app.append(text)

使用PROMISE结合节点操作来加载外部JAVASCRIPT文件
function js(file) {
return new Promise((resolve, reject) => {
let js = document.createElement(‘script’)
js.type = ‘text/javascript’
js.src = file
js.onload = resolve
js.onerror = reject
document.head.appendChild(js)
})
}
js(‘11.js’)
.then(() => console.log(‘加载成功’))
.catch((error) => console.log(${error.target.src} 加载失败))
使用同样的逻辑来实现加载CSS文件
function css(file) {
return new Promise((resolve, reject) => {
let css = document.createElement(‘link’)
css.rel = ‘stylesheet’
css.href = file
css.onload = resolve
css.onerror = reject
document.head.appendChild(css)
})
}
css(‘1.css’).then(() => {
console.log(‘加载成功’)
})

#createDocumentFragment
使用createDocumentFragment创建虚拟的节点容器
• 创建的节点的parentNode为null
• 使用createDocumentFragment创建的节点来暂存文档节点
• createDocumentFragment创建的节点添加到其他节点上时，会将子节点一并添加
• createDocumentFragment是虚拟节点对象，不直接操作DOM所以性能更好
• 在排序/移动等大量DOM操作时建议使用createDocumentFragment
#cloneNode&importNode
1、 clonenode是对象调用，克隆本节点，参数为true该节点的子节点也拷贝
2、 importnode是document调用，document.importnode(node,true)

23、节点内容

1、div.innerhtml，1、设置标签内部的所有内容，是覆盖式的设置，里面的标签可以解析出来格式
2、重绘节点，例如button更改之后里面绑定的事件不见了

3、outerHTML
1、div．outerhtml会把父标签body的内容也替换了，
2、而且不止替换文字，链子标签也一起替换
3、outterhtm不会删除原来的内容
使用innerHTML内容是被删除然后使用新内容

textContent与innerText
1、 和innerhmtl的区别是innentext只是文本节点
2、 对象调用.textcontent是设置文字内容，部分ie不支持，innertext部分火狐不支持
3、 不解析标签

outerText
1、 h1.outerText = ‘后盾人’，这么一设置，h1标签就没有了

2、insertAdjacentText
1、div.insertadjacenttext(“”’字符串’)
2、第一个参数是表示插入的位置，元素的前面-beforebegin、元素的后面afterend、元素的第一个孩子-afterbegin、元素的最后一个孩子-beforeend

24、节点增删改查

1、 尾部添加内容或者标签，div.append(‘内容’)加上字符串表示内容，不加字符串是标签，大概是第一个孩子
2、 节点开始添加prepend，最后一个孩子
3、 后面添加after，
4、 前面添加before
5、 移除节点div.remove()
6、 替换节点div.replacewith§

25、nsertAdjacentHTML

1、 和insertadjacenthtml一样的用法、
2、 对象.insertadjacenthtml(“beforeend”,””)
3、 插入的是html文本，浏览器可以解析标签
4、 第二个参数是html文本，可以带标签也可以带文本节点

26、insertAdjacentElement

1、第二个参数是节点，是创建的节点

27、表单查找

1、 获取表单，document.forms.表单名字获取表单对象
2、 获取表单项，form.elements.表单项名字
3、 通过表单项可以获取表单，表单项.form得到表单=document.forms.hd

28、样式管理

1、 通过dom修改样式，可以修改class值，不同的class对应不同的css文件
2、 修改class值，div.classname = 或者setattributes（class，‘hdcms’）；
3、 使用classlist控制类名，添加/删除/切换toggle(“class”)类存在时删除，不存在时添加/检测contains（“类名”）

29、设置行样式

1、div.style.color类似的可以设置行样式，但是也只能设置行样式
2、div.style.cssText = ‘color:res;border:red’可以批量设置一组属性，记得用分号分割开来
3、setattribute(“style”,’color:red;color:red);setattribute也可以设置style属性

30、获取样式

1、get1computedstyle(元素，伪类).属性可以获取所有属性