WebAPI

DOM API

获取元素

querySelector参数就是一个css选择器,可以使用亲密学过的任意一种选择器来选中元素


    
hello

    
hello

使用console.dir()可以把元素以对象的形式打印出来:


    
hello

多个同一标签名的对象在选择的时候只会得到第一个元素


    
hello
hello2
hello3

可以使用querySelectorAll来选择全部元素


    
hello
hello1
hello2

WebAPI_第1张图片

 事件

和用户操作密切相关的,例如用户在浏览器上左键点击鼠标,右键点击鼠标,鼠标移动,浏览器窗口大小调整,滚动窗口位置等。


    
hello

WebAPI_第2张图片

在控制台就会显示按下鼠标这四个字 右边会有按下鼠标的次数

更多事件示范:

    

WebAPI_第3张图片

操作元素

元素就是html标签,操作元素就是在js中先获取到对应的html对象后再来操作其中的属性和内容(内容就是两个标签夹着的部分 例如

hello
中的hello)


    
hello

WebAPI_第4张图片

 

同样可以获取到div内部的内容 


    

hello

WebAPI_第5张图片

还可以修改元素里的内容(通过点击来给这个属性赋值)


    

hello

WebAPI_第6张图片

在里面赋值不仅仅可以是文本,还可以是html片段

    

 

但是input是单标签所以当我们点击按钮的,时候获取不到input里面的信息


    
    

    

个时候,我们就需要把innerHTML换成value

获取/修改元素属性

修改的是开始标签里面写的那些键值对


    

    

WebAPI_第7张图片

 打印出来的是图片的路径,宽度,以及没有设定所以为空的alt

同时,当我们使用点击修改图片功能的时候,对应的属性也会随之修改

    

 隐藏和显示密码功能


    
    
    

    

计数器


    
    
    

    

 自动勾选


    

请选择你的需要

苹果
香蕉
橘子
全都要

WebAPI_第8张图片

 变大的字体


    

请选择你的需要

开关灯


    

    
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus perferendis dolores veritatis iusto omnis eos itaque totam architecto tempora natus, cum modi voluptatibus, nobis fugiat similique. Numquam repudiandae fugit impedit? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus perferendis dolores veritatis iusto omnis eos itaque totam architecto tempora natus, cum modi voluptatibus, nobis fugiat similique. Numquam repudiandae fugit impedit? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus perferendis dolores veritatis iusto omnis eos itaque totam architecto tempora natus, cum modi voluptatibus, nobis fugiat similique. Numquam repudiandae fugit impedit? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus perferendis dolores veritatis iusto omnis eos itaque totam architecto tempora natus, cum modi voluptatibus, nobis fugiat similique. Numquam repudiandae fugit impedit?

WebAPI_第9张图片

 新增节点


    
11
22
33

WebAPI_第10张图片

删除节点


    
11
22
33

WebAPI_第11张图片 

你可能感兴趣的:(css,前端,javascript)