05、js-BOM、DOM对象

时间：2020-09-17 16:53:00 阅读：41 评论：0 收藏：0 [点我收藏+]

标签：white 焦点 inter nodename width curd fonts console 模型

一、BOM对象

// BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作
// 使用 BOM可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作

1、windows对象

"""
alert()            显示带有一段消息和一个确认按钮的警告框。
confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           显示可提示用户输入的对话框。

open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。
setInterval()      按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。
"""

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    <!--alert是全局的，所以之前没加window窗口也可以-->
    //window对象的方法
    window.alert("hello");

    //弹出窗口，alert只有确定，confirm有确认和取消两个事件，需要把具体点击哪个事件
    //返回给JS 所以 confirm是有返回值的。
    var ret=window.confirm("hello world");
    console.log(ret);

    //比confirm多了输入文本
    var ret2=window.prompt("hello world");
    console.log(ret2);

    open("http://www.baidu.com");


    setInterval(f,1000);
    function f() {
        console.log("hello");
    }

</script>

</body>
</html>

alert\confirm\prompt

open(‘‘,‘‘,‘width=200,resizable=no,height=100‘); // 新打开一个宽为200 高为100的窗口
        //close方法  将当前文档窗口关闭.
            //close();

open\close

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #id1{
            width: 200px;
            height: 50px;
        }
    </style>

</head>
<body>

<!--绑定一个事件，-->
<input type="text" id="id1" onclick="begin()">
<button onclick="end()">停止</button>

<script>
    <!--显示时间-->
    function showTime() {
        var current_time=new Date().toLocaleString();
        // alert(current_time);
        //找到input标签
        var ele=document.getElementById("id1");
        //利用input标签的value属性把时间放到input标签里
        ele.value=current_time;
    }
    var clock1;
    //想要把时间放到输入框里
    function begin() {
        // showTime();
        // //创建了一个定时器对象
        // clock1=setInterval(showTime,1000);
    //    这样点击多次输入框相当于触发多次定时器，点击停止不知道关闭哪个clock1
    //    如果第一次clock1等于undefined，创建一个定时器，再点击输入框时，clock1
    //    不是undefined了，就什么都不执行，关闭时就是关闭的这个clock1，就好了
        console.log(clock1);
        if(clock1==undefined)
        {
            showTime();
            //创建了一个定时器对象
            clock1=setInterval(showTime,1000);
        }
    }

    function end() {
        clearInterval(clock1);
        clock1=undefined;
    }
</script>

</body>
</html>

setInterval

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<div onclick="f()">click</div>-->


<script>
    
    function f() {
        console.log("hello")
    }
    //1s后只执行一次f()，结束。
    //1s后清空这个显示
    var c=setTimeout(f,1000);
    //1s 后才显示hello，在1s时就清空了，所以不显示
    //实际不会这么用，触发什么事件时才会把  c  取消
    clearTimeout(c);
</script>

</body>
</html>

setTimeout

2、location对象

"""
location.href;  获取当前页面的地址
location.href = ‘http://www.baidu.com‘; 跳转到这个网址上
location.reload();  刷新当前页面

location.assign(URL) 类似于链接 有后退
location.replace(newURL) 替换掉 百度的页面覆盖掉现在的页面，两个在一层，没有后退
"""

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    <!--类似于连接，从这个页面连接到另一个页面 可以后退-->
    location.assign("http://www.baidu.com");

    //替换掉 百度的页面覆盖掉现在的页面，两个在一层，没有后退
    location.replace("http://www.baidu.com");

    //刷新
    location.reload();
</script>

</body>
</html>

assign\replace

3、history对象

"""
就是窗口window对象下的一个子对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
"""

# back()    加载 history 列表中的前一个 URL。
# forward()    加载 history 列表中的下一个 URL。
# go()    加载 history 列表中的某个具体页面。

//js_history1.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<a href="js_history2.html">click</a>

<button onclick="history.forward()"> >>> </button>

</body>
</html>

forword

