个人学习笔记——Javascript基础学习---DOM基础（阶段总结）

DOM核心内容（基础部分）

文档对象模型（Document Object Model），处理可扩展标记语言的标准接口

我们获取过来的DOM元素是一个对象，所以称为文档对象模型

文档Document 元素 Element 节点 Node 标签名 tagName 类名className

文档流 document stream

获取body元素

document.body

获取html元素

document.documentElement

事件的概述

事件就是触发响应的的事件

事件的组成:

事件源（获取事件源的方法看下面的5–查）
事件类型 (添加事件绑定事件)
事件处理程序 (采取函数赋值的方法)

鼠标事件

关于DOM的操作，主要是针对元素的操作

主要有创建、增、删、改、查、属性操作、事件操作

1–创建

document.write
element.innerHTML
document.createElement

**document.write**

Document.write（） 方法将一个文本字符串写入一个由 document.open（） 打开的文档流，如果在已经加载完毕页面中调用此方法会导致页面的重绘。

document.write(markup);

markup：一个包含要写入文档的文本的字符串。

**element.innerHTML**

Element.innerHTML 属性设置或获取HTML语法表示的元素的后代。

const content = element.innerHTML;
element.innerHTML = htmlString;

设置元素的将会删除所有该元素的后代并以上面给出的 htmlString 替代。

HTMLString中起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换行。element.innerText也可以改变内容，可以获取HTMLString中起始位置到终止位置的全部内容，不识别HTML标签，同时去掉空格和换行。

如果要向一个元素中插入一段 HTML，而不是替换它的内容，那么请使用 insertAdjacentHTML（） 方法。

**Document.createElement（）**

在 HTML 文档中，Document.createElement（） 方法用于创建一个由标签名称 tagName 指定的 HTML 元素。如果用户代理无法识别 tagName，则会生成一个未知 HTML 元素 HTMLUnknownElement。

var element = document.createElement(tagName[, options]);

innerHTML创建多个元素效率更高（不要拼接字符串，采用数组的形式拼接）结构稍微复杂。

//将字符串添加到数组中
var arr=[];
for(var i=0;i<=100;i++){arr.push('百度')
}
//将数组转换为字符串,添加到文档中
inner.innerHTML=arr.join('');

2–增

node.appendChild(aChild)
-node.insertBefore()

node.appendchild(child)添加创建的元素节点.是给父元素下的列表的最后添加类似于css中的::after类似于push

element.appendChild(aChild)

**Node.insertBefore()** 方法在参考节点之前插入一个拥有指定父节点的子节点

node.insertBefore(child,指定元素)

var li=document.createElement('li');
//获取父项
var ul = querySelector('ul');
//添加子项到父项中,后面追加元素 类似于push
ul.appendChild(li);
//添加节点到指定位置的前面
ul.insertBefore(li , child[0])
//两步  1 创建元素  2添加元素

3–删

node.removeChild(child);

删除父节点下的子节点

