一 history 对象 和 navigator 对象
1.查看history历史对象
<button onclick="func1()">查看history历史对象</button>
<script>
function func1(){
console.log(history)
}
</script>
2.回到上一页 和 下一页
<button onclick="func2()">上一页</button>
<button onclick="func3()">下一页</button>
<script>
function func2(){
history.go(-1)
}
function func3(){
// 跳转第一页
history.go(1)
// 跳转到第二页
history.go(2)
}
</script>
3.刷新
<button onclick="func4()">刷新</button>
<script>
function func4(){
history.go(0)
}
console.log(navigator)
console.log(navigator.platform) // 判断是pc端还是移动端
console.log(navigator.userAgent) // 用在爬虫中,未造成浏览器进行爬取数据
</script>
二. DOM找节点_通过选择器
"""通用代码"""
<div id="box">
<p class="p1">张三</p>
<p class="p1">李四</p>
<p class="p2">王五</p>
</div>
<!-- <======================> -->
<div id="box2">
<input type="text" name="username">
<input type="text" name="username2">
<div name="aa">赵六</div>
<div name="aa">田七</div>
</div>
1.document
// 通过id找元素节点
var box = document.getElementByID(‘box‘)
console.log(box)
2.getElementsByClassName
//通过class找元素节点 [返回的是数组]
var p1 = document.getElementsByClassName(‘p1‘)
console.log(p1)
zhangsan = p1[0]
console.log(zhangsan)
lisi = p1[1]
console.log(lisi)
3.getElementsByTagName
//通过标签获取元素节点 [返回的是数组]
var p = document.getElementsByTagName("p")
console.log(p)
4.getElementsByName
//通过标签身上的name属性 [返回的是数组]
var input = document.getElementsByName("username")[0]
console.log(input)
var div = document.getElementsByName("aa")
console.log(div)
console.log(div[0])
console.log(div[1])
5.querySelector
//通过css选择器的方式,获取对应的元素节点(获取一个)
var input = document.querySelector("input")
console.log(input , typeof(input))
console.log("<==============>")
var div = document.querySelector("#box2 div")
console.log(div)
console.log("<==============>")
6.querySelectorAll
//通过css选择器的方式,获取对应的元素节点(获取所有),返回数组
var all = document.querySelectorAll("input")
console.log(all , typeof(input))
三. DOM找节点_通过层级关系
<div class="aaa">1号div</div>
<div>2号div</div>
<div id="box">3号div
<p>1号p</p>
<p>2号p</p>
</div>
<div>4号div</div>
<div>5号div</div>
1.基本
// 1.获取文档的元素节点对象
console.log(document.documentElement)
// 2.获取文档的元素节点对象 -> 子节点
var html_children = document.documentElement.children
console.log(html_children) // [head, body]
// 找body
body = html_children[1]
body = document.body
console.log(body)
// 找body => 所有子节点
console.log(body.children)
// 找body => 子节点中的第一个
console.log(body.children[0])
// firstElementChild 获取第一个元素节点
console.log(body.firstElementChild)
// lastElementChild 获取最后一个元素节点
console.log(body.lastElementChild)
基本查找
2.连贯操作
// 找body => 子节点中的第一个 => 下一个节点
console.log(body.children[0].nextSibling)
// 找body => 子节点中的第一个 => 下一个元素节点
console.log(body.children[0].nextElementSibling)
// 找body => 子节点中的第一个 => 下一个元素节点 => 下一个元素节点
console.log(body.children[0].nextElementSibling.nextElementSibling)
// 找body => 子节点中的第一个 => 下一个元素节点 => 下一个元素节点 => 子节点
console.log(body.children[0].nextElementSibling.nextElementSibling.children)
// 找body => 子节点中的第一个 => 下一个元素节点 => 下一个元素节点 => 第二个子节点
console.log(body.children[0].nextElementSibling.nextElementSibling.children[1])
// 找body => 子节点中的第一个 => 下一个元素节点 => 下一个元素节点 => 第二个子节点
console.log(body.children[0].nextElementSibling.nextElementSibling.lastElementChild)
// 找body => 子节点中的第一个 => 下一个元素节点 => 下一个元素节点 => 第二个子节点 => 上一个节点
console.log(body.children[0].nextElementSibling.nextElementSibling.lastElementChild.previousSibling)
// 找body => 子节点中的第一个 => 下一个元素节点 => 下一个元素节点 => 第二个子节点 => 上一个元素节点
console.log(body.children[0].nextElementSibling.nextElementSibling.lastElementChild.previousElementSibling)
// 找body => 子节点中的第一个 => 下一个元素节点 => 下一个元素节点 => 第二个子节点 => 上一个元素节点 => 上一个节点
console.log(body.children[0].nextElementSibling.nextElementSibling.lastElementChild.previousElementSibling.previousSibling)
// 找body => 子节点中的第一个 => 下一个元素节点 => 下一个元素节点 => 第二个子节点 => 上一个元素节点 => 上一个节点 => 父元素节点
console.log(body.children[0].nextElementSibling.nextElementSibling.lastElementChild.previousElementSibling.previousSibling.parentElement)
连贯操作
四.dom_控制节点
1.创建元素节点对象
var img = document.createElement(‘img‘)
2.设置节点属性 方法一
1.设置属性 ok
img.src = ‘mixian.png‘
img.title = ‘过桥的米线‘
2.自定义属性 no
img.abcd = "ceshi"
console.log(img) //error
2.设置节点属性 方法二
内置属性 ok
img.setAttribute("src","lixian.png")
自定义属性 ok
img.setAttribute("abcd","ceshi")
3.获取节点属性
console.log(img.abcd)
console.log(img.getAttribute(‘abcd‘))
4.把img元素节点对象插入到div appendChild
var box = document.getElementByID(‘box‘)
// 插到最后
box.appendChild(img)
5.添加a链接插入到img这个标签的前面
var a = document.createElement(‘a‘)
a.href = "http://www.baidu.com"
// 给a标签添加内容
a.innerText = "点我跳百度"
// insertBefore(新元素,旧元素)
box.insertBefore(a,img)
console.log(a)
6.其他操作
删除节点
删除属性
a.removeAttribute(‘href‘)
替换节点
var span = document.createElement(‘span‘)
insertBefore(新元素,旧元素)
box.replaceChild(span,a)
console.log(box)
五 DOM_修改内容
1.修改内容
<button onclick="func1()">点我修改内容</button>
var p = document.querySelector("#box p")
function func1(){
// 方式一 (只识别文本)
// p.innerText = "没中奖 <a href=‘http://www.baidu.com‘>点我</a>"
// 方法二 (识别文本+标签) 推荐
p.innerHTML = "没中奖 <a href=‘http://www.baidu.com‘>点我</a>"
// 获取
console.log(p.innerHTML)
}
2.清空
<button onclick="func2()">点我清空内容</button>
function func2(){
p.innerHTML = ""
}
3.获取表单内容
<button onclick="func3()">点我获取表单内容</button>
function func3(){
var text = document.querySelector("input[type=text]")
var file = document.querySelector("input[type=file]")
console.log(text)
console.log(file)
console.log(text.value)
// 获取的是文件路径
console.log(file.value , typeof(file.value))
// 获取数据本身
console.log(file.files)
console.log(file.files[0])
}
六 小效果
1.全选 反选 不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全选,反选,不选</title>
</head>
<body>
<ul id="ul1">
<li> <button>全选</button> </li>
<li> <button>不选</button> </li>
<li> <button>反选</button> </li>
</ul>
<ul id="ul2">
<li> <input type="checkbox" > 吃饭 </li>
<li> <input type="checkbox" > 吃米线 </li>
<li> <input type="checkbox" > 打豆豆 </li>
<li> <input type="checkbox" > 学python </li>
</ul>
<script>
btn1 = document.querySelector("#ul1 li:nth-child(1)")
btn2 = document.querySelector("#ul1 li:nth-child(2)")
btn3 = document.querySelector("#ul1 li:nth-child(3)")
console.log(btn1)
// 设置全选
btn1.onclick = function(){
var data = document.querySelectorAll("#ul2 li input")
console.log(data)
for(var i of data){
// 设置当前阶段对象input为选中状态;
i.checked = true;
}
}
//设置不选
btn2.onclick = function(){
var data = document.querySelectorAll("#ul2 li input")
for(var i of data){
// 设置当前阶段对象input为选中状态;
i.checked = false;
}
}
// 设置反选
btn3.onclick = function(){
var data = document.querySelectorAll("#ul2 li input")
for(var i of data){
// 方法一
i.checked = !i.checked
/*
// 方法二
if(i.checked == true){
i.checked = false;
}else{
i.checked = true;
}
*/
}
}
</script>
</body>
</html>
全选 反选 不选
2.显示隐藏密码与切换照片
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显示隐藏密码</title>
</head>
<body>
<input type="password" >
<button onclick="func1()" >显示密码</button>
<div>
<img src="lixian.png" alt="">
</div>
<script>
// 1实现效果: 显示隐藏密码
var password = document.querySelector("input[type=password]")
var button = document.querySelector("button")
console.log(password)
console.log(button)
function func1(){
console.log(password.type)
if(password.type == "password"){
password.type = "text";
button.innerHTML = "隐藏密码"
}else{
password.type = "password";
button.innerHTML = "显示密码"
}
}
// 2.实现效果: 切换图片
var img = document.querySelector("img")
img.onclick = function(){
console.log(img.src)
// 按照/进行分割,获取文件名
var arr = img.src.split("/")
// 文件名在数组的最后一个元素上
var imgname = arr[arr.length-1]
// 如果是lixian就来回切换(大小图)
if(imgname == "lixian.png"){
img.src = "da.png"
}else{
img.src = "lixian.png"
}
console.log(imgname)
}
</script>
</body>
</html>
密码显示与否
js--DOM基本使用