JS-05-CFANZ编程社区

Dom对象

Dom对象: Document Object Model 文档对象模型

W3C组织规定：

当浏览器把一个html文件加载到内存中之后，这个html文件，就是一个Document对象。并且在浏览器加载html文件中的所有标签时，把html文件中的所有标签页加载成不同的标签对象，以及标签中的属性，也加载成属性对象，标签中的文本也加载成文本对象。

浏览器在加载某个标签时，标签的文本数据，被加载成当前标签的一个子标签。当我们把一个html文件加载完成之后，他们就得到这个html文件中的所有标签，属性，文本对象。可以使用js技术结合Document对象，对html文件中的所有标签，进行各种操作。

在浏览器把html文件加载完成之后，标签被称作标签对象（元素节点），标签中的文件称为文本节点（文本对象），标签的属性称为属性节点（属性对象）。

节点信息：

nodeName(节点名称) nodeVale(节点值) nodeType(节点类型)

document对象

Document对象代表整个html文档，可用来访问页面中的所有元素

快速获取html中的页面的标签对象

document.getElementById()	返回指定id对象的引用
document.getElementsByName()	返回指定带有名称的对象集合
document.getElementsTagName()	返回指定带有标签名的对象集合
document.getElementsByClassName()	根据Class属性值获取元素对象们。返回值是一个数组
document.querySelector(id选择器)	根据id选择器，获取元素
document.querySelectorAll(css选择器)	根据css选择器获取元素，返回是一个数组

getElementById()

<script>
        function demo(){
            //方式一，获取元素id
            //var inputid = document.getElementById("inputid");
            
            //方式二，获取元素id
            var inputid = document.querySelector("#inputid");
            
            if(inputid.type == "text"){
                inputid.type ="password";
            }else if(inputid.type == "password"){
                inputid.type ="text";
            }
            
        }
        
    </script>
</head>
<body>
    <input type="text" name="pwd" id="inputid"/>
    <input type="button" onclick="demo()" value="显示/隐藏密码" />
</body>

getElementsByTagName()

<script>
        function demo1(){
            //方式一，getElementsByTagName("img"); 返回的是数组
            // var _img = document.getElementsByTagName("img");
            
            //方式二，querySelectorAll("img") 可以根据css选择器选中
            var _img = document.querySelectorAll("img");
            _img[0].width += 30;
        }
        
        function demo2(){
            var _img = document.getElementsByTagName("img");
            _img[0].width -= 30;
        }
        
    </script>
</head>
<body>
    <img src="img/404.jpg" width="450px"/>
    
    <input type="button" onclick="demo1()" value="放大" />
    <input type="button" onclick="demo2()" value="缩小" />
</body>

getElementsByName()

<script>
        function demo(){
            //方式一， getElementsByName("hobby");
            // var hobbys = document.getElementsByName("hobby");
            
            //方式二，querySelectorAll("input[name='hobby']") css选择器
            var hobbys = document.querySelectorAll("input[name='hobby']")
            
            for (var i = 0; i < hobbys.length; i++) {
                if(hobbys[i].checked == true){
                    alert(hobbys[i].value);
                }
            }
        }
        
    </script>
</head>
<body>
    <input type="checkbox" name="hobby" value="悠悠球"/>悠悠球
    <input type="checkbox" name="hobby" value="乒乓球"/>乒乓球
    <input type="checkbox" name="hobby" value="足足球"/>足足球
    
    <input type="button" value="提交" onclick="demo()" />
    
</body>

getElementsByClassName()

<script>
            function demo(){
                //方式一，getElementsByClassName("hobby"
                // var hobbys = document.getElementsByClassName("hobby");
                
                //方式二,querySelectorAll(".hobby") css选择器
                var hobbys = document.querySelectorAll(".hobby");
                
                for (var i = 0; i < hobbys.length; i++) {
                    if(hobbys[i].checked == true){
                        alert(hobbys[i].value);
                    }
                }
            }
        </script>
    </head>
    <body>
        
        <input type="checkbox" name="hobby" class="hobby" value="悠悠球"/>悠悠球
        <input type="checkbox" name="hobby" class="hobby" value="乒乓球"/>乒乓球
        <input type="checkbox" name="hobby" class="hobby" value="足足球"/>足足球
        
        <input type="button" value="提交" onclick="demo()" />
        
    </body>

操作内容

属性名	描述
element.innerText	获取或者修改元素的纯文本内容
element.innerHTML	获取或者修改元素的html内容
element.outerHTML	获取或者修改包含自身的html内容

