DOM：DOM（Document Object Model）文档对象模型 是用来呈现以及与任意 HTML 或 XML文档交互的API
作用：1.实现网页特效
2.实现用户交互
DOM树：1.将 HTML 文档以树状结构直观的表现出来
2.作用：文档树直观的体现了标签与标签之间的关系
DOM对象：浏览器根据html标签生成的 JS对象
DOM的核心思想：把网页内容当做对象来处理
演示其他获取元素语法（了解）
通过id名来获取
document.getElementById('box')
通过类名来获取
document.getElementsByClassName('box')
通过标签名来获取
document.getElementsByTagName('ul')
1.innerText
2.innerHTML
细节：innerText 与 innerHTML 设置内容的时候，会覆盖原有的内容
如何实现把原本的内容也带上？
1.设置/修改元素常用属性（src 、title等属性）
语法：对象.属性 = 值
2.通过类名 *** 作CSS
注意说明：
1. 在JS中使用className表示类名，因为class在js中是个关键字在标签上，class属性表示类名，但在js中使用className表示类名
2. 使用className有 覆盖 问题
3.通过style控制样式属性
语法：对象.style.样式属性名 = 值
通过style *** 作样式 本质上 设置行内样式
4.表单的属性设置 （value、type、disabled、checked、selected）
语法
获取： 对象.属性名
设置： 对象.属性名 = 值
定时器函数
作用: 每隔一段时间，就会来调用函数
注意易错
如下写法，会将fn() 立即调用，就没有了定时效果
setInterval(fn(), 1000) // 错误效果
css()方法
获取或设置样式
对以下html标签进行样式的获取和设置
css()方法设置参数，参数为要设置的样式名
可用驼峰命名也可用css命名方式。注意样式名需要加''
点击获取按钮，结果：
但是在IE浏览器里，用 console.log($('#div1').css('border'))可能会不显示或出现undefined。
在IE浏览器中,要获取边框这样的样式值,一定要记得给一个准确的边框值。例如：
console.log($('#div1').css('Border-top-width'))//2px
获取包含了多个DOM元素的jQuery对象的样式,只能获取到第一个DOM对象的样式。例如：
console.log($('div').css('width'))//200px
css(样式名,样式值)
设置的样式是行内样式
单样式里样式名必须在''里，宽高度单位px可不写，这时300可不加''，如果加px，则必须为'300px'
多样式里样式名可不加''。但是 background-color:'green' 这样写报错。
给多个div一起设置样式
隐式迭代,把每一个div都设置了同样的样式
?外部样式表，引入一个外部css文件?内部样式表，将css代码放在 <head>标签内部
?内联样式，将css样式直接定义在 HTML 元素内部
对DOM设置它的CSS样式的话，建议到黑马程序员社区找到相关的教程，内涵详细的 *** 作流程和教学，非常适合学习。我当初在找前端工作之前，就是刷的他们的面试题，里面原理都说的很清楚。适合学习
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）