Dom,查找标签和操作标签

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.1.1.1	80
	2.2.2.2	81
	3.3.3.3	82

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)