目录
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>