本文详细介绍了JavaScript中的DOM操作，包括DOM文档对象模型、document对象的属性和方法，如getElementById、getElementsByClassName等用于获取元素的方式，以及如何通过innerHTML、innerText和value操作元素内容，修改CSS样式和属性，最后讨论了事件绑定和选项卡的实现方法。
一、DOM文档对象模型
DOM（Document Object Model）： 文档对象模型
其实就是操作 html 中的标签的一些能力
我们可以操作哪些内容
- 获取一个元素
- 移除一个元素
- 创建一个元素
- 向页面里面添加一个元素
- 给元素绑定一些事件
- 获取元素的属性
- 给元素添加一些 css 样式
- ...
DOM 的核心对象就是 docuemnt 对象
document 对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法
DOM： 页面中的标签，我们通过 js 获取到以后，就把这个对象叫做 DOM 对象
二、document对象
1.document对象属性
title 文档标题，即title标签内容
2.document对象方法
document.write()
输入文本到当前打开的文档
三、获取html元素
1.getElementById（'id名'）
返回唯一元素
<body>
<h2 id="title">DOM学习</h2>
<div class="d1">元素一</div>
<div class="d1">元素二</div>
<div class="d2">元素三</div>
<input type="text" name="username">
<input type="text" name="password">
<script>
// 获取id属性值为title的标签
function test1(){
var h2Ele=document.getElementById('title')
console.log(h2Ele)
}
test1()
</script>
</body>2.getElementsByClassName('class属性')
类数组（伪数组）
1.类数组不能使用Array的常用的方法
push pop
2.类数组可以遍历，可使用[]访问元素
<body>
<h2 id="title">DOM学习</h2>
<div class="d1">元素一</div>
<div class="d1">元素二</div>
<div class="d2">元素三</div>
<input type="text" name="username">
<input type="text" name="password">
<script>
function test2(){
var inputEle = document.querySelector('input[name="message"]')
inputEle.value = 'jack'
console.log( inputEle.value )
}
test2()
</script>
</body>3.getElementsByTagName('标签名')
<body>
<h2 id="title">DOM学习</h2>
<div class="d1">元素一</div>
<div class="d1">元素二</div>
<div class="d2">元素三</div>
<input type="text" name="username">
<input type="text" name="password">
<script>
function test3(){
var divEles=document.getElementsByTagName('div')
console.log(divEles)
}
test3()
</script>
</body>4.grtElementsClassName('name属性')
5..querySelector（选择器名）和querySelectorAll
querySelector
只返回一个元素
querySelectorAll
返回所有元素存储在类数组里面
css选择器
1.基本选择器
id class 标签
2.层级选择器
子代选择器 后代选择器
m>n m n
兄弟选择器
m~n m+n
3.伪类选择器
m n:nth-child(n)
4.属性选择器
input[name]
input[name='username']
<body>
<h2 id="title">DOM学习</h2>
<div class="d1">元素一</div>
<div class="d1">元素二</div>
<div class="d2">元素三</div>
<input type="text" name="username">
<input type="text" name="password">
<script>
function test4(){
var h2Ele=document.querySelector("#title")//获取第一个id名为title的元素
console.log(h2Ele)
}
// test4()
function test5(){
var divEles=document.querySelector(".d1")//只找排行第一的元素
var divEles=document.querySelectorAll('.d1')//获取所有类名为d1的元素
console.log(divEles)
}
test5()
</script>
</body>四、操作元素内容
1.innerHTML
var h2Ele =document. querySelector("#title")
h2Ele .innerHTML //获取内容
h2Ele .innerHTML='新内容' //设置内容
2.innerText
.innerText 以纯文本形式显示
<h3>innerText设置内容</h3>
<body>
//h2Ele .innerHTML //获取内容
//h2Ele .innerHTML='新内容' //设置内容
<h2 id="title">元素一</h2>
<input type="text" name="message" placeholder="请输入内容" value="rose">
<script>
function test1(){
var h2Ele =document. querySelector("#title")
console.log("内容：", h2Ele .innerHTML);
// h2Ele .innerHTML="新标题"
h2Ele .innerText="<h3>innerText设置的内容</h3>"
console.log('内容：', h2Ele .innerText);
}
test1()
</script>
</body>3.value
表单元素内容
<input type='text'>
<body>
//h2Ele .innerHTML //获取内容
//h2Ele .innerHTML='新内容' //设置内容
<h2 id="title">元素一</h2>
<input type="text" name="message" placeholder="请输入内容" value="rose">
<script>
function test2(){
var inputEle = document.querySelector('input[name="message"]')
inputEle.value = 'jack'
console.log( inputEle.value )
}
test2()
</script>
</body>操作非表单元素用innerText和innerHTML
操作表单元素用value
练习：岛上书店
<head>
<style type="text/css">
body,
input,
div,
p {
margin: 0;
padding: 0;
}
body {
font-size: 14px;
font-family: "微软雅黑";
line-height: 25px;
}
.content {
width: 550px;
margin: 0 auto;
}
.content img {
float: left;
width: 150px;
}
.r {
float: left;
width: 400px;
}
input[name="changeBook"] {
width: 100px;
height: 28px;
line-height: 28px;
text-align: center;
font-size: 14px;
font-family: "微软雅黑";
margin: 10px 0 10px 0;
}
input[name="season"] {
width: 50px;
text-align: center;
}
.input {
border: 1px solid green;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="content">
<img src="images/book.jpg" alt="岛上书店" />
<div class="r">
<div id="book">书名：岛上书店</div>
<input id="updatename" name="changeBook" value="换换名称" type="button" onclick="onUpdateBookName()" /><br>
四季名称：
<input name="season" type="text" value="春" />
<input name="season" type="text" value="夏" />
<input name="season" type="text" value="秋" />
<input name="season" type="text" value="冬" /><br><br>
<input name="b2" type="button" value="input内容" onclick="onShowInput()" />
<input name="b3" type="button" value="四季名称" onclick="onSeason()" />
<input name="b4" type="button" value="清空页面内容" onclick="onClear()" />
<p id="replace"></p>
</div>
</div>
<script type="text/javascript">
/*
做什么?
点击换换名称按钮，更换书名
1. 绑定点击事件
2. 更改名内容
*/
function onUpdateBookName() {
// var getId=document.getElementById('book')
// var inputEle=document.querySelector('input[name="changeBook"]')
// inputEle.value='童年'
// console.log(inputEle.value)
/*法一*/
// document.getElementById('book').innerHTML = '童年'
/* 法二 */
var divEle = document.querySelector('#book')//获取id名为book的元素
divEle.innerHTML = "书名：黑夜与白昼" //修改元素内容
}
/*
做什么?
点击input内容按钮，将所有input按钮内容值拼接成字符串设置给p标签作为内容显示
1. input内容按钮点击事件
2. 将所有input标签内容值拼接成字符串
3. 操作p标签内容
*/
function onShowInput() {
// var inputSe = document.querySelectorAll('input')
// var str = ''
// var p = document.querySelector('#replace')
// inputSe.forEach(function(item,index) {
// str = str + `${item.value}` })
// p.innerHTML = str
// console.log(str)
var inputEles = document.querySelectorAll('input')//获取所有名为input的元素，类数组
// 循环遍历类数组
var str = ''
for (var i = 0; i < inputEles.length; i++) {
var inputEle = inputEles[i] //input 元素
str = str + inputEle.value + ''//inputEle.value操作表单元素内容
}
var pEle = document.querySelector('#replace')//获取第一个id名为replace的元素
pEle.innerHTML = str
}
/*
做什么?
点击四季名称按钮，拼接四季名称显示
*/
function onSeason() {
var seasonInputs = document.querySelectorAll('input[name="season"]')
var str = ''
for (var i = 0; i < seasonInputs.length; i++) {
var inputEle = seasonInputs[i]
str = str + inputEle.value + ''
}
var pEle = document.querySelector('#replace')
pEle.innerHTML = str
}
function onClear() {
document.write('')
}
</script>
</body>
五、操作css样式
1.class 行内式
ele.style.样式
=>样式值
ele.style.样式名=样式值
<head>
<style>
.d1 {
width: 200px;
height: 200px;
background-color: skyblue;
}
.d2{
text-align: center;
}
.d3{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<h2 style="color:red;">操作样式</h2>
<div>元素一</div>
<h3 class="d3">元素三</h3>
<p></p>
<button onclick="getStyleTest()">获取style样式</button>
<script>
//获取 h2标签的行内样式
function getStyleTest(){
var h2Ele=document.querySelector('h2')
var colorValue=h2Ele.style.color //行内式
var pEle=document.querySelector('p')
pEle.innerHTML=colorValue
}
</script>
</body>2.className class样式
ele.classsName=类名
注：后面的类名会覆盖前面的类名
<head>
<style>
.d1 {
width: 200px;
height: 200px;
background-color: skyblue;
}
.d2{
text-align: center;
}
.d3{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<h2 style="color:red;">操作样式</h2>
<div>元素一</div>
<h3 class="d3">元素三</h3>
<p></p>
<button onclick="setClassStyle()">设置class样式</button>
<script>
function setClassStyle(){
var divEle=document.querySelector('div')//获取第一个名为div元素
// divEle.className='d1'
// divEle.className='d2'
divEle.classList.add('d1')
divEle.classList.add('d2')
}
</script>
</body>
3.classList动态添加移除class类样式
ele.classsList.add(类名1)
ele.classsList.add(类名2)
"类名1 类名2"
<head>
<style>
.d1 {
width: 200px;
height: 200px;
background-color: skyblue;
}
.d2{
text-align: center;
}
.d3{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<h2 style="color:red;">操作样式</h2>
<div>元素一</div>
<h3 class="d3">元素三</h3>
<p></p>
<button onclick="getClassStyle()">获取非行间样式</button>
<script>
// 更改h2字体大小为24px
function setStyleTest(){
var h2Ele=document.querySelector('h2')
h2Ele.style.fontSize='44px'//js 代码操作做样式名，样式名用驼峰命名 font-size=>fontize
h2ELe.style.background='skyblue'
}
</script>
</body>六、操作属性
1.getAttribute('属性值')
获取属性值
ele.getAttribute(属性名)
=>属性值
ele.属性 必须是本身拥有的属性
=>属性值
<body>
<h2 id="title" class="d1" a="100" b="100">元素一</h2>
<h3>元素二</h3>
<a href="http://www.baidu.com"></a>
<img src="./3.练习岛上书店/images/11239.png" alt="图片">
<img src="" alt="图片2">
<!-- .data-属性名 -->
<h4 date-index="1001" data-score="98">元素三</h4>
<button onclick="getAttr()">获取属性</button>
<script>
/*
.获取属性值
ele.getAttribute(属性名)
=>属性值
ele.属性 必须是本身拥有的属性
=>属性值
*/
function getAttr() {
var h2Ele = document.querySelector('h2')//获取h2的元素
var imgEle = document.querySelector('h2') //获取img元素
var idValue = imgEle.getAttribute('src')//获取h2元素id属性
console.log(idValue)
console.log(imgEle.src)
}
</script>
</body>2.setAttribute（'属性名'，"属性值"）
设置属性
ele.setAttribute(属性名,属性值)
ele.属性名=属性值
<body>
<h2 id="title" class="d1" a="100" b="100">元素一</h2>
<h3>元素二</h3>
<a href="http://www.baidu.com"></a>
<img src="./3.练习岛上书店/images/11239.png" alt="图片">
<img src="" alt="图片2">
<!-- .data-属性名 -->
<h4 date-index="1001" data-score="98">元素三</h4>
<button onclick="setAttr()">设置属性</button>
<script>
// ele.setAttribute(属性名,属性值)
// ele.属性名=属性值
function setAttr() {
var h3Ele = document.querySelector('h3')
h3Ele.setAttribute('id', 'tittl2')
h3Ele.setAttribute('a', '1000')
var imgEle = document.querySelectorAll('img')[1]
// imgEl.setAttribute('src','./3.练习岛上书店/images/11239.png')
imgEle.src = './3.练习岛上书店/images/book.png'
}
</script>
</body>3.removeAttribute('属性值')
删除、移除属性
<body>
<h2 id="title" class="d1" a="100" b="100">元素一</h2>
<h3>元素二</h3>
<a href="http://www.baidu.com"></a>
<img src="./3.练习岛上书店/images/11239.png" alt="图片">
<img src="" alt="图片2">
<!-- .data-属性名 -->
<h4 date-index="1001" data-score="98">元素三</h4>
<button onclick="getAttr()">获取属性</button>
<button onclick="setAttr()">设置属性</button>
<button onclick="removeAttr()">移除属性</button>
<button onclick="getMyAttr()">获取自定义属性</button>
<script>
function getMyAttr() {
var h4Ele = document.querySelector('h4')
var index = h4Ele.dataset.score// ele.dataset.属性值
console.log(index)
}
function removeAttr() {
var h2Ele = document.querySelector('h2')
h2Ele.removeAttribute('a')
}
</script>
</body>七、操作事件
给元素绑定点击事件
直接给元素添加onclick属性实现
绑定事件
1.属性事件
2.元素和时间行为分离
<body>
<button>按钮</button>
<div>元素一</div>
<script>
// function onMyAlert(){
var btn=document.querySelector('button')
btn.onclick=function(){
alert('绑定事件') // function(){alert('绑定事件') 执行事件的函数
}
// }
var divEle=document.querySelector('div')
divEle.onclick=function(){
divEle.innerHTML="今天是星期五"//修改元素内容
}
</script>
</script>
</body>八、选项卡
方式1
1.确定选中的选项
属性事件，传参，参数是选中选项下标
2.清除原来选中效果
循环遍历所有div
for（var i=0;i<div.length;i++){
div[i].className=''
}
3.设置当前选项选中的效果
currentDiv.classNamre='active'
<script>
// 1.确定选中的选项
var divEles = document.querySelectorAll('.container>div')
function onTab(index) {
// 2.清除原来选中效果
// 循环遍历所有div
for (var i = 0; i < divEles.length; i++) {
divEles[i].className = ''
}
// 设置当前选项选中的效果
divEles[index].className = 'active';
}
</script>
方式2：事件选项卡分离
1. 确定选中的选项
1.1 属性事件,传参,参数是选中选项下标
2. 清除原来选中效果
for(var i = 0; i < div.length; i++){
div[i].className = ''
}
3. 设置当前选项选中效果
currentDiv.className = 'active'
<script>
var divEles = document.querySelectorAll('.container>div')
// j为外层循环的是第几个div
for (var j = 0; j < divEles.length; j++) {
//选项j
divEles[j].onclick = function () {
for (var i = 0; i < divEles.length; i++) {
divEles[i].className = ''
}
// this关键字 表示当前点击的选项元素 也可将this改成let
this.className = 'active'
}
}
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