//history2.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--前进和后退-->
<button onclick="history.back()">back</button>

</body>
</html>

back

二、DOM对象

"""
DOM定义了访问HTML和XML文档的标准。

DOM标准被分为3个不同的部分：
核心DOM-针对任何结构化文档的标准模型
HTML DOM-针对HTML文档的标准模型
XML DOM-针对XML文档的标准模型

什么是HTML DOM？
HTML DOM定义了所有HTML元素的对象和属性，以及访问他们的方法。
"""

1、对html文档操作概况

"""
整个HTML文档是一个文档节点（document对象）
每个HTML元素是元素节点（element对象） <div></div>
HTML元素内的文本是文本节点（text对象）
每个HTML属性是属性节点（attribute对象）
注释是注释节点（comment对象）

getElementByld()
getElementsByTagName()  标签名字
getElementsByClassName()
getElementsByName()      name属性


节点属性
attributes 节点（元素）的属性节点
nodeType 节点类型
nodeValue 节点值
nodeName 节点名称
innerHTML 节点（元素）的文本值


parentElement 父节点标签元素
children  所有子标签
firstElementChild  第一个子标签元素
lastElementChild  最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素

导航属性
parentNode 节点（元素）的父节点（推荐）
firstChild 节点下第一个子元素
lastChild 节点下最后一个子元素
childNodes 节点（元素）的子节点
"""

2、创建标签

var dEle = document.createElement(‘a‘);

3、查找标签

直接查找选择器

3.1、元素选择器

var h = document.getElementsByTagName(‘h1‘);
    //结果是个数组
        //HTMLCollection [h1]
//索引取值获取标签对象
var h = document.getElementsByTagName(‘h1‘)[0];

3.2、类值选择器

var s = document.getElementsByClassName(‘c1‘);
    //结果也是数组：HTMLCollection(2) 
var s = document.getElementsByClassName(‘c1‘)[1];

3.3、id选择器

var a = document.getElementById(‘xx‘);

间接查找选择器

var div1 = document.getElementsByClassName(‘c1‘)[0]; 
div1.nextElementSibling.style.color = ‘red‘;  //找下一个兄弟标签,并改了色
div1.previousElementSibling;  //找上一个兄弟
div1.firstElementChild;  //找第一个儿子
div1.lastElementChild;  //找最后一个儿子
div1.children;  //找所有儿子,是一个数组
div1.parentElement; //找到自己的父级标签

4、文本操作

innertest

//获取文本内容(只获取文本内容，不带标签)
var h = document.getElementsByTagName(‘h1‘)[0];
    h.innerText;

//设置文本内容
    h.innerText = ‘xxx‘
    h.innerText = ‘<a href="">百度</a>‘  //不能生成标签效果

innerHTML

// 获取内容（连带着标签都获取）
var h = document.getElementsByTagName(‘h1‘)[0];
    h.innerHTML
// 设置文本
    h.innerHTML = ‘<a href="">百度</a>‘;  // 能够生成标签效果

5、值操作

// 标签对象.value;

6、类值操作

var d = document.getElementById(‘d1‘);
d.classList; 查看类值
d.classList.add(‘ppp‘); 添加类值
d.classList.remove(‘ppp‘); 删除类值
d.classList.toggle(‘pppp‘); 切换 有就删除，没有就添加

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


用户名：<input type="text" id="username" onblur="f1(this);">
     <span id="error" style="color:Red;font-size: 12px;"></span>

<script>    
    function f1(ths) {
        // console.log(ths);
        var username = ths.value;
        // console.log(ths.value);
        if (username.length < 5) {

            var spa = document.getElementById(‘error‘);
            spa.innerText = ‘鑫哥短了‘;
        }
    }
</script>
</body>


</html>

示例汇总:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="div1">
    <p class="p1" name="littleP">hello p</p>
    <div class="div2">hello div
        <div>div3</div>
        <a href="">click</a>
    </div>
    <span>div 下的 span</span>
</div>

