目录
1.类数组不能使用Array有常用的方法 例如 push、pop等
1.DOM文档对象模型
作用：
提供操作html文档 html标签元素的能力
document对象属性
对象 说明 title 文档标题，即title标签内容 URL 文档地址 fileCreateDate 文档创建日期 fileModifiedDate 文档修改时间（精确到天） lastModified 文档修改时间（精确到秒） fileSize 文档大小 fgColor 定义文档的前景色 bgColor 定义文档的背景色 linkColor 定义“未访问”的超链接颜色 alinkColor 定义“被激活”的超链接颜色 vlinkColor 定义“访问过”的超链接颜色除write（）外的其它方法：
1.获取标签元素
getElementById('')
<body>
<h2 id="haha">哈哈哈哈哈哈哈哈哈</h2>
<div class="d1">元素1</div>
<div class="d1">元素2</div>
<div class="d2">元素3</div>
<script>
//通过ID查找元素
function test01(){
var h2Ele=document.getElementById('haha')
console.log(h2Ele)
}
test01()
</script>
</body>getElementByClassName('') 返回一个类数组【维数组】
<body>
<h2 id="haha">哈哈哈哈哈哈哈哈哈</h2>
<div class="d1">元素1</div>
<div class="d1">元素2</div>
<div class="d2">元素3</div>
<script>
//通过类名查找元素
function teset02(){
var divEles=document.getElementsByClassName('d1')
console.log(divEles)//返回的是类数组
//遍历数组
for(var i=0;i<divEles.length;i++){
console.log(divEles[i])
}
//返回的是类名为d1的元素：元素1 元素2
}
teset02()
</script>
</body>getElementByTagName('')
<body>
<h2 id="haha">哈哈哈哈哈哈哈哈哈</h2>
<div class="d1">元素1</div>
<div class="d1">元素2</div>
<div class="d2">元素3</div>
<script>
//通过标签名查找元素
function test03(){
var divEles=document.getElementsByTagName('div')
console.log(divEles)//伪数组
for(var i=0;i<divEles.length;i++){
console.log(divEles[i])
}
}
test03()
</script>
</body>2.通过选择器获取标签元素
document.querySelector()//返回第一个满足条件的
<body>
<h2 id="haha">哈哈哈哈哈哈哈哈哈</h2>
<div class="d1">元素1</div>
<div class="d1">元素2</div>
<div class="d2">元素3</div>
<script>
//通过选择器查找满足条件的第一个元素
function test04(){
var h2Ele=document.querySelector('#haha')
console.log(h2Ele)//返回的是找到的第一个元素
}
test04()
</script>
</body>document.querySelectAll()//返回所有满足条件的
<body>
<h2 id="haha">哈哈哈哈哈哈哈哈哈</h2>
<input type="button" value="你是一个大聪明" name="abc">
<div class="d1">元素1</div>
<div class="d1">元素2</div>
<div class="d2">元素3</div>
<script>
//通过选择器查找所有满足条件的元素
function test05(){
var divEles=document.querySelectorAll('div')
console.log(divEles)
var inputEle=document.querySelectorAll('input[name="abc"]')
//通过属性选择器选择name属性为abc的input标签
console.log(inputEle)
for(var i=0;i<divEles;i++)
{
console.log(divEles[i])
}
console.log(divEles)
}
test05()
</script>
</body>【选择器扩展，可查看第一阶段的笔记资源，分为基础选择器、层级选择器、伪类选择器、属性选择器】
2.类数组和数组Array的区别
1.类数组不能使用Array有常用的方法 例如 push、pop等
<body>
<h2 id="haha">哈哈哈哈哈哈哈哈哈</h2>
<div class="d1">元素1</div>
<div class="d1">元素2</div>
<div class="d2">元素3</div>
<script>
//通过选择器查找所有满足条件的元素
function test05(){
var divEles=document.querySelectorAll('div')
console.log(divEles)
divEles.pop()///控制台输出会报错哦！！！！！！！！
for(var i=0;i<divEles;i++)
{
console.log(divEles[i])
}
console.log(divEles)
}
test05()
</script>
</body>
2.类数组可以遍历，可以使用[]访问
<body>
<h2 id="haha">哈哈哈哈哈哈哈哈哈</h2>
<div class="d1">元素1</div>
<div class="d1">元素2</div>
<div class="d2">元素3</div>
<script>
//通过标签名查找元素
function test03(){
var divEles=document.getElementsByTagName('div')
console.log(divEles)//伪数组
for(var i=0;i<divEles.length;i++){//遍历
console.log(divEles[i])//访问
}
}
test03()
</script>
</body>
3.操作内容
var h2Ele=document.querySelector('h2')//获取要操作的标签
1.获取内容
h2Ele.innerHTML
<body>
<h2 id="haha">哈哈哈哈哈哈哈哈哈</h2>
<input type="button" value="你是一个大聪明" name="abc">
<div class="d1">元素1</div>
<div class="d1">元素2</div>
<div class="d2">元素3</div>
<script>
//操作元素内容
function test06(){
var h2Ele=document.querySelectorAll('#haha')//id选择器
console.log(h2Ele)//注意一个元素也要遍历
for(var i=0;i<h2Ele.length;i++)
{
var h2Value=h2Ele[i].innerHTML//获取所有id为haha的值
console.log(h2Value)
}
}
test06()
</script>
</body>h2Ele.innerText
<body>
<h2 id="haha">哈哈哈哈哈哈哈哈哈</h2>
<input type="button" value="你是一个大聪明" name="abc">
<div class="d1">元素1</div>
<div class="d1">元素2</div>
<div class="d2">元素3</div>
<script>
//操作元素内容
//获取元素内容
function test06(){
var h2Ele=document.querySelectorAll('#haha')//id选择器
console.log(h2Ele)//注意一个元素也要遍历
for(var i=0;i<h2Ele.length;i++)
{
var h2Value2=h2Ele[i].innerText//获取所有id为haha的值
console.log(h2Value2)
}
}
test06()
</script>
</body>inputEle.value 【表单元素的值】
<body>
<h2 id="haha">哈哈哈哈哈哈哈哈哈</h2>
<input type="button" value="你是一个大聪明" name="abc">
<input type="button" value="你是一个小笨蛋" name="abc">
<div class="d1">元素1</div>
<div class="d1">元素2</div>
<div class="d2">元素3</div>
<script>
//操作元素内容
//获取元素内容
function test06(){
var inputEle=document.querySelector('input[name=abc]')//name属性为abc的第一个满足条件input标签
var inputV=inputEle.value
console.log(inputV)
}
test06()
</script>
</body>2.设置内容
h2Ele.innerHTML='新内容'
h2Ele.innerText='新内容'
inputEle.value='新内容'
<body>
<h2 id="haha">哈哈哈哈哈哈哈哈哈</h2>
<input type="button" value="你是一个大聪明" name="abc">
<input type="button" value="你是一个小笨蛋" name="beautify">
<div class="d1">元素1</div>
<div class="d1">元素2</div>
<div class="d2">元素3</div>
<script>
//操作元素内容
//设置内容
function test07(){
//innerHTML方式
var d1Ele=document.querySelector('.d1')
d1Ele.innerHTML='<span>这不只是纯文本还可以自动解析标签哦！</span>'
var d1V=d1Ele.innerHTML
document.write("第一个d1V输出: ",d1V)
//innerText方式
var d2Ele=document.querySelector('.d2')
d2Ele.innerText='<span>这是纯文本呢！</span>'
var d2V=d2Ele.innerText
// console.log(d2V)
document.write("d2V输出: ",d2V)
//表单标签的value方式
var inputEle=document.querySelector('input[name=abc]')//name属性为abc的第一个满足条件input标签
inputEle.value='hello world'//设置内容
var inputV=inputEle.value
console.log(inputV)
}
test07()
</script>
</body>3.innerHTML和innerText的区别
1.innerText以纯文本形式显示，不能识别标签
2.innerHTML如果有标签会解析标签
4.操作样式
获取行内样式：
普通样式：
ele.style.样式名-->返回样式的值
设置样式：
ele.style.样式名=''
<body>
<h2 id="haha" style="color: skyblue">哈哈哈哈哈哈哈哈哈</h2>
<input type="button" value="你是一个大聪明" name="abc">
<input type="button" value="你是一个小笨蛋" name="beautify">
<div class="d1">元素1</div>
<div class="d1">元素2</div>
<div class="d2">元素3</div>
<script>
//操作样式
//行内样式
function test08(){
var h2Ele=document.querySelector('#haha')
var styleV=h2Ele.style.color//获取行内样式值
console.log(styleV)
//设置样式值
h2Ele.style.color='red'
}
test08()
</script>
</body>
类样式：
ele.className=类名 后者覆盖前者 只要有一个样式用这个
加两个样式用字符串拼接
ele.classList.add(类名1)
ele.classList.add(类名2) 直接添加不会覆盖前者
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>案例</title>
<style>
.d3 {
color: pink
}
.d4 {
font-size: 200px
}
</style>
</head>
<body>
<h2 id="haha" style="color: skyblue">哈哈哈哈哈哈哈哈哈</h2>
<input type="button" value="你是一个大聪明" name="abc">
<input type="button" value="你是一个小笨蛋" name="beautify">
<div class="d1">元素1</div>
<div class="d1">元素2</div>
<div class="d2">元素3</div>
<div class="dd">啊这……………………这</div>
<script>
//操作样式
//类样式
function test09() {
var d2Ele = document.querySelector('.d2')
//添加类样式
var d2StyleV = d2Ele.className = 'd4'
console.log(d2StyleV)//输出类名
var d2StyleV1 = d2Ele.className = 'd3'
console.log(d2StyleV1)//输出类名
//className会覆盖前面的类样式所以字体变大和颜色不会同时发生只发生后者
var d1Ele = document.querySelector('.d1')
d1Ele.classList.add ('d3')
d1Ele.classList.add ('d4')
//classList不会覆盖前面的类样式所以字体变大和颜色同时发生在第一个d1上
//className可用拼接使两个类样式同时发生
var dEle = document.querySelector('.dd')
dEle.className = 'd4 d3'
}
test09()
</script>
</body>
获取非行间样式：
window.getComputedStyle(元素).样式名==>样式值
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>案例</title>
<style>
.d3 {
color: pink
}
.d4 {
font-size: 200px
}
.dd{
font-size: 30px;
color: blueviolet;
}
</style>
</head>
<body>
<h2 id="haha" style="color: skyblue">哈哈哈哈哈哈哈哈哈</h2>
<input type="button" value="你是一个大聪明" name="abc">
<input type="button" value="你是一个小笨蛋" name="beautify">
<div class="d1">元素1</div>
<div class="d1">元素2</div>
<div class="d2">元素3</div>
<div class="dd">啊这……………………这</div>
<script>
//操作样式
//获取非行内样式
function test10(){
var ddEle=document.querySelector('.dd')
var ddStyle=window.getComputedStyle(ddEle).color
console.log(ddStyle)
}
test10()
</script>
</body>5.操作属性（src id name ……）
通过JS代码动态获取属性值或设置属性
1.获取属性值
ele.getAttribute(属性名)==>返回属性值
ele.属性名 只能是自身属性 例如：img里的src属性 并不是自定义属性否则返回[undefined]
2.设置属性
ele.setAttribute(属性名,属性值)
ele.属性名=属性值
3.删除属性
ele.removeAttribute('属性名')
4.data-属性名 自定义的属性
ele.dataset.index ==>自定义属性值
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>案例</title>
<style>
.d3 {
color: pink
}
.d4 {
font-size: 200px
}
.dd{
font-size: 30px;
color: blueviolet;
}
</style>
</head>
<body>
<h2 id="haha" style="color: skyblue">哈哈哈哈哈哈哈哈哈</h2>
<input type="button" value="你是一个大聪明" name="abc">
<input type="button" value="你是一个小笨蛋" name="beautify">
<div class="d1" a-width="100" b-width="200" data-line="2">元素1</div>
<div class="d1">元素2</div>
<div class="d2">元素3</div>
<div class="dd">啊这……………………这</div>
<script>
//操作属性
function test11(){
//获取属性值
function test001(){
var d1Ele=document.querySelector('.d1')
// 方式一
var attr=d1Ele.getAttribute('a-width')
console.log(attr)
// 方式二
console.log(document.querySelector('input').type)
console.log(d1Ele.a-width)//这个会报错，必须是自身自带的属性
}
// test001()//函数调用
//设置属性值
function test002(){
var d1Ele=document.querySelector('.d1')
// 方式一
var attr=d1Ele.setAttribute('a-width','200')
// 方式二
var attr1=document.querySelector('input').type='text'
console.log(attr1)
// console.log(d1Ele.a-width)//这个会报错，必须是自身自带的属性
}
// test002()
// 删除属性
function test003(){
var d1Ele=document.querySelector('.d1')
d1Ele.removeAttribute('b-width')
}
// test003()
//data-属性名
function test004(){
var d1Ele=document.querySelector('.d1')
var str=d1Ele.dataset.line//获取的是data-xxx的属性值
console.log(str)
}
// test004()
}
test11()
</script>
</body>
6.操作事件
给元素绑定点击事件
绑定事件
1.属性事件
直接给元素添加onclick属性事件
<body>
<h2 id="haha" style="color: skyblue">哈哈哈哈哈哈哈哈哈</h2>
<input type="button" value="你是一个大聪明" name="abc">
<input type="button" value="你是一个小笨蛋" name="beautify" >
<div class="d1" a-width="100" b-width="200" data-line="2">元素1</div>
<div class="d1">元素2</div>
<div class="d2">元素3</div>
<div class="dd" onclick="testOnclick()">啊这……………………这</div>//绑定事件
<script>
//操作事件
function testOnclick(){
var ddEle=document.querySelector('.dd')
ddEle.style.color='pink'//点击dd变粉色
}
</script>
</body>2.元素和事件分离
先获取元素，然后ele.onclick
<body>
<div class="dd">啊这……………………这</div>
<script>
//操作事件
// 绑定与元素分离
function testBangd() {
var ddEle = document.querySelector('.dd')
ddEle.onclick = function () {
ddEle.style.color = 'red'//点击变红色
}
}
</script>
</body>案例：
岛上书名 ：点击更换书名 实现点击按钮获取对应内容
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>操作内容示例</title>
<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="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.doubanio.com%2Fview%2Fthing_review%2Fl%2Fpublic%2F1789989.jpg&refer=http%3A%2F%2Fimg1.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664172247&t=dbcd5423008facb8148f202bf1cf763d" 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 arr=['书名:JavaScript编程','书名:C语言高级编程','书名:C++高级编程','书名:Python','书名：岛上书店']
var name=document.querySelector('#book')
var currentkey=name.innerHTML
var key=arr.indexOf(currentkey)
key+=1
if(key==arr.length)
{
key=0
}
name.innerHTML=`${arr[key]}`
// console.log(key)
// console.log(`${arr[key]}`)
}
/*
做什么?
点击input内容按钮，将所有input按钮内容值拼接成字符串设置给p标签作为内容显示
1. input内容按钮点击事件
2. 将所有input标签内容值拼接成字符串
3. 操作p标签内容
*/
function onShowInput() {
var inputall=document.querySelectorAll('input')
// console.log(inputall)
var str=''
inputall.forEach(function(item){
str=str+item.value+" "
})
console.log(str)
var strall=document.querySelector('p')
strall.innerHTML=str
}
// onShowInput()
/*
做什么?
点击四季名称按钮，拼接四季名称显示
*/
function onSeason() {
var inputall=document.querySelectorAll("input[name='season']")
// console.log(inputall)
var str=''
inputall.forEach(function(item){
str=str+item.value+' '
})
console.log(str)
var strall=document.querySelector('p')
strall.innerHTML=str
}
// onSeason()
function onClear() {
document.write('')
}
</script>
</body>
</html>
640
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
