y提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
学习目标
目录
1.熟悉DOM树
2.使用DOM中的接口实现：创建、增、删、改、查、以及属性与事件的操作
一、DOM树
文档对象模型DOM
首先 DOM 称为：文档对象模型 （document object Model 简称DOM） 通过在内存中表示文档的结构（如表示网页的 HTML），将网页连接到脚本或编程语言。通常它指的是JavaScript，即使将HTML，SVG或XML文档建模为对象不是核心JavaScript语言的一部分。
其次要清楚几个关键词：
1.文档：一个页就是一个文档，Dom中使用 document来表示;
2.元素：页面中的所有标签都是元素，DOM中使用element来表示
3.节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node来表示
下面用一个图来展示：
最核心的一点是DOM将以上的内容都看成是一个对象 可以对内容样式一些列进行操作。
二、创建、增、删、改、查、以及属性与事件的操作
1.创建：
1.document.write()
document.write() 是直接将内容写入页面的内部，但是文档执行完毕，会导致页面全部重置，就好比你事儿都干完了（页面加载完毕），结果document。write()以来说，滚犊子，用我这个；所以不建议使用；
<body>
<div>篮战</div>
<button>点他</button>
//js开始
<script>
//获取页面中的button元素
var dt = document.querySelector('button');
//设置一个点击事件，当点击之后页面的内容会被write()里的内容覆盖，妥妥的恶霸
dt.onclick = function () {
document.write('菜的一皮');
}
</script>
//js开始结束
</body>2.innerHTML
如下：前提div里没有内容，否则div里的内容会被覆盖，特点在创建100条元素时 采用拼接字符串的时候运行效率是四位数（毫秒），但采用数组的方式，则效率是个位数（毫秒），使用数组的时候结构稍微复杂一些 总结一句话：这个有点东西，厉害，推荐使用
<body>
<div></div>
<script>
// 首先获取上面创建的div元素
var div = document.querySelector('div');
//往div里添加元素
div.innerHTML = '<a href="javascrept:;">德玛西亚</a>'
</script>
</body>3.createElement
创建多个元素时，在创建100条元素时，createElemet的时间是2位（毫秒），虽然比不上上面的innerHTML，但咱结构简单啊对吧，简单点说话的方式简单点~。
<script>
//获取div元素
var div = document.querySelector('div');
//1创建元素
var a = document.createElement('a')
//2往a里添加内容
a.innerHTML = '太帅了';
//3.为div追加孩子a标签
div.appendChild(a);
</script>创建小结：
1.document.write()
会导致页面的覆盖重置，不推荐使用
2.innerHTML()
可以标签与内容一起追加，在创建大量的元素节点时，效率高，缺点就是结构有些复杂
3.createElement()
结构简单，效率中规中矩，缺点是需要先创建后元素后，在使用innerHTML来追加元素，在通过appenChild（）来追加元素，有点麻烦。
2.追加
appendChild()
父元素的后面追加；
insertBefore()
在指定的父元素的孩子的前面追加，写法 node.insertBefore(追加的元素,父节点的孩子 ）；
<body>
<ul></ul>
<script>
// 获取页面ul元素
var ul = document.querySelector('ul');
// 创建li元素
var li = document.createElement('li');
var li1 = document.createElement('li');
//追加内容
li.innerHTML = '1';
li1.innerHTML = '2';
// 为了效果我们将1添加到后面，将2添加到前面
ul.appendChild(li); //追加到父元素的最后面
ul.insertBefore(li1, ul.children[0]); //在指定的父元素的孩子的前面追加
</script>
</body>3.删除
removeChild()
直译就是删除孩子，写法node.removeChild(node.childer);
例子ul.removeChild(ul.children[i]);
这是个有趣的例子~
<body>
<input type="text" placeholder="命运只能选择一次">
<button>毁灭吧</button>
<ul>
<li>0.你</li>
<li>1.我</li>
<li>2.桃之助</li>
</ul>
<script>
//获取元素按钮元素，并添加单击事件
var bttn = document.querySelector('button');
// 获取input元素，用于接收用户输入
var inp = document.querySelector('input');
//获取页面的ul元素
var ul = document.querySelector('ul');
// 命运只能选择一次 否则就会出bug（手动狗头）
//删一次，li的数量就会发生变化，对应俗称li的下标值也会发送变化。懒得改了
//出bug F5刷新一下就好了
bttn.onclick = function () {
// 获取用户输入的变化
var i = inp.value;
if (i == 0 || i == 1 || i == 2) {
ul.removeChild(ul.children[i]);
}
else {
alert('毁灭吧世界');
}
}
</script>
</body>4.修改
主要体现在以下几点：
1.修改元素的属性：src、href、title 可直接通过赋值的方式修改
2.修改普通元素的内容：innerHTML、innerText
3.修改表单元素：value、type、disabled等
4.修改元素样式:style、className style修改单个属性，className通过类属性选择器来修改属性
5.查
1.DOM提供的API
getElementByid ()返回一个匹配特定 ID的元素。由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。
语法
getElementsByTagName(）返回一个包括所有给定标签名称的元素的 HTML 集合HTMLCollection。整个文件结构都会被搜索，包括根节点。返回的 是动态的，意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用 。HTML 集合document.getElementsByTagName()
语法：var elements = document.getElementsByTagName(name);
2.H5提供的方法
querySelecter(获取一个元素),querySelectorALL(获取全部)
3.利用节点操作获取元素
parentNode,childern,previousElementSlibing(兄弟)，netElementSibing(下一个兄弟节点)
6.属性的操作
1.setAttrbute
设置指定元素上的属性值。如果属性已存在，则更新该值;否则，将添加具有指定名称和值的新属性。语法 node.setAttrbute(属性名，属性值);
2.getattrbute
获取指定元素上的属性值，语法 node.getAttrbute(属性名称);
3.removeAttrbute
设置指定元素上的属性值，语法node.removeAttrbute(属性名称)；
<body>
<div id="div1">Hi Champ!</div>
<script>
//获取元素
const div1 = document.getElementById('div1');
// 设置指定元素的属性值
const name = div1.setAttribute('name', '张三');
//获取指定元素的属性值
const exampleAttr = div1.getAttribute('id');
//删除指定元素的属性值
const remove = div1.removeAttribute('id');
</script>
</body>7.事件
主要事件分为鼠标事件与键盘事件这个要说就有点多了详细的可以去MDN上看看
MouseEvent - Web APIs | MDN (mozilla.org)
3777
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