<span>外部wwwwwww</span>
<span>外部eeeeeee</span>
<div>外部hhhhhhhhh</div>

<script>
    var ele = document.getElementsByClassName("p1")[0];
    console.log(ele);


    //     P
    //     1
    //     null
    //     hello p
    console.log(ele.nodeName);
    console.log(ele.nodeType);
    console.log(ele.nodeValue);
    console.log(ele.innerHTML);


    console.log(ele.attributes);

    //导航属性找到父级
    var p_ele = ele.parentNode;
    //节点属性找到父级的节点名
    console.log(p_ele.nodeName);

    //    同级节点
    //     #text  空文本  p div 放到一行就可以了
    //     var b_ele=ele.nextSibling;
    //     console.log(b_ele)

    // element 找标签对象
    var b_ele = ele.nextElementSibling;
    console.log(b_ele.nodeName);
    console.log(b_ele.innerHTML);

    var ele3 = document.getElementsByClassName("div1")[0];
    console.log(ele3);
    console.log(ele3.children);

    //通过标签p 的 name属性查找同级及下级标签
    var ele4 = document.getElementsByName("littleP")[0];
    var ele5 = ele4.nextElementSibling;
    console.log(ele5.innerHTML);
    console.log(ele5.innerText);

    // var ele6=document.getElementsByTagName("p")[0];
    // console.log(ele6);


    //局部查找
    //找span标签
    //  getElementByld()
    //getElementsByName() 这两个找不到
    var ele6 = document.getElementsByClassName("div1")[0];
    var ele7 = ele6.getElementsByTagName("span");
    console.log(ele7[0].innerHTML);





</script>

</body>
</html>

View Code

6、事件

"""
onclick 当用户点击某个对象时调用的事件句柄
ondblclick 当用户双击某个对象时调用的事件句柄

onfocus  元素获得焦点  输入框本来有value属性值，获取焦点后清空
onblur  元素失去焦点   应用场景：用于表单验证，用户离开某个输入框时，代表已经输入完了，
                                我们可以对它进行验证。
onchange 域的内容被改变  应用场景：通常用于表单元素，当元素内容被改变时触发.(三级联动)
 //关于select标签的


onkeydown 某个键盘按键被按下 应用场景：当用户在最后一个输入框按下回车按键时，表单提交。
onkeypress 某个键盘按键被按下并松开。
onkeyup   某个键盘按键被松开
onload    一张页面或一幅图像完成加载

onmousedown   鼠标按钮被按下
onmousemove   鼠标被移动

onmouseout    鼠标从某元素移开       <div> 标签 200*200 鼠标在离开这个标签触发
onmouseover   鼠标移到某元素之上。

onmouseleave  鼠标从元素离开

onselect      文本被选中     //关于select标签的
onsubmit      确认按钮被点击


event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、
鼠标按钮的状态。事件通常与函数结合使用，函数不会再事件发生前执行！event对象在
事件发生时系统已经创建好了，并且会在事件函数被调用时传给事件函数，我们获得
仅仅需要接收一下即可。
比如onkeydown，我们想知道那个键被按下了，需要问下event对象的属性，这里就是KeyCode
"""

示例：

onfocus、onblur事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            background-color: red;
            height: 200px;
            width: 200px;
        }

        .c2 {
            background-color: blue;
        }

        .c3 {
            background-color: yellow;
        }
    </style>
</head>
<body>
<!--事件绑定：方式2（不常用）-->
用户名：<input type="text" id="username" onblur="f1(this);" onfocus="f2(this);">
<span id="error" style="color:Red;font-size: 12px;"></span>


<div id="d1" class="c1  xx  oo"></div>


</body>


