Dom

DOM：

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

一. Dom中查找元素

1.直接选择器

document.getElementsByName 根据name属性获取标签集合

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

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

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

2.间接选择器

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点
 
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

二. Dom中操作元素

1. innerText：

获取标签中的文本内容;tag.innerText

对标签内部文本进行更新： tag.innerText = “”

2. className（样式操作）

tag.className = :直接整体做操作

tag.classList.add('样式名') ：添加指定样式

tag.classList.remove('样式名') ：删除指定样式

3.innerHTML

获取标签中的全部内容，包括标签

4.value

input系列：获取当前标签中的值；

select 标签：获取选中的value值；

textarea(多行文本）：value获取当前标签中的值。

5.搜索框的示例：

旧版：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style=" 600px;margin: 0 auto ">
        <input id="i1" onfocus="Focus();" onblur="Blur();" on type="text" value="请输入关键字"/>
        <!--onfocus:当鼠标放上去的时候自动检索光标，  onblur:当光标移走的时候重新显示原来的值-->
    </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 ==""){
                tag.value = "请输入关键字";
            }
        }
    </script>
</body>
</html>

View Code

新版：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style=" 600px;margin: 0 auto ">
        <input type="text" placeholder="请输入关键字"/>
    </div>
</body>
</html>

View Code

模态示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .c1{
            position: fixed;
            left: 0;
            top:0;
            right:0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
        .c2{
            width: 500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top:50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        }
    </style>
</head>
<body style="margin: 0;">
<!--body默认有边距的，通过设置margin:0  去掉边距-->
    <div>
        <input type="button" value="添加" onclick="ShowModel()" />
        <table>
            <thead>
                <tr>
                    <th>主机名</th>
                    <th>端口</th>
                </tr>
            </thead>

            <tbody>
                 <tr>
                     <td>1.1.1.1</td>
                     <td>190</td>
                 </tr>
                 <tr>
                     <td>1.1.1.2</td>
                     <td>192</td>
                 </tr>
                 <tr>
                     <td>1.1.1.3</td>
                     <td>193</td>
                 </tr>
            </tbody>
        </table>

    </div>

    <!--遮罩层开始-->
    <div id = "i1" class="c1 hide"></div>
    <!--遮罩层结束-->

    <!--弹出框开始-->
    <div id = "i2" class="c2 hide">
        <p><input type="text" /></p>
        <p><input type="text" /></p>
        <p>
            <input type="button" value="取消" onclick="HideModel()" />
            <input type="button" value="确定" />
        </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>
</html>

效果：

3. checkbox

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .c1{
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
        .c2{
            width: 500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        }
    </style>
</head>
<body style="margin: 0;">

    <div>
        <input type="button" value="添加" onclick="ShowModel();" />
        <input type="button" value="全选" onclick="ChooseAll();" />
        <input type="button" value="取消" onclick="CancelAll();" />
        <input type="button" value="反选" onclick="ReverseAll();" />

        <table>
            <thead>
                <tr>
                    <th>选择</th>
                    <th>主机名</th>
                    <th>端口</th>
                </tr>
            </thead>
            <tbody id="tb">

                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>1.1.1.1</td>
                    <td>190</td>
                </tr>
                <tr>
                    <td><input type="checkbox" id="test" /></td>
                    <td>1.1.1.2</td>
                    <td>192</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.3</td>
                    <td>193</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- 遮罩层开始 -->
    <div id="i1" class="c1 hide"></div>
    <!-- 遮罩层结束 -->

    <!-- 弹出框开始 -->
    <div id="i2" class="c2 hide">
        <p><input type="text" /></p>
        <p><input type="text" /></p>
        <p>
            <input type="button" value="取消" onclick="HideModel();"/>
            <input type="button" value="确定"/>

        </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');
        }

        function ChooseAll(){
            var tbody = document.getElementById('tb');
            // 获取所有的tr
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                // 循环所有的tr，current_tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = true;

            }
        }

        function CancelAll(){
            var tbody = document.getElementById('tb');
            // 获取所有的tr
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                // 循环所有的tr，current_tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = false;

            }
        }

        function ReverseAll(){
            var tbody = document.getElementById('tb');
            // 获取所有的tr
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                // 循环所有的tr，current_tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}}

    </script>
</body>
</html>

View Code

效果：

注：JS语句必须加分号；

6.属性及创建标签

1].对标签中的属性进行操作

1）.attributes

2）. getattribute

3）. removeattribute

2].创建标签，并添加到HTML中

两种方式：1）字符串形式（代码中方式1）

2）对象的方式（代码中方式2）

document.createElement('div') :创建div标签

document.createElement('input') :创建input标签

document.createElement(p') :创建p标签

<!--类似于点赞的，点一次，访问量加1-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--<input type="button" onclick="AddEle1();" value="+" />-->
    <input type="button" onclick="AddEle2();" value="+" />
    <div id="i1">
        <p><input type="text" /></p>
        <!--p标签分段落-->

        <!--<hr />-->
        <!--分割线-->

    </div>
    <script>
        // function AddEle1() {
        //     //创建一个标签；方式1
        //     //将标签添加到i1里面；
        //     var tag = "<p><input type='text' /></p>";
        //     document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag)
        // }

        function AddEle2() {
            //创建一个标签；方式2
            //将标签添加到i1里面；
            var tag = document.createElement('input');
            tag.setAttribute('type', 'text');
            tag.style.fontSize="16px";
            tag.color="red";
            document.getElementById('i1').appendChild(tag)

        }
    </script>
</body>
</html>

View Code

document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag)
第一个参数只能是beforeBegin;  afterBigin  ; beforeEnd  ; afterEnd  控制标签添加的位置

