JavaScript HTMlL DOM对象（下）

DOM：document operation model 文档操作模型

每个标签都是一个对象。

一、查找元素

DOM 回顾

直接查找

      var obj = document.getElementById('i1')

          document.getElementById('i1')           根据ID获取一个元素

          document.getElementsByTagName('div')    根据标签名获取标签集合

          document.getElementsByClassName('div')  获取class多个元素(列表)

          document.getElementsByName       

间接查找

          parentNode          // 父节点

          childNodes          // 所有子节点

          firstChild          // 第一个子节点

          lastChild           // 最后一个子节点

          nextSibling         // 下一个兄弟节点

          previousSibling     // 上一个兄弟节点

          parentElement           // 父节点标签元素

          children                // 所有子标签

          firstElementChild       // 第一个子标签元素

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

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

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

文件内容操作：

          innerText    仅文本

          innerHTML    全内容

          obj1.value

               input    value获取当前标签中的值

               select   获取选中的value值

                     .selectedIndex

               textarea value获取当前标签中的值

搜索框的示例

<body>

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

        <!--不使用onclick监听，使用onfocus监听焦点，tab键操作也能监听-->

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

        <!--功能下面这句已经封装好了，不过老版本浏览器的不支持。-->

        <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 = "请输入关键字";

            }

        }

    </script>

</body>

二、元素操作

1、样式操作

样式操作（增删改选中对象的类名）：

className   // 样式，返回字符串

classList   // 样式，返回数组

classList.add()     // 添加样式

classList.remove()  // 移出样式

更细力度设置样式

obj.style.fontSize = '16px';

obj.style.backgroundColor = 'red';

obj.style.color = "red"

2、属性操作

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

removeAttribute(key)      // 移除标签属性

attributes                // 获取所有标签属性

getAttribute(key)         // 获取指定标签属性

　　创建标签，并添加到HTML中：

a. 字符串形式
b. 对象的方式
document.createElement(‘div’)

<body>

    <input type="button" onclick="AddEle1();" value="+" />

    <input type="button" onclick="AddEle2();" value="+" />

    <div id="i1">

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

    </div>

    <script>

        // 第一种添加方式：字符串形式

        function AddEle1(){

            // 创建一个标签

            // 将标签添加到i1里面

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

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

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

        }

        // 第二种添加方式：对象的方式

        function AddEle2(){

            // 创建一个标签

            // 将标签添加到i1里面

            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('i1').appendChild(p);

        }

    </script>

</body>

　　上面实现了两种创建标签，并将其添加到HTML中实例。

3、提交表单

默认情况下：只有多行文本textarea、下拉框select 和input 标签可以数据提交到后台。

通过DOM任何标签都可提交表单。

<body>

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

        <input type="text" />

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

        <a onclick="submitForm();">提交2</a>

    </form>

    <script>

        function submitForm(){

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

        }

    </script>

</body>

4、其他操作

console.log                // 输出框

alert                      // 弹出框

confirm                    // 确认框

// URL和刷新

location.href              // 获取当前URL

location.href = "url"      // 设置URL 重定向

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

// 定时器

setInterval                // 多次定时器

clearInterval              // 清除多次定时器

setTimeout                 // 单次定时器

clearTimeout               // 清除单次定时器

浏览器console日志中，看运行输出信息

<body>

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

        <input type="text" />

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

        <a onclick="submitForm();">提交2</a>

    </form>

    <script>

        function submitForm(){

            //document.getElementById('f1').submit()

            //alert(123);

            var v = confirm('真的要提交吗？');

            console.log(v);

            // v 鼠标点击确定、取消的返回值。

　　　　　　//注意：此处未写上document.getElementById('f1').submit()方法，所以不会真正跳转，故可以在console中看到log

        }

        // 定时器，一直执行

        var obj = setInterval(function(){

            console.log(1);

            clearInterval(obj);  // 清除定时器，故只执行一次就结束了

        }, 1000);

        // 定时器，只执行一次

        setTimeout(function () {

            console.log('timeout');

        },15000);

    </script>