<script>

    function f1(ths) {
        // console.log(ths);
        var username = ths.value;
        // console.log(ths.value);
        if (username.length < 5) {

            var spa = document.getElementById(‘error‘);
            spa.innerText = ‘鑫哥短了‘;
        }
    }

    function f2(ths) {
        ths.nextElementSibling.innerText = ‘‘;
    }

    var d1 = document.getElementById(‘d1‘);
    // 事件绑定：方式1
    d1.onclick = function () {
        //this //就是当前绑定事件的标签对象
        // css样式操作
        // this.style.backgroundColor = ‘blue‘;

        this.classList.toggle(‘c2‘);
        var u = document.getElementById(‘username‘);
        u.classList.toggle(‘c3‘)

    }


</script>

</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--获得焦点 执行f1  失去焦点 执行f2-->
<input type="text" id="search" value="请输入用户名" onfocus="f1()" onblur="f2()">


<script>
    var ele=document.getElementById("search");
    function f1() {
        if(ele.value.trim()=="请输入用户名")
        {
            ele.value="";
        }

    }
    function f2() {
        //如果输入为空 再把内容显示出来
        if(!ele.value.trim())
        {
            ele.value="请输入用户名";
        }
    }
</script>

</body>
</html>

View Code

onchange事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            height: 200px;
            width: 200px;
        }
        .c2{
            background-color: blue;
        }
        .c3{
            background-color: yellow;
        }
    </style>
</head>
<body>


用户名：<input type="text" id="username" onblur="f1(this);" onfocus="f2(this);">
     <span id="error" style="color:Red;font-size: 12px;"></span>


<div id="d1" class="c1  xx  oo"></div>


<select name="" id="s1">
    <option value="1">xx1</option>
    <option value="2">xx2</option>
    <option value="3">xx3</option>
</select>


</body>


<script>

    function f1(ths){
        // console.log(ths);
        var username = ths.value  ;
         // console.log(ths.value);
         if (username.length < 5){

        var spa = document.getElementById(‘error‘);
        spa.innerText = ‘鑫哥短了‘;
}
    }

    function f2(ths){
          ths.nextElementSibling.innerText = ‘‘;
    }

    var d1 = document.getElementById(‘d1‘);
    d1.onclick = function (){
         //this //就是当前绑定事件的标签对象
        // css样式操作
        // this.style.backgroundColor = ‘blue‘;

         this.classList.toggle(‘c2‘);
         var u = document.getElementById(‘username‘);
         u.classList.toggle(‘c3‘)

    }

    var s = document.getElementById(‘s1‘);
    s.onchange = function (){
         d1.classList.toggle(‘c2‘);
    }

</script>



</html>

View Code

7、load事件

先把整个窗口加载完成，再执行函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        // var ele=document.getElementsByClassName("div1");
        // console.log(ele.innerHTML);
    //    没有加载div标签 log的 div 没有打印
    //    方法：用到load

        // 把整个窗口加载完成，再执行这两句话
        window.onload=function () {
            var ele=document.getElementsByClassName("div1")[0];
            console.log(ele.innerHTML);
        };

        // 或者
        // function f() {
        //     var ele=document.getElementsByClassName("div1")[0];
        //     console.log(ele.innerHTML);
        // }

    </script>

</head>
<!--<body onload="f()">-->
<body>

<div class="div1">hello div</div>

</body>
</html>

View Code

8、事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="v1">
    <div class="v2">dddddddd</div>
    <div class="v2">dddddddd</div>
    <div class="v2">dddddddd</div>
    <div class="v2">dddddddd</div>
    <div class="v2">dddddddd</div>
    <!--this 能获取到标签对象-->
    <!--比如有多层嵌套想找到最里层那个就要this，如果想找兄弟标签
    1：可以通过最外层一层一层向里查找，也可以，但是麻烦，如果外面其中一层标签名字变了，就找不到他的兄弟标签了-->
    <p id="p1" onclick="func(this)">ppppppp</p>
</div>

<script>

    // 事件绑定
    // var ele=document.getElementById("p1");
    // ele.onclick=function () {
    //     alert(123);
    // };

    var ele2=document.getElementsByClassName("v2");
    for (var i=0;i<ele2.length;i++)
    {
        ele2[i].onclick=function () {
            alert(5555555);
        };
    }

    function func(that) {
        console.log(that);
        console.log(that.previousElementSibling);
        console.log(that.parentNode);
    }

