Dom,查找标签和操作标签

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

元素查找

元素直接查找

document.getElementById             根据ID获取一个标签(唯一ID)

document.getElementsByName          根据name属性获取标签集合（一个name属性列表）

document.getElementsByClassName     根据class属性获取标签集合

document.getElementsByTagName       根据标签名获取标签集合

1.根据元素ID获取元素值HTML

<div id="ii1">这是一个ii1的div标签</div>

<a>901</a>

<a>902</a>

<a>903</a>

<a>904</a>

• 获取id为ii1的标签getElementById；

document.getElementById("ii1")

<div id=​"ii1">​这是一个ii1的div标签​</div>​

• 并拿到值innerText；

document.getElementById("ii1").innerText

"这是一个ii1的div标签"

• 修改值innerText=""；

document.getElementById("ii1").innerText="新的标签被修改"

"新的标签被修改"

2.根据标签类型,a标签的元素值HTML

<div id="ii1">这是一个ii1的div标签</div>

<a>901</a>

<a>902</a>

<a>903</a>

<a>904</a>

• 获取a标签的所有内容,会依照列表的形式展现出来;

document.getElementsByTagName("a")

[<a>​901​</a>​, <a>​902​</a>​, <a>​903​</a>​, <a>​904​</a>​]

• 通过下标取出某一个值,并修改；

document.getElementsByTagName("a")[1]

<a>​902​</a>​

document.getElementsByTagName("a")[1].innerText="802"

"802"

• 通过for循环将所有的值修改为888;

tags = document.getElementsByTagName("a")

[<a>​901​</a>​, <a>​802​</a>​, <a>​903​</a>​, <a>​904​</a>​]

for(var i=0;i<tags.length;i++){tags[i].innerText=888;}

888

元素间接查找

parentNode          // 父节点

childNodes          // 所有子节点

firstChild          // 第一个子节点

lastChild           // 最后一个子节点

nextSibling         // 下一个兄弟节点

previousSibling     // 上一个兄弟节点

parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

lastElementChild        // 最后一个子标签元素

nextElementtSibling     // 下一个兄弟标签元素

previousElementSibling  // 上一个兄弟标签元素

1.根据元素ID获取元素值HTML

<div>

    <div></div>

    <div>c1</div>

</div>

<div>

    <div id="c2"></div>

    <div>c2</div>

</div>

<div>

    <div></div>

    <div>c3</div>

</div>

• 根据标签ID获取c2的标签内容getElementById赋值给tag变量；

tag = document.getElementById("c2")

<div id=​"c2">​</div>​

• 根据当前tag的标签获取它的父节点parentElement包含的内容；

tag.parentElement

<div>

    ​<div id=​"c2">​</div>

    ​<div>​c2​</div>

​</div>​

• 通过父级标签，获取父级节点的所有子节点children

tag.parentElement.children

[<div id=​"c2">​</div>​, <div>​c2​</div>​]

• 获取父级节点的，上一个兄弟标签previousElementSibling

tag.parentElement.previousElementSibling

<div>​

    <div>​</div>​

    <div>​c1​</div>

​</div>​

元素操作

内容操作

innerText   仅获取html中的文本

outerText

innerHTML   获取HTML全部内容

outerHTML

value       值

selectedIndex    为select标签特有的操作

innerText 和 innerHTML的使用

HTML代码内容

<div id="i1">

    <a>百度</a>

    <a>谷歌</a>

</div>

1.根据innerText取值和innerHTML取值差异

obj=document.getElementById("i1");

<div id=​"i1">​…​</div>​

obj.innerText

"百度 谷歌"

obj.innerHTML

"

    <a>百度</a>

    <a>谷歌</a>

"

2.根据innerText赋值和innerHTML赋值差异

# innerText赋值的html代码会显示在页面上

obj.innerText="<a href='https://www.baidu.com'>百度</a>"

"<a href='https://www.baidu.com'>百度</a>"

# innerHTML赋值的html会成为真正的超链接

obj.innerHTML="<a href='https://www.baidu.com'>百度</a>"

"<a href='https://www.baidu.com'>百度</a>"

value的使用针对select标签和input标签

HTML代码input内容

<div>

    <input type=​"text" value=​"python" id=​"i2">​

</div>

1.根据input标签获取内部值使用value

obj=document.getElementById("i2");

<input type=​"text" value=​"python" id=​"i2">​

obj.value