7 . 提交表单

通过DOM，任何标签（不仅仅是form）都可以提交表单；

<!--提交表单,方式2:通过a标签-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="f1" action="http://www.baidu.com">
        <input type="text" />
        <a style="border: black solid 1px" onclick="submitForm();">提交吧</a>
    </form>

    <script>
        function submitForm() {
            document.getElementById('f1').submit()
        }
    </script>

    </div>
</body>
</html>

8. 其他

console.log                 输出框
alert                       弹出框
confirm                     确认框
  
// URL和刷新
location.href               获取URL
location.href = "url"       重定向
location.reload()           重新加载
  
// 定时器
setInterval                 多次定时器
clearInterval               清除多次定时器
setTimeout                  单次定时器
clearTimeout                清除单次定时器

单次定时器之QQ邮箱中删除邮件后提示信息：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="status"></div>
    <input type="button" value="删除" onclick="deleteEle();" />
    <script>
        function deleteEle() {
            document.getElementById('status').innerText = ('已删除');
             setTimeout(function () {
                // 设置定时
                document.getElementById('status').innerText = "";
            },5000);
            // 5秒后“已删除”提示消失
            
        }
    </script>
</body>
</html>

三. 事件

绑定事件有两种方式：

1）直接标签绑定：

2）先获取dom对象，然后进行绑定：

注：对于this，指向当前触发事件的标签，（this不要瞎用，用第二种）

第一种绑定方式：<input type="button" onclick='clickOn(this)'>

function clickOn(self){

//self 当前点击的标签

}

第二种绑定方式：<input id="i1" type="button" >

document.getElementByID（‘i1’).onclick = function(){

//this. 当前点击的标签

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="test">
        zhangsan
    </div>
    <script>
        var mydiv = document.getElementById('test');
        console.log(mydiv);
        mydiv.onclick = function () {
            console.log('lisi');
        }
        mydiv.onclick = function () {
            console.log('孜彧');
        }
        // 当程序执行到这里的时候，第一个匿名函数的console.log()的内容会被第二个覆盖,怎么做才会同时绑定两个事件呢？？
        // 这就要用到我们的第三种事件绑定方式
    </script>
</body>
</html>

View Code

第三种绑定方式： addEventListener（）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="test">
        zhangsan
    </div>
    <script>
        var mydiv = document.getElementById('test');
        mydiv.addEventListener("click",function () {console.log("孜彧")},false);
        mydiv.addEventListener("click",function () {console.log("呵呵")},false);
        // 三个参数：①事件   ②匿名函数  ③false/true
        // false:事件之冒泡模型  true:事件之捕捉模型
    </script>
</body>
</html>

事件之捕捉与冒泡模型：（高级写法，面试常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #main{
        background-color: red;
        width: 400px;
        height: 300px;
    }
     #content{
        background-color: pink;
        width: 200px;
        height: 150px;
    }
</style>
<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("main")},false);
        mycontent.addEventListener("click",function () {console.log("content")},false);
        // 首先打印的是main  ，然后打印的是content
        // false:事件之冒泡模型

        mymain.addEventListener("click",function () {console.log("main")},true);
        mycontent.addEventListener("click",function () {console.log("content")},true);
        // 首先打印的是content  ，然后打印的是main
        //  true:事件之捕捉模型
        // 面试题
    </script>
</body>
</html>

View Code

常用事件：

1.onclick

2.onblur

3.onfocus

4.onmouseover

5.onmouseout

行为（js）样式(CSS ) 结构(html)相分离的示例（代码框架略显高级）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1px" width="300px">
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>3</td>
            <td>3</td>
        </tr>
    </table>
    <script>
        var myTrs = document.getElementsByTagName('tr');
        var len = myTrs.length;
        for(var i=0;i<len;i++){
            myTrs[i].onmouseover = function () {
                this.style.backgroundColor = "red";
                // myTrs[i].style.backgroundColor = "red"; 用 myTrs[i]是行不通的，为什么？？？ 作用域不同
            }

             myTrs[i].onmouseout = function () {
                this.style.backgroundColor = "";
            }
        }
    </script>
</body>
</html>

this：当前谁触发事件，就指向那个标签；

table会自动加thead，tbody,用children查找的时候要注意，直接找tr找不到；

四. js词法分析（*********重点*********）

1.浏览器在执行代码之前会进行分析，函数在形成调用的那一瞬间会形成一个活动对象：active object --->AO

依次分析：形式参数

局部变量

函数申明表达式

词法分析完，从活动对象中去执行（有优先级）；

<!--js词法分析-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        function t1(age) {    
            console.log(age);  //
            var age = 27;
            console.log(age); //
            function age() {}
            console.log(age);
        }
        t1(3);
    </script>
</body>
</html>

运行结果：

虽然不会像上述代码中去定义，但是要明白代码执行机理。

===============================================================================================================================================

学习心得分享：

手册查询：w3school

css完全参考手册 3.0

前端编译器：subline Text（Emmet插件）提高编写效率，也支持python，