DOM (Document Object Model): 文档对象模型
作用
其实就是操作 html 中的标签的一些能力
我们可以操作哪些内容
- 获取一个元素
- 移除一个元素
- 创建一个元素
- 向页面里面添加一个元素
- 给元素绑定一些事件
- 获取元素的属性
- 给元素添加一些 css 样式
DOM 的核心对象就是 docuemnt 对象
document 对象是浏览器内置的一个对象,里面存储着专门用来操作元素的各种方法
DOM: 页面中的标签,我们通过 js 获取到以后,就把这个对象叫做 DOM 对象
属性与方法----获取html元素
通过HTML5新增的方法获取
- 根据id获取 getElementById(‘id属性值’) get 获得 element 元素 by 通过 驼峰命名
返回唯一一个元素对象
console.dir(a);//打印返回的元素对象的属性和方法
<div id="title">1234</>
<script>
function test1(){
var h2Ele = document.getElementById('title')
console.log(h2Ele) //<div id="title">1234</>
}
test1()
</script>
- 根据类名获取 getElementsByClassName(‘class属性’) 返回类数组
返回类数组(伪数组) 与数组的区别
类数组不能使用Array的常用方法(push pop等)
类数组可以遍历i,可以用 [ ] 访问
function test2(){
var divEles = document.getElementsByClassName('d1')
console.log(divEles)
for(var i =0; i < divEles.length; i++){
console.log(divEles[i])
}
}
test2()
- 根据标签名获取 getElementsByTagName(‘标签名’) 获取该标签的所有元素 返回为伪数组存储的集合
function test3(){
var divEles = document.getElementsByTagName('div')
console.log(divEles)
}
// test3()
- getElementsByName(‘name属性’) 表单里的
- 根据选择器获取 querySelector 和 querySelectorAll 现常用
- querySelector()css选择器 只返回满足条件第一个元素
- - querySelectorAll()css选择器 返回满足条件所有元素 存在类数组里
function test5(){
var divEles = document.querySelector('.d1')
var divEles = document.querySelectorAll('div')
console.log(divEles)
}
test5()
- 获取特殊元素(body、html)
document.body
document.documentElement
操作元素
操作元素内容
- innerHTML 获取元素内容和设置内容 保留空格和换行
会识别 字符串 中的标签
innerText设置的内容
会被识别成标签
- innerText 获取内容
不会识别 字符串 中的标签,纯文本输出,去除空格和换行
innerText设置的内容
<script>
function test1(){
var h2Ele = document.querySelector('#title')
h2Ele.innerHTML = '<h3>innerText设置的内容</h3>' //h3被识别
h2Ele.innerText = '<h3>innerText设置的内容</h3>' //h3不被识别
console.log('内容 :',h2Ele.innerHTML);
}
// test1()
function test2(){
var inputEle = document.querySelector('input[name="message"]')
// inputEle.value = 'jack'
console.log( inputEle.value )
}
test2()
- 常见元素属性操作
src href id alt title 等改变
方式:现获取元素,再元素.属性=‘新的值’
- 操作表单内容
- input.value=‘改变表单内容’;
- input.type | checked | selected
- 表单禁用:按钮点击后禁用:btn.disabled=true;
案例–不同时间显示不同问候语和图片
<style>
img{
width: 300px;
}
</style>
</head>
<body>
<img src="" alt="">
<div></div>
<script>
//根据不同时间来判断,需要用到时间对象
//利用多分支语句来设置不同的图片
//需要一个图片据时间修改图片,就需要用到操作src属性
//需要一个div元素,显示不同的问候语,修改元素内容即可
//1、获取元素
var img=document.querySelector('img');
var div=document.querySelector('div');
//2、得到当前小时数
var date=new Date();
var hour=date.getHours();
//3、判断小时数改变图片和文字信息
if(hour<12){
img.src='./images/a.png';
div.innerHTML='上午好';
}else if(hour<18){
img.src='./images/b.png';
div.innerHTML='下午好';
}else{
img.src='./images/c.png';
div.innerHTML='晚上好';
}
</script>
案例–密码显示隐藏功能
操作元素CSS样式
style 行间样式
ele. style.样式名=样式值
专门用来给元素添加css样式的 ,添加的都是行内样式
<h2 style="color: red;">操作样式</h2>
<script>
// 获取h2标签的行内样式
function getStyleTest(){
var h2Ele = document.querySelector('h2')
var colorValue = h2Ele.style.color //行内式
}
// 更改h2字体大小为24px
function setStyleTest(){
var h2Ele = document.querySelector('h2')
h2Ele.style.fontSize = '44px' // js代码操作样式名, 样式名用驼峰命令 font-size -> fontSize
h2Ele.style.backgroundColor = 'skyblue'
}
className class类样式
ele.className=类名
ele.className=‘’ 移除样式
专门用来操作元素的类名 ;也可以设置元素类名,是全覆盖式操作,并且后面的类名会覆盖前面的相同类名
classList.add(类名1 类名2) 动态添加移除class类样式
添加类名1 类名2 的样式 获取操作的元素.classList.add(‘类名1 ’ , '类名2 ')
ele.classList…remove() 移除样式
var divEle = document.querySelector('div')
divEle.classList.add('d1' , 'd2')
移除指定样式 获取操作的元素.classList.remove(’类名1 ’ )
var div = document.querySelector('div')
div.classList.remove('active');
获取 非 行间 样式
window.getcComputedStyle(元素).样式名
.d3{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<h3 class="d3">元素二</h3>
<button onclick="getClassStyle()">获取非行间样式</button>
<script>
function getClassStyle(){
var h3Ele = document.querySelector('h3')
var w = window.getComputedStyle(h3Ele).width
console.log('w :',w);
}
操作属性
js代码动态获取属性值或设置属性
-
获取属性值 ele.getAttribute(属性名)
-
设置属性 ele.setAttribute(属性名,属性值) ele.属性名 = 属性值
var imgEle = document.querySelectorAll('img')[1]
imgEle.src='./06练习岛上书店/images/book.jpg'
-
删除属性 ele.removeAttribute(‘属性名’)
-
data-属性名 自定义属性 ele.dataset.属性名
<h4 data-index="1001" data-score="98">元素三</h4>
<script>
function getMyAttr(){
var h4Ele = document.querySelector('h4')
var index = h4Ele.dataset.score
console.log(index)
}
操作事件
-
给元素绑定点击事件
直接给元素添加onclick属性实现
-
绑定事件
1. 属性事件
2. 元素和事件行为分离
<body>
<button>按钮</button>
<div>元素一</div>
<script>
var btn = document.querySelector('button')
btn.onclick = function(){
alert('绑定事件')
}
var divEle = document.querySelector('div')
divEle.onclick = function(){
divEle.innerHTML = '今天是周五'
}
</script>
</body>