"python"

#赋值

obj.value="Linux"

"Linux"

HTML代码select内容

<div>

    <select id="i3">

        <option value="1">北京</option>

        <option value="2">上海</option>

        <option value="3">广州</option>

    </select>

</div>

1.根据select标签获取内部值使用value

obj=document.getElementById("i3");

<select id=​"i3">​…​</select>​

obj.value

"1"

# 修改当前下拉框值

obj.value="2"

"2"

obj.value="3"

"3"

2.通过selectedIndex修改下拉框的值

obj=document.getElementById("i3");

# 默认下标为0

obj.selectedIndex

0

# 修改值

obj.selectedIndex="2"

"2"

HTML代码textarea多行文本内容

<div>

    <textarea id="i4">多行文本</textarea>

</div>

1.根据textarea标签获取内部值使用value

obj=document.getElementById("i4");

<textarea id=​"i4">​多行文本​</textarea>​

obj.value

"多行文本"

# 赋值

obj.value="这是一个多行文本布啦布啦"

"这是一个多行文本布啦布啦"

属性操作

attribute                  // 获取指定属性

attributes                // 获取所有标签属性

setAttribute(key,value)   // 设置标签属性

removeAttribute           // 删除某个属性

HTML代码内容

<div>

    <input id="i1" type="text" value="请输入关键字" class="c1 c2">

</div>

1.通过setAttribute设置属性，removeAttribute删除属性

obj=document.getElementById("i1");

<input id=​"i1" type=​"text" value=​"请输入关键字" class=​"c1 c2">​

# 设置属性

obj.setAttribute("key","值")

obj

<input id=​"i1" type=​"text" value=​"请输入关键字" class=​"c1 c2" key=​"值">​

# 删除属性

obj.removeAttribute("value")

obj

<input id=​"i1" type=​"text" class=​"c1 c2" key=​"值">​

# 获取所有属性

obj.attributes

NamedNodeMap {0: id, 1: type, 2: class, 3: key, length: 4}

class样式操作

className                // 获取所有类名

classList                // 获取所有类名依照列表形式展现

classList.remove(cls)    // 删除指定类

classList.add(cls)       // 添加类

1.根据class操作来对类型进行增删改查

<div>

    <div id="c2"></div>

</div>

1.根据id先获取一个标签；

tag=document.getElementById("c2")

<div id=​"c2">​</div>​

2.查看这个标签所有类名classList或className

tag.classList

[]

tag.className

""

3.给该标签赋值,查看时class=​"c2"；

tag.className="c2"

"c2"

tag

<div id=​"c2" class=​"c2">​</div>​

4.通过classList.add("cls")给标签添加值；

tag.classList.add("c22")

tag

<div id=​"c2" class=​"c2 c22">​</div>​

tag.classList

["c2", "c22"]

tag.className

"c2 c22"

5.通过classList.remove("cls")删除指定的标签；

tag.classList.remove("c22")

tag

<div id=​"c2" class=​"c2">​</div>​

tag.classList

["c22"]

tag.className

"c22"

6.可以直接对样式进行操作；

obj=document.getElementById("c2");

<div id=​"c2">​aaa​</div>​

# 通过.style.color 直接对字体颜色进行调整

obj.style.color="red";

"pink"

标签操作

beforeBegin   上一个兄弟标签添加

afterBegin    子标签最上面添加

beforeEnd     子标签最下面添加

afterEnd      下一个兄弟标签添加

insertAdjacentHTML("beforeEnd",字符串变量)

appendChild(对象)

方式一：通过字符串的方式创建

    <input type="button" onclick="AddEle();" value="添加">

    <!--beforeBegin 在i1上一个兄弟标签添加-->

    <div id="i1">

        <!--afterBegin 在i1 子标签最上面添加 -->

        <p><input type="text"></p>

        <hr />

        <!--beforeEnd 在i1 子标签最下面添加-->

    </div>

    <!--afterEnd 在i1下一个兄弟标签添加-->

    <script>

        function AddEle() {

            var tag= '<p><input type="text"></p>';

            //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'

            document.getElementById("i1").insertAdjacentHTML("beforeEnd",tag)

        }

    </script>