</script>


</body>
</html>

View Code

9、js-submit

<!-- e.preventDefault() 阻止默认的事件，
提交之后默认跳转到01-js_DOM.html，加上后不再跳转 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--action为空默认返回本界面-->
<form action="01-js_DOM.html" id="form1">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>

<script>
    var ele=document.getElementById("form1");
    //点击提交后，这里先进入绑定的onsubmit事件，判断无误后
    //将username提交到后台， 前端判断失败，第一种返回false

    //e 是一个事件对象
    //拿到触发事件的状态和信息
    ele.onsubmit=function (e) {
        alert(1234);
        // return false;

        // 阻止默认 的事件
        e.preventDefault()
    }
</script>

</body>
</html>

View Code

10、js-事件传播

<!-- e.stopPropagation();避免向外传播 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .outer{
            width: 300px;
            height: 300px;
            background-color: #204982;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: burlywood;
        }
    </style>

</head>
<body>

<div class="outer" onclick="func2()">
    <div class="inner" onclick="func1()"></div>
</div>

<script>
    var ele=document.getElementsByClassName("inner")[0];
    //把inner事件绑定一个点击事件，通过对象e的stopPropagation
    // 避免向外传播
    ele.onclick=function (e) {
        alert("i am inner!");
        e.stopPropagation();
    };

    function func2() {
        alert("i am outer");
    }

</script>

</body>
</html>

View Code

三、DOM对象的增删改查

"""
document element对象 是一个节点
其实就是对标签的一个增删改查
怎么自己创建一个标签加到文本里面
怎么把文本里面的某一个标签删掉
怎么把文本里某一个标签改掉
很多动态的效果都是通过node完成的

node的CURD


增：
    createElement(name) 创建元素
    appendChild();将元素添加

删:
    获得要删除的元素
    获得他的父元素
    使用removeChild()方法删除
改:
    第一种方法:
        使用上面增和删结合完成修改
    第二种方法:
        使用setAttrbute():方法修改属性
            setAttribute() 方法添加指定的属性，并为其赋指定的值。
            如果这个指定的属性已存在，则仅设置/更改值。
        使用innerHTML属性修改元素的内容
查:    
"""

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .div1,.div2,.div3,.div4{
            width:300px;
            height: 150px;
        }
        .div1{
            background-color: green;
        }
        .div2{
            background-color: burlywood;
        }
        .div3{
            background-color: red;
        }
        .div4{
            background-color: aqua;
        }
    </style>

</head>
<body>

<div class="div1">
    <button onclick="add()">add</button>
    hello div1
</div>
<div class="div2">
    <button onclick="del()">del</button>
    hello div2
</div>
<div class="div3">
    <button onclick="change()">change</button>
    <p>hello div3</p>
</div>
<div class="div4">hello div4</div>

<script>
    
    function change() {
        var img=document.createElement("img");//<img src="">
        //DOM语法
        // img.setAttribute("src","kkk.PNG");
        img.src="kkk.PNG";

        var ele=document.getElementsByTagName("p")[0];
        var father=document.getElementsByClassName("div3")[0];

        father.replaceChild(img,ele);
    }
    
    function add() {
        var ele=document.createElement("p");
        ele.innerHTML="<h1>hello p</h1>";

        // ele.innerText="<h1>hello p</h1>";
        ele.style.color="red";
        ele.style.fontSize="10px";
        var father=document.getElementsByClassName("div1")[0];
        father.appendChild(ele);
    }

    function del() {
        var father=document.getElementsByClassName("div1")[0];
        var sons=father.getElementsByTagName("p")[0];
        father.removeChild(sons);
    }

</script>

</body>
</html>

增删改查

四、js-class属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="div1 div2">div</div>

<script>
    var ele=document.getElementsByTagName("div")[0];

    console.log(ele.className);
    console.log(ele.classList[0]);
    console.log(ele.classList[1]);

    ele.classList.add("hide");
    console.log(ele.className);
