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插件使用方法

巴特西

JavaScript HTMlL DOM对象（下）

一、查找元素

DOM 回顾

二、元素操作

1、样式操作

2、属性操作

3、提交表单

4、其他操作

三、事件

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

2、绑定事件的两种方式

3、作用域示例

最新文章

热门文章

巴特西

JavaScript HTMlL DOM对象（下）

一、查找元素

DOM 回顾

二、元素操作

1、样式操作

2、属性操作

3、提交表单

4、其他操作

三、事件

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

2、绑定事件的两种方式

3、作用域示例

最新文章

热门文章

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