1、DOM
文档对象模型 document Object Model
提供操作html文档，html标签元素的能力
document文档对象
window.document
属性和方法
方法
1. 获取标签元素的方法(兼容性更好)
getElementById('title')
唯一元素
getElementsByClassName()
=> 类数组(伪数组)
类数组 和 数组Array区别
1. 类数组不能使用Array的常用方法
push pop
2. 类数组可以遍历，可使用[]访问元素
getElementsByTagName()
标签名
getElementsByName
2. querySelector 和 querySelectorAll (推荐使用，兼容问题现很少)
querySelector()
css选择器
2.1 基本选择器
id class 标签
2.2 层级选择器
子代选择器 后代选择器
M > N M N
兄弟选择器
M ~ N M + n
2.3 伪类选择器
M N:nth-child(n)
2.4 属性选择器
input[name]
input[name='username']
// 法一
function test(){
var h2Ele=document.getElementById('title') //通过id名，唯一获取对应标签内容
console.log(h2Ele)
var divEles=document.getElementsByClassName('d1') //通过类名获取对应标签内容，形成类数组(伪数组)
console.log(divEles);
for(var i=0;i<divEles.length;i++){
console.log(divEles[i]);
}
var inputEles=document.getElementsByTagName('input') //通过标签名获取对应标签内容
console.log(inputEles);
for(var i=0;i<inputEles.length;i++){
console.log(inputEles[i].name);
}
}
test()
// 法二 querySelector 和 querySelectorAll 可用于层级选择器
function test1(){
var h2Ele=document.querySelector('h2')
console.log(h2Ele)
var divEles=document.querySelector('.d1')
console.log(divEles)
var inputEles=document.querySelectorAll('input')
for(var i=0;i<inputEles.length;i++){
console.log(inputEles[i].name);
}
}
2、DOM 操作元素内容
1. 作用
2. 获取标签元素
getElement系列
getElementById
getElementsByClassName
getElementsByTagName
getElementsByName
querySelector系列
querySelector
只返回一个元素
querySelectorAll
返回所有元素存储在类数组里面
3. 类数组和数组Array区别
4. 操作内容 操作样式 操作属性 操作事件
操作内容
var h2Ele = document.querySelector('#title')
h2Ele.innerHTML // 获取内容
h2Ele.innerHTML = '新内容' // 设置内容
innerText 获取内容
innerText 和 innerHTML 区别:
1. innerText 以纯文本形式显示
<h3>innerText设置的内容</h3>
2. innerHTML
value 表单元素内容
<input type="text"/>
操作非表单元素 innerText 和 innerHTML
操作表单元素 value
function test1(){
var h2Ele = document.querySelector('#title')
h2Ele.innerHTML = '<h3>innerText设置的内容</h3>' //引号内的标签就是html中的标签效果显示在页面上
// h2Ele.innerText = '<h3>innerText设置的内容</h3>' //引号内内容全部显示在页面上
}
// test1()
function test2(){
var inputEle = document.querySelector('input[name="message"]') //获取标签内的元素，引号为单双混合，外单则内双，内双则外单
inputEle.value = 'jack'
console.log( inputEle.value )
}
test2()
3、dom操作样式
使用js代码动态操作样式
1. 行间样式 style
ele.style.样式名
=>样式值
ele.style.样式名 = 样式值
//js中样式值为字符串，需加引号 操作样式名需用驼峰命令 如 font-size -> fontSize
2. 类样式
ele.className=类名
注: 后面的类名会覆盖前面的类名
赋多个类名用
ele.className= '类名1 类名2 '
或
ele.classList.add(类名1)
ele.classList.add(类名2)
即为 '类名1 类名2 '
获取非行间样式
window.getComputedStyle(元素).样式名
=>样式值
练习
function getClasss(){
//获取h3的非行间样式
var h3Ele=document.querySelector('h3')
var h3w=window.getComputedStyle(h3Ele).width
console.log('w:',h3w);
//添加类名d1，d2
var divEle=document.querySelector('div')
// divEle.classList.add('.d1')
// divEle.classList.add('.d2')
divEle.className='.d1 .d2'
//获取h2标签的行内样式
var h2Ele=document.querySelector('h2')
var colorValue=h2Ele.style.color //行内式
var pEle=document.querySelector('p')
pEle.innerHTML=colorValue
// 更改h2字体大小为24px
h2Ele.style.fontSize='44px' // js代码操作样式名， 样式名用驼峰命令 font-size -> fontSize
h2Ele.style.background='skyblue'
}
getClasss()
4、dom操作样属性
操作属性
js代码动态获取属性值或设置属性
1. 获取属性值
ele.getAttribute(属性名)
=> 属性值
ele.属性 必须是本身拥有的属性 不能是自己随便设的a,b等属性
=>属性值
2. 设置属性
ele.setAttribute(属性名,属性值) / 添加几个设置几次
ele.属性名 = 属性值
3. 删除属性
ele.removeAttribute(属性名)
4. data-属性名
ele.dataset.属性名
练习
function Attr(){
//获取h4中自定义属性score
var h4Ele=document.querySelector('h4')
var index=h4Ele.dataset.score
console.log(index);
//删除h2中的a属性
var h2Ele=document.querySelector('h2')
h2Ele.removeAttribute('a')
//在h3中添加 id="title" class="d1" 只能分次设置
var h3Ele=document.querySelector('h3')
h3Ele.setAttribute('id','title')
h3Ele.setAttribute('class','d1')
//将图片2地址设置为06练习岛上书店的地址
//html中html有多个，获取元素表现为类数组，，取第几个在后面加索引下标即可
var imgEle=document.querySelectorAll('img')[1]
// imgEle.setAttribute('src','./06练习岛上书店/images/11239.png')
imgEle.src='./06练习岛上书店/images/11239.png'
}
Attr()
4、dom操作事件
操作事件
给元素绑定点击事件
直接给元素添加onclick属性实现
绑定事件
1. 属性事件
2. 元素和事件行为分离
示例
//点击button出现弹框
var btn=document.querySelector('button')
btn.onclick=function(){
alert('绑定事件')
}
//点击div更改页面内容
var divEle=document.querySelector('div')
divEle.onclick=function(){
divEle.innerHTML='今天是周六'
}
5、dom练习
1、练习岛上书店
/* 1、点击换换名称按钮，更换书名
1. 绑定点击事件
2. 更改名内容 */
function onUpdateBookName(){
var divEle=document.querySelector('#book')
divEle.innerHTML='书名：更名内容'
}
/* 2、点击input内容按钮，将所有input按钮内容值拼接成字符串设置给p标签作为内容显示
1. input内容按钮点击事件
2. 将所有input标签内容值拼接成字符串
3. 操作p标签内容 */
function onShowInput(){
var inputEles=document.querySelectorAll('input')
var str='' //再次点击可清空前面的str
for(var i=0;i<inputEles.length;i++){
str+=inputEles[i].value+' '
}
var pEle=document.querySelector('#replace')
pEle.innerHTML=str
}
/* 3、 点击四季名称按钮，拼接四季名称显示 */
function onSeason() {
var seasonEle=document.querySelector('#replace')
var inputSeasonEle=document.querySelectorAll('input[name="season"]')
var str=''
for(var i=0;i<inputSeasonEle.length;i++){
str+=inputSeasonEle[i].value+' '
}
seasonEle.innerHTML=str
}
/* 4、清空页面内容 */
function onClear() {
document.write('')
}
2、实现下图效果
<style>
*{
padding:0;
margin:0;
}
.container{
margin: 100px;
width: 303px;
height: 300px;
}
.top{
display: flex;
}
.top>div{
width: 100px;
height: 100px;
background: skyblue;
border-right: 1px solid pink;
text-align: center;
line-height: 100px;
color: white;
font-size: 40px;
}
div:hover{
cursor: pointer;
}
.container .active{
background: orange;
}
.bottom{
width: 303px;
height: 200px;
background: purple;
text-align: center;
line-height: 200px;
color: white;
font-size: 80px;
}
</style>
</head>
<body>
<div class="container">
<div class="top">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="bottom">1</div>
</div>
<script>
/* 1. 确定选中的选项
1.1 属性事件,传参,参数是选中选项下标
2. 清除原来选中效果
for(var i = 0; i < div.length; i++){
div[i].className = ''
}
3. 设置当前选项选中效果
currentDiv.className = 'active' */
var divEles=document.querySelectorAll('.top>div')
var divElesb=document.querySelector('.bottom')
//
for(let i=0;i<divEles.length;i++){
//选项i循环完后会固定是3，要表示当前点击的选项元素
//将 var i换成let i或者将下面的divEles[i]换成this解决这一问题
divEles[i].onclick=function(){
for(let j=0;j<divEles.length;j++){
divEles[j].className=''
}
divEles[i].className='active'
divElesb.innerHTML=i+1
}
}
</script>