</body>

删除显示信息，显示3秒后自动消失

<body>

    <div id="status"></div>

    <input type="button" value="删除" onclick="DeleteEle();" />

    <script>

        function  DeleteEle(){

            document.getElementById('status').innerText = "已删除";

            setTimeout(function () {

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

            }, 3000);

        }

    </script>

</body>

三、事件

onclick，onblur，onfocus，onmouseover，onmouseout

单击，焦点移除，焦点聚焦，鼠标移到，鼠标移除

1、行为样式结构相分离的页面

实现表格，鼠标移上去后，变色

<body>

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

    <tr onmouseover="t1(0);" onmouseout="t2(0);"><td>1</td><td>2</td><td>2</td></tr>

    <tr onmouseover="t1(1);" onmouseout="t2(1);"><td>1</td><td>2</td><td>2</td></tr>

    <tr onmouseover="t1(2);" onmouseout="t2(2);"><td>1</td><td>2</td><td>2</td></tr>

</table>

    <script>

        function t1(n){

            var myTrs = document.getElementsByTagName("tr")[n];

//            console.log(myTrs);

            myTrs.style.backgroundColor = "red";

        }

        function t2(n){

            var myTrs = document.getElementsByTagName("tr")[n];

            myTrs.style.backgroundColor = "";

        }

    </script>

</body>

优化后 —> 行为(js) 样式(css) 结构(html) 相分离

<body>

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

    <tr><td>1</td><td>2</td><td>2</td></tr>

    <tr><td>1</td><td>2</td><td>2</td></tr>

    <tr><td>1</td><td>2</td><td>2</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指向谁

                 this.style.backgroundColor = "red";

            };

            myTrs[i].onmouseout = function(){

                this.style.backgroundColor = "";

            }

        }

    </script>

</body>

2、绑定事件的两种方式

a. 直接标签绑定 onclick=’xxx()’ onfocus
b. 先获取Dom对象，然后进行绑定
- document.getElementById(‘xx’).onclick
- document.getElementById(‘xx’).onfocus

a. 第一种绑定方式：直接标签绑定

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

function ClickOn(ths){

    // ths(形参) 当前点击的标签

}

b. 第二种绑定方式：先获取Dom对象，然后进行绑定

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

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

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

}

注意this这里不要乱用，两种绑定方式不同，this传入的时候也是不同的

c. 第三种绑定方式：同时绑定多个事件

<script>

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

    mydiv.addEventListener('click',function(){console.log('aaa'),false});

    mydiv.addEventListener('click',function(){console.log('bbb'),false});

</script>

鼠标点击，同时执行以上两个，操作。第三个参数：默认就是false，false：冒泡模型；true：捕捉模型

3、作用域示例

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

var len = myTrs.length;

for(var i=0;i<len;i++){

    // i=0,i=1,i=2

    myTrs[i].onmouseover = function(){

        this.style.backgroundColor = "red";

        // myTrs[i].style.backgroundColor = "red";

        // 为什么这里必须用this，不能用myTrs[i]？ 因为作用域不同，js是以函数作为作用域的

    };

}

关于css、js，可以搜索“CSS参考手册”、“W3cschool手册”、“JavaScript 中CSS属性对照表”。

Sublime Text 工具使用介绍：

emmet插件

生成html结构

输入感叹号”!”，之后按tab建

快速生成表格，3行3列

table>tr*3>td*3    # 输入后，按tab键

table.test#test>tr*3>td*3 # 按tab，生成class="test" id="test"

table>tr*3>td*3>{fgf}  # 往td里面写内容

table>tr*3>td*3>{fgf$}  # fgf1、fgf1、fgf3

其他快捷操作

html:5

html:4s

　　可以搜索其他emmet插件使用方法