dom api

dom的全称为Document Object Model,即文档对象模型.所谓文档就是html页面,对象就是js里的对象,通过这个模型把页面上的元素和js里的对象关联起来.

下面是关于dom api的一些常用方法

1.获取元素

        使用querySelector()方法获取一个元素

        使用querySelectorAll()方法获取所有元素

当获取全部元素的时候,是用一个数组存放的.

 

2. 事件:就是针对用户的操作进行一系列的反应

事件的三要素:

        1.事件源: 那个元素产生的事件

        2.事件类型:点击,双击,移动,键盘按下等等操作称为事件

        3.事件的处理程序:事件发生之后要执行那个代码

下面举个栗子简单实现一个点击事件:

 上面逻辑通过点击之后弹出一个窗口,显示hellow world.

3. 获取/修改元素内容

首先获取要先获取要修改的元素,使用innerHTML属性,就能拿到元素里的内容,修改该属性就会影响页面的显示

上面事件每点击一次在原来内容的基础上拼接一个a

4. 获取/修改元素的属性

修改元素属性和修改元素的内容方法很相似,都是先获取到元素属性所在的标签,,然后通过标签.属性对相应的属性进行修改.

5. 获取/修改表单元素的属性 

表单元素中有一些特殊的属性,和普通的属性不同,可以用其他的方法进行修改

value属性

innerHTML得到的是标签里的内容,而input是一个单标签,没有内容我们在获取手动添加内容的时候采用input.value的方法

value属性默认是一个String类型

上述代码是在文本框中输入一个数字,每提交一次数字大小加1. 但value默认是一个string类型,在使用前可以用parseInt()进行强转.

type属性

type属性影响的是输入框的形态,他可以是文本框,密码框等.

下面我们实现一个密码框

6. 获取/修改样式的属性

        修改内联样式(修改style属性的值)

        在css中属性的命名方式都是脊柱命名法

        而在js中是驼峰的形式

 实现一个点击之后字体变大的例子

        修改元素引用的css类名

下面实现一个日间模式和夜间模式的切换

这面的这几个操作都是针对页面已有的元素进行展开的。

7. 新增元素

首先创建一个元素,把这个元素放到dom树中

上述代码中本开无序列表只有11和22,创建了多个无需列表加到子元素的末尾

8. 删除元素

 将上面的33元素删除掉

删除元素要先选中这个元素,因为querySelectorAll返回的结果是一个数组,可以直接只用下标找到要删除的元素,然后通过removeChild()方法删除这个元素.