前端js基础知识（dom）

一、学习过程

一、什么是dom？

一般指文档对象模型。文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。具体来说，通过获取对象来绑定单击响应函数来更好操作css与html中的元素。

二、怎样通过dom来操作？

要想操作元素，首先我们要知道什么是节点。一个网页，一个元素，一个属性，一个文本都是节点。我们需要找到我们想要操作的那个网页，元素，属性，文本（节点），将他（因为dom一般指文档对象模型）变成对象，然后通过绑定单击响应函数操作，来操作。而每个节点都有nodeName、nodeType、nodeValue。我们可以通过这些来寻找节点。

三、寻找节点的方法（可以通过w3scool查询）

1.获取元素节点（通过document调用）

获取节点再变成对象

例：var 对象名 = document.getElementById("id");

2.获取元素节点的子节点(通过具体节点调用)

例：var 对象名 = ul.firstChild;(表示ul标签中第一个子标签)

注意：（1）childNodes表示当前节点后子节点，包括文本节点与其他节点

3.获取父节点与兄弟节点（通过具体节点调用）

*innerHTML可以获取元素内部的元素标签和文本

4.dom其他查询方式

**使用该方法只会返回符合条件的第一个元素

**使用该方法即使符合条件元素只有一个也会返回一个数组

四、增删改dom查询元素（可以通过w3scool查询）

五、作用

这样我们可以通过想要操作的对象，为他绑定一个单击响应函数（函数里有我们想要怎么操作这个对象也就是元素的代码）来实现操作，融合了js与css与html。而上面所演示的是js操作html（布局），具体js怎样操作css在w3scool中也有方法。无论是css与html，当我们想要用dom来操作时css与jtml时，必须要先获得操作的元素那个对象，想要找到元素就要找到节点。

六、以上就是dom简单的简介，也是我初学dom的理解，如有错误，请谅解。

二、学习心得

这一周学习非常充实，Java与Javascript基础语法有些相似，前面节奏走的较快。当然后面js有点难理解，做了几个js操作css与html小练习，浅写了一下js代码，现在还是基础阶段，记的东西较多，所以多写写练习将代码记住。

三、学习计划

js高级，页面制作，css与html布局，复习弹性布局，grid布局，多做几个练习