var ul=document.querySelector('ul');
ul.removeChild(ul.children[0]);//使用时 如果父元素没有了子元素,那么这个属性就会报错
//可以添加判断.在没有时返回null

 <style>* {margin: 0;padding: 0;}body {padding: 100px;}textarea {width: 200px;height: 100px;border: 1px solid pink;outline: none;resize: none;}ul {margin-top: 50px;}li {width: 300px;padding: 5px;background-color: rgb(245, 209, 243);color: red;font-size: 14px;margin: 15px 0;}a {text-decoration: none;color: #eee;font-size: 14px;float: right;}</style>

删除评论<body><textarea name="" id=""></textarea><button>发布</button><ul></ul>
<script>var text = document.querySelector('textarea');var btn = document.querySelector('button');var ul = document.querySelector('ul');btn.onclick = function () {var flag = 0;if (text.value == '') {alert('请输入内容');} else {var li = document.createElement('li');//innerHTML可以读取HTML标签li.innerHTML = text.value + '<a href="javascript:;">删除</a>';// 注意书写时使用驼峰命名法// ul.appendChild(li);ul.insertBefore(li, ul.children[0]);//注意结构的书写位置,应该在生成列表之后获取var as = document.querySelectorAll('a')for (i = 0; i < as.length; i++) {as[i].onclick = function () {// 要删除的是li,需要找他的父元素ul.removeChild(this.parentNode);}}flag = 1;}if (flag = 1) {text.value = '';}}</script>
</body>

4–改

主要修改dom恶元素属性。dom元素的内容、内容、表单的值等

修改元素属性：src 、href /、title
修改普通元素的内容： innerHTML、 innerText
修改表单元素： value 、 type disabled（按钮禁用）
修改元素的样式：type、 className

5-查

主要获取查询dom的元素

DOM提供的API方法：getElementById、getElementsByTagName、getElententsByClassName
H5 提供的新方法：document.querySelector()、document.querySelectorAll()
利用节点操作获取元素：node.parentNode（父），children（子），previousElementSibling/nextElementSibling（兄弟）

document.getElementById返回一个匹配特定的ID元素

document.getElementsByTagName返回一个包括所有给定标签名称的元素的HTML集合。整个文件结构都会被搜索，包括根节点。

decoment.getElementsByClassName返回一个包含了所有指定类名的子元素的类数组对象。当在document对象上调用时，会搜索整个DOM文档，包含根节点。你也可以在任意元素上调用getElementsByClassName()方法，它将返回的是以当前元素为根节点，所有指定类名的子元素

document.querySelector()文档对象模型Document引用的**querySelector()**方法返回文档中与指定选择器或选择器组匹配的第一个 Element对象。如果找不到匹配项，则返回null。

var element = document.querySelector(selectors);
//注意是匹配的第一个element对象
var el=document.querSelector('.className'); //匹配类名加‘.’
var el=document.querSelector('#id');//匹配id加‘#’
var el=document.querSelector('li');//匹配HTML标签

//还可以更强大
<div class="user-panel main"><input name="login"></div>;
<script>var el = document.querySelector("div.user-panel.main input[name='login']");
</script>

转义特殊字符

如果要匹配的ID或选择器不符合 CSS 语法（比如不恰当地使用了冒号或者空格），你必须用反斜杠将这些字符转义。由于 JavaScript 中，反斜杠是转义字符，所以当你输入一个文本串时，你必须将它转义两次（一次是为 JavaScript 字符串转义，另一次是为 querySelector 转义.

<div id="foo\bar"></div>
<div id="foo:bar"></div><script>console.log('#foo\bar')               // "#fooar"document.querySelector('#foo\bar')    // 不匹配任何元素console.log('#foo\\bar')              // "#foo\bar"console.log('#foo\\\\bar')            // "#foo\\bar"document.querySelector('#foo\\\\bar') // 匹配第一个divdocument.querySelector('#foo:bar')    // 不匹配任何元素document.querySelector('#foo\\:bar')  // 匹配第二个div
</script>

document.querySelectorAll()返回与指定的选择器组匹配的文档中的元素列表,和querySelector；类似，但这个返回的是一个Nodelist.

node.parentNode//获取最近的父节点、

parentNode.childNodes//返回的是所有子节点的集合，该集合是即时更新的，但是包含元素节点和文本节点等

注意：如果只想获取元素节点，需要处理一下

var ul =document.querySelector('ul');
for(var i=0;i<ul.length;ul.childNodes.length;i++){if(ul.childNodes[i].noceType == 1){//ul.childNodes[i]是元素节点colose.log(ul.childNodes[i]);}
}

parentNode.children//获取子元素节点。非标准，但大多数浏览器支持

parentNode.firstChild
获取第一个子节点,但是会获取所有的子节点,包括文本节点等parentNode.lastChild获取最后一个子元素节点,同样包括文本节点等

//但是这个有着兼容性的问题,只有IE9+才支持
parentNode.firstElementChild可以获取第一个子元素节点parentNode.firstElementChild可以获取最后一个子元素节点

//最后一个可以很好地使用的
parentNode.children[0];获取第一个子元素节点parentNode.children[parentNode.children.length - 1];获取最后一个子元素节点

复制节点

node.cloneNode();方法返回调用该方法的节点的一个副本.也称为克隆节点

并且该方法需要appendChild配合添加

node.cloneNode();括号里面为空,或者为false,只是浅拷贝.只复制节点本身,不克隆里面的子节点

如果为true,则是深拷贝,会复制里面的节点,以及里面所有的的子节点

Node.nodeType

只读属性表示的是该节点的类型。**Node.nodeType**

nodeType 属性可用来区分不同类型的节点，比如 元素， 文本 和 注释。

附加一个案例

//表格添加数据(重要)<body><table border="1"><thead><th>姓名</th><th>学科</th><th>成绩</th><th>操作</th></thead><tbody></tbody></table><script>//因为没有学到数据库，只好写个数组来获取数据。var arr = [{name: '溥仪',subject: 'javascript',grade: 100,},{name: '溥修',subject: 'javascript',grade: 89,},{name: '溥浩',subject: 'javascript',grade: 80,},{name: '溥博',subject: 'javascript',grade: 95,}];var tbody = document.querySelector('tbody');for (var i = 0; i < arr.length; i++) {var tr = document.createElement('tr');tbody.appendChild(tr);for (k in arr[i]) {var td = document.createElement('td');//运行一次,添加一个节点td.innerHTML = arr[i][k];tr.appendChild(td);}var td = document.createElement('td');tr.appendChild(td);td.innerHTML = '<a href="javascript:;">删除</a>';var as = document.querySelectorAll('a');//逻辑要清楚啊,这里获取的是所有的afor (var j = 0; j < as.length; j++) {// 这里也是要给所有的a添加属性as[j].onclick = function () {// 注意删除的是a父亲的父亲,tbody.removeChild(this.parentNode.parentNode);}}</body>

<style>table {width: 500px;margin: 100px auto;text-align:center;}thead {height: 40px;background-color: rgb(18, 158, 228);}td {border: rgb(18, 214, 228) 1px solid;height: 40px;}a {text-decoration: none;color: #333;}</style>