初见成效，使用Js操作DOM对象

开篇寄语：

要紧盯住自己的人生目标，不要被周围毫无意义的人或者事所牵绊，尤其不要生闲气。

看淡一点，不要太在乎别人的那张脸；简单一点，不要用他人的尺子，量自己的长短。心态好，一切安好。

昨天给大家提到过，那现在就一起来看看DOM。

二、JavaScript操作DOM对象
1、什么是DOM

DOM：Document Object Model 文档对象模型

要实现页面的动态交互效果，BOM操作远远不够，需要操作 html 才是核心。如何操作 html，就是 DOM。

简单的说，DOM提供了用程序动态控制 html 接口。DOM即文档对象模型描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。DOM处于javascript 的核心地位上。

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

2、节点

加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成，组成一个节点树。对于页面中的元素，可以解析成以下几种类型的节点：

节点类型 HTML内容 例如
文档节点 文档本身 整个文档 document
元素节点 所有的HTML元素 、

、

属性节点 HTML元素内的属性 id、href、name、class
文本节点 元素内的文本 hello
注释节点 HTML中的注释

百度

百度

3、元素节点的操作

当HTML文档在被解析为一颗DOM树以后，里面的每一个节点都可以看做是一个一个的对象，我们成为DOM对象，对于这些对象，我们可以进行各式各样的操作，查找到某一个或者一类节点对象，可以创建某种节点对象，可以在某个位置添加节点对象，甚至可以动态地删除节点对象，这些操作可以使我们的页面看起来有动态的效果，后期结合事件使用，就能让我们的页面在特定时机、特定的事件下执行特定的变换。

获取节点

在进行增、删、改的操作时，都需要指定到一个位置，或者找到一个目标，此时我们就可以通过Document对象提供的方法，查找、定位某个对象（也就是我们说的节点）。

注意：操作 dom 必须等节点初始化完毕后，才能执行。处理方式两种:

	a. 把 script 调用标签移到html末尾即可；

	b. 使用onload事件来处理JS，等待html 加载完毕再加载 onload 事件里的 JS。

window.onload = function() {
// 当页面加载完后调用函数
};

获取方式如下：

这是一个段落文本

这又是一个段落

游泳
篮球
足球

根据id获取元素
根据name获取元素
根标签名称获取元素
根据class获取元素

说明：href="javascript:void(0)";伪协议，表示不执行跳转，而执行指定的点击事件。

创建节点和插入节点
很多时候我们想要在某个位置插入一个新的节点，此时我们首先需要有一个节点存在，可以通过以下几种方式创建新节点。

创建节点

插入节点

添加段落

添加段落

添加图片 添加图片

添加文本框 添加文本框

添加选项框

添加选项 ---请选择--- 南山南 喜欢你 间接查找节点 测试按钮

开始 结束

删除节点

方法|属性 描述
removeChild() 从元素中移除子节点
第一种：获取父节点，然后删除子节点

	父节点.removeChild(childNode);

第二种：通过旧节点定位到父节点，然后删除子节点

	childNode.parentNode.removeChild(childNode);

程序猿 删除

4、属性操作
在操作DOM对象时，除了可以操作对象整体之外，还可以更加灵活地操作对象中的各个属性。

测试按钮

性别：
男
女

Javascript进行的是原始的操作，常常和事件一起结合使用，后期学习JQuery可以更方便地操作. 原文：https://mp.weixin.qq.com/s?src=11×tamp=1575423931&ver=2013&signature=HAPbZUZOxnzdATfFHzResoZYKEKsMGF81AiquJ71jb9Du3cpnDPzqcoAwckx9yQjp7V30yo9Z3XR9UHehuBypptSQz6KKBT0RHKfDE-TecRJ1MHJ2RzucJKe97uOUrWQ&new=1 作者：嗨码歌 嗨码歌 出处：微信公众号