方式二：通过对象的方式创建

    <input type="button" onclick="AddEle2();" value="添加">

    <div id="i2">

        <p><input type="text"></p>

        <hr />

    </div>

    <script>

        function AddEle2() {

            var tag= document.createElement("input");

            tag.setAttribute("type","text");

            tag.style.fontSize="16px";

            tag.style.color="red";

            var p= document.createElement("p");

            p.appendChild(tag);

            document.getElementById("i2").appendChild(p);

        }

    </script>

提交表单

1.将指定的标签设置为具有submit提交按钮的功能

    <form id="f1" action="http://www.baidu.com">

        <input type="text">

        <input type="submit" value="提交">

        <!--给a标签绑定一个onclick事件-->

        <a onclick="submitForm()">a标签的提交</a>

    </form>

    <script>

        function submitForm() {

            // 获取事件值.submit()具有提交的功能

            document.getElementById("f1").submit()

        }

    </script>

其他功能

// 弹出框

console.log                 输出框

alert                       弹出框

confirm                     确认框

// URL和刷新

location.href               获取当前页面的URL

location.href = "url"       重定向url

location.reload()           重新加载(刷新)

// 定时器

setInterval                 多次定时器

clearInterval               清除多次定时器

setTimeout                  单次定时器

clearTimeout                清除单次定时器

1.confirm确认弹窗功能

    <input type="submit" value="提交" onclick="submitForm()">

    <script>

        function submitForm() {

            var v = confirm("确认删除？");

            // 根据用户点击确认和取消，获取值为 false 或 true

            console.log(v);

        }

    </script>

2.获取当前页面的URL和跳转到指定的URL

location.href

"https://www.baidu.com/"

location.href="https://www.jd.com"

3.定时器

<script>

var obj = setInterval(function () {

    console.log(1);

    // clearInterval 执行一次后就清除这个定时器 obj

    clearInterval(obj);

},1000);

</script>

4.删除后提示删除成功，5秒后消失

    <script>

        function DeleteEle() {

            document.getElementById("status").innerHTML="<a  style='color: #00e207;font-size: 13px'>删除成功！</a>";

            setTimeout(function () {

                document.getElementById("status").innerText=""

            },5000)

        }

    </script>

事件绑定

• onfocus 标签获取光标时执行函数
• onblur 标签丢失光标时执行的函数
• onclick 标签被鼠标点击时执行函数
• onmouseover 鼠标放上时
• onmouseout 鼠标移开时
• this是当前正在操作的标签

绑定事件的三种方式：

1. 直接标签绑定 onclick="xxx()"
2. 先获取Dom对象，然后进行绑定 document.getElementById("tr").onfocus
3. 使用addEventListener进行事件绑定；

1.第一种绑定方式

<input id="i1" type="button" onclick="ClickOn(this);">

<script>

    function ClickOn(self) {

        // self 就代指当前点击的标签this

    }

</script>

2.第二种绑定方式

<input id="i1" type="button">

<script>

    document.getElementById("i1").onclick=function () {

        // this直接使用 就代指当前点击的标签

    }

</script>

3.第三种绑定方式,绑定一个事件输出两个结果

<input id="i1" type="button" value="事件绑定" >

<script>

    var myinput = document.getElementById("i1");

    myinput.addEventListener("click",function () {

        console.log("第三种绑定输出一")

    },false);

    myinput.addEventListener("click",function () {

        console.log("第三种绑定输出二")

    },false);

</script>

4.区分addEventListener中的第三个参数false和true

1.CSS代码

#main{

    background-color: #004bdd;

    width: 300px;

    height: 300px;

}

#content{

    background-color: #00e207;

    width: 150px;

    height: 150px;

    margin: 0 auto;

}

2.HTML代码和JS代码

<body>

    <div id="main">

        <div id="content"></div>

    </div>

<script>

    var mymain=document.getElementById("main");

    var mycontent=document.getElementById("content");

    mymain.addEventListener("click",function () {

        console.log("mymain")

        // 当第三个参数为 false 时，从里往外输出，所以先输出mycontent，在输出mymain

        // 当第三个参数为 true 时，从外往里输出，所以先输出mymain，在输出mycontent

    },false);

    mycontent.addEventListener("click",function () {

        console.log("mycontent")

    },false);

</script>

</body>

绑定案例

行为样式相分离的方式绑定事件onclick

<input id="i1" type="submit" value="提交" />

<script>

    // 获取i1标签 赋值给myinput对象

    var myinput=document.getElementById("i1");

    // 给myinput对象 绑定一个 onclick 事件

    myinput.onclick=function () {

        console.log("分离事件")

    }