代码演示

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <style>
            #myDiv {
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div id="myDiv">
            <h4>注释</h4>
            程序猿最讨厌自己写注释，
            同时也最讨厌别人不写注释
        </div>

        <script>
            //获取id
            let myDiv = document.getElementById('myDiv');
            
            //innerHTML 获取标签中所有内容，包括标签；从对象的起始位置到终止位置的全部内容
            console.info(myDiv.innerHTML);
            console.info(myDiv.innerHTML="拉出去");
            console.info(myDiv.innerHTML+="拉出去");
            
            // innerText 获取标签中纯文本内容，不包括标签；
            console.info(myDiv.innerText);
            console.info(myDiv.innerText="拉出去");
            console.info(myDiv.innerText+="拉出去");
            
            // outerHTML 获取标签本身，修改标签本身 ，添加标签本身的后面
            console.info(myDiv.outerHTML);
            console.info(myDiv.outerHTML="<h1>别人从不写注释，不写文档... </h1>");
            console.info(myDiv.outerHTML +="<h1>别人从不写注释，不写文档... </h1>");
            
        </script>
    </body>
</html>

总结

1. innerText 获取的是纯文本 
   innerHTML获取的是所有html内容 
   
2. innerText 设置到页面中的是纯文本 
   innerHTML设置到页面中的html会展示出外观效果 
   
3. innerHTML不包含自身 
   outerHTML包含自身的html内容

常用的事件

点击事件

事件	描述
onclick	单击事件
ondblclick	双击事件

焦点事件

事件	描述
onblur	失去焦点
onfocus	元素获得焦点

加载事件

事件	描述
onload	页面加载完成后立即发生

鼠标事件

事件	描述
onmousedown	鼠标按钮被按下
onmouseup	鼠标按键被松开
onmousemove	鼠标被移动
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开

键盘事件

事件	描述
onkeydown	某个键盘按键被按下
onkeyup	某个键盘按键被松开
onkeypress	某个键盘按键被按下并松开

改变事件

事件	描述
onchange	域的内容被改变

表单事件

事件	描述
onsubmit	提交按钮被点击

事件案例一

<script>
            
            function demo(){
                //获取用户输入信息
                var name =  document.querySelector("#uid").value;
                //正则
                var regExp = new RegExp("^1[3456789]\\d{9}$");
                //判断是否满足正则
                if(regExp.test(name)){
                    document.getElementById("spanid").innerText = "合法";
                    //提交到后台，后台到db，查询有没有这个手机号，如果有，手机号已存在！！
                }else{
                    document.getElementById("spanid").innerText = "不合法";
                }
            }
            
            function demo2(){
                alert("我是聚焦事件")
            }
            
        </script>
    </head>
    <body>
        
        手机号：<input type="text" name="username" id="uid" onblur="demo()" /><span id="spanid"></span><br>
        密码：<input type="text" name="pwd" id="pid" onfocus="demo2()" /><span id="spanid"></span>
        
    </body>

事件案例二

<script>
            
            window.onload = function(){
                //获取初始的图片
                var _img = document.getElementById("img");
                
                //绑定鼠标悬浮事件
                _img.onmouseover = function(){
                    _img.src = "img/p4.jpg";
                }
                //绑定鼠标离开事件
                _img.onmouseout = function(){
                    _img.src = "img/p3.jpg";
                }
            }
        </script>
    </head>
    <body>
        
        <img src="img/p3.jpg" id="img" width="450px"/>
        
    </body>

事件案例三

<script>
            window.onload = function(){
                 //获取input框
                var _input = document.getElementById("iid");
                
                //绑定键盘按下事件
                _input.onkeydown = function(){
                    _input.style.background = "yellow";
                }
                //绑定键盘松开事件
                _input.onkeyup = function(){
                    _input.style.background = "red";
                }
                
            }
        </script>
    </head>
    <body>
        
        <input type="text" id="iid" />
        
    </body>

注意事项

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
        <script>
            function demo(){
                alert(444)
            }
        </script>
        
    </head>
    <body>
        <input type="button" value="提交" id="buttonid" onclick="demo()" />
        <!-- 
            约定大于配置： 很情况下在写代码，程序员都不约而同都这种写法
            前端人员现在都不这种写法，把所有的样式都用css来控制
            前端人员认为你不应该把事件写在标签中
            前端人员认为你应该把事件写js，事件是js所有拥有
            
            我们应该优先加载页面相关的样式，html结构
            我们应该把页面以外的尽量写在页面下面
         -->
        <center>
            <p>我爱你中国</p>
        </center>
    </body>
    
    <script>
        window.onload = function(){
            var buttonid =  document.getElementById("buttonid");
            buttonid.onclick = function(){
                alert(888)
            }
        }
    </script>
</html>

操作节点

