js--DOM基本使用

一 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.其他操作

删除节点

box.removeChild(img)

删除属性

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>