</script>

行为样式相分离-实现鼠标滑过表格颜色变动

111	111	111
111	111	111
111	111	111

<table border="1" width="300px">

    <tr>

        <td>111</td>

        <td>111</td>

        <td>111</td>

    </tr>

    <tr>

        <td>111</td>

        <td>111</td>

        <td>111</td>

    </tr>

    <tr>

        <td>111</td>

        <td>111</td>

        <td>111</td>

    </tr>

</table>

<script>

    var myTrs=document.getElementsByTagName("tr");

    for(var i=0;i<myTrs.length;i++){

        myTrs[i].onmouseover=function () {

            // 谁调用这个函数，这个this就指向谁

            this.style.backgroundColor="red";

        };

        myTrs[i].onmouseout=function () {

            // 谁调用这个函数，这个this就指向谁

            this.style.backgroundColor="";

        }

    }

</script>

1.搜索框获取光标后取消内部提示内容

代码实现

<div style="width: 600px;margin: 0 auto;">

    <input id="i1" onclick="Focus();" onblur="Blur();" type="text" value="请输入关键字">

    <!--新版本浏览器可以直接使用placeholder实现-->

    <input type="text" placeholder="请输入关键字">

</div>

<script>

    //获取光标时

    function Focus() {

        var tag = document.getElementById("i1");

        var val =tag.value;

        if (val == "请输入关键字"){

            tag.value="";

        }

    }

    //丢失光标时

    function Blur() {

        var tag = document.getElementById("i1");

        var val =tag.value;

        if(val.length==0){

            tag.value="请输入关键字";

        }

        console.log(2);

    }

</script>

案例

通过对classList的remove和add实现模态对话框

1.CSS部分

<head>

<style>

    /*遮罩层*/

    .mask{

        position: fixed;

        left: 0;

        top: 0;

        right: 0;

        bottom: 0;

        background-color: black;

        opacity: 0.5;

        z-index: 8;

    }

    /*弹出框*/

    .bounces{

        width: 500px;

        height: 350px;

        background-color: white;

        position: fixed;

        left: 50%;

        top: 50%;

        margin-left: -250px;

        margin-top: -200px;

        z-index: 9;

    }

    /*隐藏*/

    .hide{

        display: none;

    }

</style>

</head>

2.HTML部分和JS部分

<body style="margin: 0;">

<div>

    <input type="button" value="添加" onclick="ShowModel()">

</div>

<!--遮罩层开始-->

<div class="mask hide" id="i1"></div>

<!--遮罩层结束-->

<!--弹出框开始-->

<div class="bounces hide" id="i2">

    <p><input type="text"/></p>

    <p><input type="text"/></p>

    <p>

        <input type="button" value="确认">

        <!--onclick 为绑定鼠标点击方法-->

        <input type="button" value="取消" onclick="HideModel()">

    </p>

</div>

<!--弹出框结束-->

<script>

    function ShowModel() {

        document.getElementById("i1").classList.remove("hide")

        document.getElementById("i2").classList.remove("hide")

    }

    function HideModel() {

        document.getElementById("i1").classList.add("hide")

        document.getElementById("i2").classList.add("hide")

    }

</script>

</body>

通过getElementById实现实时显示当前时间

<body>

    <input type="text" id = "timer">

    <button onclick="begin()">开始</button>

    <button onclick="stop()">停止</button>

    <script>

        var ID;

        function begin() {

            if (ID == undefined) {

                foo();

                ID = setInterval(foo, 1000)

            }

        }

        function foo() {

            var date = new Date();

            var ele = document.getElementById("timer");

            ele.value=date.toLocaleString()

        }

        function stop() {

            clearInterval(ID);

            ID=undefined

        }

    </script>

</body>

通过元素的间接选择,实现反选、全选、取消的操作

1.HTML部分内容和JS内容

<body style="margin: 0;">

<div>

    <input type="button" value="全选" onclick="ChooseAll()">

    <input type="button" value="取消" onclick="CancleAll()">

    <input type="button" value="反选" onclick="ReverseAll()">

    <table border="1">

        <thead>

            <tr>

                <th>选择</th>

                <th>主机名</th>

                <th>端口</th>

            </tr>

        </thead>

        <tbody id="tb1">

            <tr>

                <td>

                    <input type="checkbox">

                </td>

                <td>1.1.1.1</td>

                <td>80</td>

            </tr>

            <tr>

                <td><input type="checkbox"></td>

                <td>2.2.2.2</td>

                <td>81</td>

            </tr>

            <tr>

                <td><input type="checkbox"></td>

                <td>3.3.3.3</td>

                <td>82</td>

            </tr>

        </tbody>

    </table>