createElement(标签名称)	创建标签
appendChild	为某一个标签，去添加子标签
removeChild	为某一个标签，删除孩子标签
setAttribute	为某一个标签添属性
removeAttribute	删除某一个标签中的属性

appendChild添加子标签

<script>
        function addElement(){
            //创建标签
            var _li = document.createElement("li");//<li></li>
            
            //创建文本
            var textNode = document.createTextNode("一燕");//一燕
            
            //添加文本到li标签中
            _li.appendChild(textNode);//<li>一燕</li>
            
            //添加到父标签中
            document.getElementById("myul").appendChild(_li);
        }
    </script>
</head>
<body>
    
    <ul id="myul">
        <li>jack</li>
        <li>rose</li>
    </ul>
    
    <input type="button" onclick="addElement()"  value="添加子标签" />
</body>

removeChild删除子标签

指定删除

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function demo(){
                //指定删除子标签
                var node = document.getElementById("x1");
                //删除子标签
                node.parentNode.removeChild(node);
            }
        </script>
    </head>
    <body>
        
        <ul id="myul">
            <li>jack</li>
            <li id="x1">rose</li>
            <li>tom</li>
            <li>mary</li>
        </ul>
        
        <input type="button" onclick="demo()" id="inputid" value="删除子标签" />
    </body>
    
</html>

删除全部

<script>
        function demo(){
            //获取id
            var myul = document.getElementById("myul");
            
            //根据父标签获取所有子标签
            var childs  = myul.childNodes;
            
            //删除全部，必从后往前遍历，否则无法删除全部
            for(var i = childs.length -1; i>= 0; i--){
                myul.removeChild(childs[i]);
            }
        }
    </script>
</head>
<body>
    
    <ul id="myul">
        <li>jack</li>
        <li id="x1">rose</li>
        <li>tom</li>
        <li>mary</li>
    </ul>
    
    <input type="button" onclick="demo()" id="inputid" value="删除全部标签" />
</body>

依次删除

<script>
        function demo(){
            var arr  = document.getElementsByTagName("li");
            var dom = arr[0];
            dom.parentNode.removeChild( dom );
        }
    </script>
</head>
<body>
    
    <ul id="myul">
        <li>jack</li>
        <li>rose</li>
        <li>tom</li>
        <li>mary</li>
    </ul>
    
    <input type="button" onclick="demo()"  value="依次删除子标签" />
</body>

setAttribute添加属性

<body>
    <input type="text" name="username"  autocomplete="off">
    <input type="text" name="username">
    <input type="text" name="username">
    <input type="text" name="username">
    <input type="text" name="username">
</body>
<script>
    window.onload = function(){
        //给所有input添加 autocomplete="off"
        var tagName = document.getElementsByTagName("input");
        for (var i = 0; i < tagName.length; i++) {
            tagName[i].setAttribute("autocomplete","off");
        }
    }
</script>

removeAttribute删除属性

<body>
    <input type="text" name="username"  autocomplete="off">
    <input type="text" name="username">
    <input type="text" name="username">
    <input type="text" name="username">
    <input type="text" name="username">
</body>
<script>
    window.onload = function(){
        //给所有input添加 autocomplete="off"
        var tagName = document.getElementsByTagName("input");
        //遍历
        for (var i = 0; i < tagName.length; i++) {
            //移除input框中所有name属性
            tagName[i].removeAttribute("name");
        }
    }
</script>

操作样式

通过js动态修改元素的样式。

语法

设置一个css样式

js对象.style.样式名='样式值'

批量设置css样式-了解

js对象.style.cssText='属性名：属性值;...'

通过class设置样式【重点】

js对象.className='样式名称1; 样式名称2;...'

代码演示

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <style>
            .mpp {
                background-color: orange;
            }
        </style>
    </head>
    <body>

        <p id="p1">1. 设置一个css样式</p>
        <p id="p2">2. 批量设置css样式</p>
        <p id="p3">3. 通过class设置样式</p>

        <script>
            let p1 = document.getElementById("p1");//获取段落标签
            let p2 = document.getElementById("p2");//获取段落标签
            let p3 = document.getElementById("p3");//获取段落标签

            // 1. 设置一个css样式
            // 设置字体大小
            p1.style.fontSize = "20px";
            // 设置背景颜色
            p1.style.backgroundColor = "green";
            // 设置字体颜色
            p1.style.color = "red";

            // 2. 批量设置css样式
            // 缺点：写起来太痛苦，而且还有耦合性
            p2.style.cssText = "border:2px solid red; font-size:40px";

            // 3. 通过class设置样式
            p3.className = "mpp";
        </script>
    </body>
</html>