网站建设管理工作总结报告,浏览器下载免费版,周口网站建设 网站制作 网络推广,中国建设工程安全协会网站作用和分类
作用#xff1a;就是使用JS去操作html和浏览器
分类#xff1a;DOM#xff08;文档对象模型#xff09;、BOM#xff08;浏览器对象模型#xff09; 什么是DOM
DOM#xff08;Document Object Model--文档对象模型#xff09;是用来呈现以及与任意HTML或…作用和分类
作用就是使用JS去操作html和浏览器
分类DOM文档对象模型、BOM浏览器对象模型 什么是DOM
DOMDocument Object Model--文档对象模型是用来呈现以及与任意HTML或XML文档交互的API
白话文DOM是浏览器提供的一套专门用来操作网页内容的功能
DOM作用开发网页内容特效和实现用户交互
DOM树
定义将HTML文档以树状结构直观的表现出来我们称之为文档树或DOM树描述网页内容关系的名词
作用文档树直观的体现了标签与标签之间的关系 DOM对象重要
DOM对象
浏览器根据html标签生成的JS对象
1所有的标签属性都可以在这个对象上面找到
2修改这个对象的属性会自动映射到标签身上 console.dir()//打印对象获取的信息比较清晰
DOM的核心思想
把网页内容当作对象来处理
document对象
1是DOM里提供的一个对象
2所以它提供的属性和方法都是用来访问和操作网页内容的
3网页所有内容都在document里面
获取DOM元素
根据css选择器来获取DOM元素重点
1.选择匹配的第一个元素
document.querySelector(css选择器)
参数包含一个或多个有效的css选择器字符串
返回值css选择器匹配的第一个元素一个HTMLElement对象如果没有匹配到则返回null
可以直接操作修改
2.选择匹配的全部元素
document.querySelectorAll(css选择器)
参数包含一个或多个有效的css选择器字符串
返回值css选择器匹配的NodeList对象集合得到的是一个伪数组
1有长度有索引号的数组
2但是没有pop()、push()等数组方法
不能直接修改只能通过遍历for的方式一次给里面的元素做修改类似数组方式获取
注意哪怕只有一个元素通过querySelectorAll()获取过来的也是一个伪数组里面只有一个元素而已
其他获取DOM元素方法了解
//根据id获取一个元素
document.getElementById(id名)
//根据标签获取一类元素
document.getElementByTagName(标签名)
//根据类名获取一类元素
document.getElementByClassName(class名)
操作元素
操作元素内容
元素.innerText属性
将文本内容添加/更新到任意标签位置
显示纯文本不解析标签
元素.innerHTML属性
将文本内容添加/更新到任意标签位置
会解析标签多标签建议使用模板字符
纠结到底用谁可以选择innerHTML
操作元素属性
操作元素常用属性
可以通过JS设置/修改标签元素属性比如通过src更换图片
最常见的属性比如href、title、src等
对象.属性值
控制元素样式属性
可以通过JS设置/修改标签元素的样式属性
1比如通过轮播图小圆点自动更换颜色样式
2点击按钮可以滚动图片这是移动的图片的位置left等等
学习路径
1.通过style属性操作CSS
对象.style.样式属性值
注意
1赋值的时候需要的时候不要忘记加css单位
2如果样式属性名带有-连接符如background-color时要使用小驼峰命名法改为backgroundColor
标签选择body因为body是唯一的标签可以直接写document.body.style
2.操作类名className操作CSS
如果修改的样式比较多直接通过style属性修改比较繁琐我们可以通过借助于css类名的形式在style中编写一个新类并写入样式
元素.className类名
注意
1由于class是关键字所以使用className去代替
2className是使用新值换旧值如果需要添加一个类需要保留之前的类名
元素.className类名 类名
3.通过classList操作类控制CSS(H5)
为了解决className容易覆盖以前的类名我们可以通过classList方式追加和删除类名不影响以前类名
//追加一个类
元素.classList.add(类名)
//删除一个类
元素.classList.remove(类名)
//切换一个类
元素.classList.toggle(类名)
操作表单元素属性 自定义属性