</script>

</body>
</html>
<!--div1 div2-->
<!--div1-->
<!--div2-->
<!--div1 div2 hide-->

View Code

五、示例

5.1、模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .content{
            height: 1800px;
            background-color: #396bb3;
        }
        .shade{
            /*固定*/
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: gray;
            opacity: 0.5;
        }

        .model{
            width: 200px;
            height: 200px;
            background-color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
        }

        .hide{
            display: none;
        }

    </style>

</head>
<body>

<div class="content">
    <button onclick="show()">show</button>
</div>

<div class="shade hide"></div>

<div class="model hide">
    <button onclick="cancel()">cancel</button>
</div>

<script>

    function show() {
        //一个页面隐藏的不止这两部分，不用hide找
        ele_shade=document.getElementsByClassName("shade")[0];
        ele_model=document.getElementsByClassName("model")[0];

        ele_model.classList.remove("hide");
        ele_shade.classList.remove("hide");
    }

    function cancel() {
        ele_shade=document.getElementsByClassName("shade")[0];
        ele_model=document.getElementsByClassName("model")[0];

        ele_model.classList.add("hide");
        ele_shade.classList.add("hide");
    }

</script>


</body>
</html>

View Code

5.2、正反选

"""
全选：找到所有的input，循环，将checked设置为true

取消：找到所有的input，循环，将checked设置为false

反选：找到所有的input，循环，将true变为false，将false变为true
"""

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button onclick="selectAll()">全选</button>
<button onclick="cancel()">取消</button>
<button onclick="reverse()">反选</button>


<table border="1px">
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>222</td>
        <td>222</td>
        <td>222</td>
        <td>222</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>333</td>
        <td>333</td>
        <td>333</td>
        <td>333</td>
    </tr>
</table>

<script>
    function selectAll() {
        var inputs=document.getElementsByTagName("input");
        for (var i=0;i<inputs.length;i++)
        {
            input = inputs[i];
            input.checked=true;
        }
    }

    function cancel() {
        var inputs=document.getElementsByTagName("input");
        for (var i=0;i<inputs.length;i++)
        {
            input = inputs[i];
            input.checked=false;
        }
    }
    
    function reverse() {
        var inputs=document.getElementsByTagName("input");
        for (var i=0;i<inputs.length;i++)
        {
            input = inputs[i];
            input.checked=!input.checked;
            //如果不为空 为True打勾了
            // if(input.checked)
            // {
            //     input.checked=false
            // }
            // else
            // {
            //     input.checked=true
            // }
        }
    }
</script>

</body>
</html>

View Code

5.3、二级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button onclick="selectAll()">全选</button>
<button onclick="cancel()">取消</button>
<button onclick="reverse()">反选</button>


<table border="1px">
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>222</td>
        <td>222</td>
        <td>222</td>
        <td>222</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>333</td>
        <td>333</td>
        <td>333</td>
        <td>333</td>
    </tr>
</table>

<script>
    function selectAll() {
        var inputs=document.getElementsByTagName("input");
        for (var i=0;i<inputs.length;i++)
        {
            input = inputs[i];
            input.checked=true;
        }
    }

    function cancel() {
        var inputs=document.getElementsByTagName("input");
        for (var i=0;i<inputs.length;i++)
        {
            input = inputs[i];
            input.checked=false;
        }
    }
    
    function reverse() {
        var inputs=document.getElementsByTagName("input");
        for (var i=0;i<inputs.length;i++)
        {
            input = inputs[i];
            input.checked=!input.checked;
            //如果不为空 为True打勾了
            // if(input.checked)
            // {
            //     input.checked=false
            // }
            // else
            // {
            //     input.checked=true
            // }
        }
    }
</script>

</body>
</html>

View Code

05、js-BOM、DOM对象

标签：white 焦点 inter nodename width curd fonts console 模型

原文地址：https://www.cnblogs.com/kongxiangqun/p/13622528.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行