</div>

<script>

    // 全选函数

    function ChooseAll() {

        var tbody = document.getElementById("tb1");

        // tr_list获取所有的tr标签

        var tr_list = tbody.children;

        for(var i=0;i<tr_list.length;i++){

            // current_tr获取当前的tr标签

            var current_tr = tr_list[i];

            // checkbox获取当前tr标签的所有子标签td,取0下标的td,0下标td的所有input标签,第一个值

            var checkbox = current_tr.children[0].children[0];

            // 将所有的checkbox标签设置为true 全选

            checkbox.checked = true;

        }

    }

    // 取消函数

    function CancleAll() {

        var tbody = document.getElementById("tb1");

        var tr_list = tbody.children;

        for(var i=0;i<tr_list.length;i++){

            var current_tr = tr_list[i];

            var checkbox = current_tr.children[0].children[0];

            // 将所有的checkbox标签设置为false 取消

            checkbox.checked = false;

        }

    }

    // 反选函数

    function ReverseAll() {

        var tbody = document.getElementById("tb1");

        var tr_list = tbody.children;

        for(var i=0;i<tr_list.length;i++){

            var current_tr = tr_list[i];

            var checkbox = current_tr.children[0].children[0];

            // 判断当前checkbox.checked 为true将值改为false;否则改为true

            if(checkbox.checked){

                checkbox.checked = false;

            }else {

                checkbox.checked = true;

            }

        }

    }

</script>

</body>

定义左侧菜单,点击展开,关闭其他

1.CSS部分内容

<style>

    .hide{

        display: none;

    }

    .item .header{

        height: 35px;

        background-color: #000795;

        color: white;

        line-height: 35px;

    }

</style>

2.HTML部分内容和JS内容

<body>

    <div style="height: 48px"></div>

    <div style="width: 300px">

        <div class="item">

            <!--this 就表示当前点击的标签-->

            <div  class="header" onclick="ChangeMenu(this);">菜单1</div>

            <div class="content">

                <div>内容1</div>

                <div>内容1</div>

                <div>内容1</div>

            </div>

        </div>

        <div class="item">

            <div  class="header" onclick="ChangeMenu(this);">菜单2</div>

            <div class="content hide">

                <div>内容2</div>

                <div>内容2</div>

                <div>内容2</div>

            </div>

        </div>

        <div class="item">

            <div class="header" onclick="ChangeMenu(this);">菜单3</div>

            <div class="content hide">

                <div>内容3</div>

                <div>内容3</div>

                <div>内容3</div>

            </div>

        </div>

        <div class="item">

            <div class="header" onclick="ChangeMenu(this);">菜单4</div>

            <div class="content hide">

                <div>内容4</div>

                <div>内容4</div>

                <div>内容4</div>

            </div>

        </div>

    </div>

    <script>

        function ChangeMenu(thi) {

            // 函数接收到该标签 thi

            var current_header = thi;

            // item_list 为所有的孙节点

            var item_list = current_header.parentElement.parentElement.children;

            for (var i = 0;i<item_list.length;i++){

                var current_item = item_list[i];

                current_item.children[1].classList.add("hide");

            }

            current_header.nextElementSibling.classList.remove("hide");

        }

    </script>

</body>

登陆抽屉网并点赞

思路：写一个循环循环linksId值，就可以批量点赞了

### 1、首先登陆任何页面，获取cookie

import requests

i1 = requests.get(url="http://dig.chouti.com/help/service")

### 2、用户登陆，携带上一次的cookie，后台对cookie中的 gpsd 进行授权

i2 = requests.post(

    url="http://dig.chouti.com/login",

    data={

        'phone': "86手机号",

        'password': "密码",

        'oneMonth': ""

    },

    cookies=i1.cookies.get_dict()

)

print(i2)

### 3、点赞（只需要携带已经被授权的gpsd即可）

gpsd = i1.cookies.get_dict()['gpsd']

# print(gpsd)

i3 = requests.post(

    url="http://dig.chouti.com/link/vote?linksId=14713131",

    cookies={'gpsd': gpsd}

)

print(i3.text)