01-写js代码的位置
1. js代码写在哪儿?
1)将js代码写在标签的事件属性中
2)将js代码写在script标签中(script标签可以放在html文件中的任何位置)
3)将js代码写在外部的js文件中,然后在html文件中用script标签导入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1.内联js -->
<button onclick="alert('你好!')">确定</button>
<p id="p1">我是段落1</p>
<p id="p2">我是段落2</p>
</body>
<!-- 2.内部js -->
<script>
// 这个里面只能写js代码
document.getElementById('p1').innerText = 'hello world!'
</script>
<!-- 3.外部js
特别注意:script标签既可以直接提供js代码,也可以用来导入外部js文件。但是一个script标签只能在这两个作用中二选一
-->
<script src="js/demo.js"></script>
</html>
02-DOM操作获取标签
1. DOM(document object mode)操作
- 通过document对象直接或者间接的操作网页内容
js中的document对象代表网页内容
DOM操作主要内容:获取标签、添加标签、删除标签、操作标签内容、操作标签属性、操作标签样式
2. 获取标签
1)直接获取标签
- 直接通过document对象获取标签
document.getElementById(id属性值) - 获取网页中id属性值为指定值的标签,返回值是标签对象
document.getElementsByClassName(class属性值) - 获取网页中class属性值为指定值的所有标签,返回值是数组(列表),数组中的元素是标签对象
document.getElementsByTagName(标签名) - 获取网页中所有指定的标签,返回值是数组(列表),数组中的元素是标签对象
document.getElementsByName(name属性值) - 获取网页中所有name属性值为指定值的标签
2)间接获取标签
- 通过父标签获取子标签,或者通过子标签获取父标签
a. 获取一个标签所有的子标签: 标签对象.children
b.获取一个标签的第一个子标签: 标签对象.firstElementChild
c.获取最后一个子标签:标签对象.lastElementChild
d.获取父标签: 标签对象.parentElement
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box1">
<p class="c1">我是段落1</p>
<a>我是超链接1</a>
<span class="c1">我是span1</span>
<p id="p1">我是段落2</p>
<p>我是段落3</p>
</div>
<div id="box2">
<span>我是span2</span>
<a class="c1">我是超链接2</a>
<input type="text" name="username" id="">
<input type="radio" name="gender">男
<input type="radio" name="gender">女
</div>
</body>
<!-------------- 1)直接获取标签 -------------->
<script type="text/javascript">
// 通过id值获取标签
result = document.getElementById('p1')
console.log(result)
// 通过class属性获取标签
result = document.getElementsByClassName('c1')
console.log(result)
console.log(result[2])
// 通过标签名获取标签
result = document.getElementsByTagName('p')
console.log(result)
// 通过name属性值获取标签(了解)
result = document.getElementsByName('gender')
console.log(result)
</script>
<!-------------- 2)获取子标签和父标签 -------------->
<script>
console.log('----------------------------------------------')
// 1.获取子标签
var box1 = document.getElementById('box1')
// 1)获取一个标签所有的子标签: 标签对象.children
result = box1.children
console.log(result)
// 2)获取一个标签的第一个子标签
result = box1.firstElementChild
console.log(result)
// 3)获取最后一个子标签
result = box1.lastElementChild
console.log(result)
// 2.获取父标签
result = box1.parentElement
console.log(result)
var p = document.getElementById('p1')
result = p.parentElement
console.log(result)
</script>
</html>
03-添加和获取标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box">
<p>我是段落1</p>
</div>
<div id="box2">
<p id="p2">我是段落3</p>
<a href="">我是超链接1</a>
</div>
</body>
<script>
// 1. 添加标签: 创建标签 -> 添加标签
// 1)创建标签:document.createElement(标签名)
var p1 = document.createElement('p') // 创建一个空的p标签
p1.innerText = '我是段落2'
var a1 = document.createElement('a')
var img1 = document.createElement('img')
var i1 = document.createElement('input')
// 2)添加标签:
// 父标签对象.appendChild(标签) - 在父标签对象里面的最后添加指定标签
// 父标签对象.insertBefore(标签1, 标签2) - 将标签1插入到父标签对象中标签2的前面
var box = document.getElementById('box')
box.appendChild(p1)
box.appendChild(a1)
box.insertBefore(img1, a1)
box.insertBefore(i1, box.firstElementChild)
</script>
<script>
// 2. 删除标签: 标签对象.remove() - 删除指定标签
var p3 = document.getElementById('p2')
p3.remove()
// var box2 = document.getElementById('box2')
// box2.removeChild(p3)
</script>
</html>
04-操作标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="p1">
你好,<b>js</b>
</p>
<p id="p2">
你好,<b>js</b>
</p>
<a href="https://www.baidu.com">百度</a>
<img src="img/logo-201305-b.png" title="京东" alt="加载失败">
<p id="p3">我是段落1</p>
</body>
<script>
// 1.操作双标签的标签内容
// 1) innterText(只能处理文字内容)
var p1 = document.getElementById('p1')
// 标签对象.innerText - 获取指定标签的标签内容
var result = p1.innerText
console.log(result)
// 标签对象.innerText = 字符串 - 修改指定标签的标签内容
// p1.innerText = 'hello world!'
p1.innerText = '<a href="https://www.baidu.com">百度</a>'
// 2)innerHTML(可以处理子标签)
var p2 = document.getElementById('p2')
var result = p2.innerHTML
console.log(result)
// p2.innerHTML = 'hello world!'
p2.innerHTML = '<a href="https://www.baidu.com">百度</a>'
</script>
<script>
// 2.操作标签属性:
// nums = [10, 29] -> nums[0]
// [<img src="img/logo-201305-b.png" title="京东" alt="加载失败">]
var img1 = document.getElementsByTagName('img')[0]
// 1)获取属性值:标签对象.html属性名
var result1 = img1.title
var result2 = img1.src
console.log(result1, result2, img1.alt)
// 2)修改属性值:标签对象.html属性名 = 新值
img1.title = 'JingDong'
nums = [100, 200, 300]
console.log(nums[1])
</script>
<script>
// 3.操作标签样式:
var p1 = document.getElementById('p1')
var p2 = document.getElementById('p3')
// 1)单独设置某个样式:标签对象.style.css属性名 = 'css属性值'
// 注意:css属性名中如果有‘-’,在js中用‘-’后面的第一个字母大写的方式来取消'-'
// font-size(css) -> fontSize(js)
// background-color(css) -> backgroundColor(js)
p1.style.color = '#ff00f9'
p1.style.fontSize = '50px'
p1.style.backgroundColor = 'yellow'
// 2)同时设置多个样式:标签对象.style = 'css原生样式表'
p2.style = 'color:red; font-size:50px; background-color:yellow;'
</script>
</html>
05-点击按钮操作页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box">
</div>
<input id="name" type="text">
<button onclick="addFruits()">确定</button>
</body>
<script>
// console.log('hello world!')
// console.log('结束!')
// 定义函数语法:
function sureAction(){
console.log('hello world!')
console.log('结束!')
}
// 调用函数
// sureAction()
function addFruits(){
// 获取装所有水果的盒子
var box = document.getElementById('box')
// 获取输入框内容
var input1 = document.getElementById('name')
var fruitsName = input1.value
input1.value = ''
// 创建输入框内容对应的水果标签
var p1 = document.createElement('p')
p1.innerText = fruitsName
box.appendChild(p1)
}
</script>
</html>
06-动态添加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
/* -----------水果显示部分的样式--------------- */
#box1{
margin-left: 50px;
margin-top: 40px;
}
#box1>p{
background-color: rgb(96, 139, 140);
width: 250px;
height: 60px;
margin-top: 3px;
text-align: center;
line-height: 60px;
color: white;
font-size: 22px;
position: relative;
}
#box1 span{
position: absolute;
right: 10px;
}
/* --------------输入框和按钮部分---------------- */
#box2{
margin-left: 50px;
margin-top: 25px;
}
#box2>input{
width: 250px;
height: 45px;
border: none;
border-bottom: 1px solid gray;
outline: none;
/* 一定输入框的光标到中间 */
text-align: center;
font-size: 20px;
}
#box2>button{
width: 90px;
height: 45px;
background-color: coral;
color: white;
font-size: 22px;
border: none;
}
</style>
</head>
<body>
<div id="box1">
<p>苹果<span>×</span></p>
<p>草莓<span>×</span></p>
<p>香蕉<span>×</span></p>
<p>榴莲<span>×</span></p>
</div>
<div id="box2">
<input type="text">
<button onclick="addFruits()">确定</button>
</div>
</body>
<script>
function addFruits(){
// 1.获取输入框内容
var input1 = document.getElementById('box2').firstElementChild
var fruitsName = input1.value
// 获取完内容后清空输入框
input1.value = ''
// 2.创建水果对应的标签并且添加到box1中
// 1)创建水果标签
var p = document.createElement('p')
p.innerHTML = fruitsName + '<span>×</span>'
// 设置背景颜色为随机色
r = parseInt(Math.random()*255)
g = parseInt(Math.random()*255)
b = parseInt(Math.random()*255)
p.style.backgroundColor = `rgba(${r}, ${g}, ${b}, 0.4)`
// 2)添加标签
var box1 = document.getElementById('box1')
box1.insertBefore(p, box1.firstElementChild)
}
</script>
</html>
07-隐藏超过父标签的部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box">
<div id="div1"></div>
</div>
<style>
#box{
width: 300px;
height: 300px;
border: 1px solid saddlebrown;
/*隐藏子标签超出的部分*/
overflow: hidden;
}
#div1{
width: 600px;
height: 100px;
background-color: aquamarine;
}
</style>
</body>
</html>