DOM 讲解

DOM,全称documention,文档意思，就是把整个html文档当成一个对象来操作，里面有很多方法，如getElementByid(),getElementByid().innerText();.....

当然对象也可以嵌套。

    查找
        直接查找
            var obj = document.getElementById('i1')
        间接查找
            文件内容操作：
                innerText    仅文本
                innerHTML    全内容，包括标签
                value
                    input    value获取当前标签中的值
                    select   获取选中的value值（selectedIndex）
                    textarea value获取当前标签中的值
                
                搜索框的示例

输入框获取焦点，默认值消失，如果没有输入值，焦点离开，输入框默认值又会回来。

<input type="text" onfocus="Focus();" onblur="Blur();" id="i1" style="color: #dddddd;" value="请输入关键字"/>
<input type="text" placeholder="请输入关键字" />
<!--html5新属性placeholder直接实现，当输入框内有内容，默认值不显示，没内容又显示-->
<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>

CLASS 样式表操作：

　　obj.className;获取当前样式列表，以字符串显示，即class="c1 c2 c3",中的c1 c2 c3内容。

　　obj.classList;获取当前样式列表，以数组显示。

　　obj.className="c3 d4",重新指定样式

　　obj.classList.add('c1');添加样式集

　　obj.classList.remove('c3');删除新式集

以下是小力度修改，添加单个样式。

　　obj.style.fontSize = '16px';
　　obj.style.backgroundColor = 'red';
　　obj.style.color = "red";

注意：在style中样式是以中杠连接的，到Js中换成驼峰式书写，首单词小写，第二个单词首字母大写。

属性操作：

　　obj.attributes;获取对象的所有属性
　　obj.getAttribute('id');获取id属性的值
　　obj.removeAttribute('id');删除id属性

　　obj.setAttribute('id','i1');设置标签属性和值。

标签操作：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <input onclick="Add();" type="submit" value="添加" >
 9 <input onclick="Add2();" type="submit" value="添加2" >
10 <div id="i1">
11     <hr>
12     <p>123</p>
13 </div>
14 <script>
15 
16 
17 //第一种方法，把标签写成字符串加
18 
19     function Add() {
20         var tag = "<p><input type='text' value='test' /></p>";
21         var obj = document.getElementById('i1');
22         //obj.insertAdjacentHTML("beforeEnd",tag);   //在当前标签的所有子标签之后加，加在当前标签的内部
23         //obj.insertAdjacentHTML("afterBegin",tag);   //在当前标签的所有子标签之前加，加在当前标签的内部
24         //obj.insertAdjacentHTML("beforeBegin",tag);   //在当前标签之前加，加在当前标签的兄弟标签层
25         obj.insertAdjacentHTML("afterEnd",tag);   //在当前标签之后加，加在当前标签的兄弟标签层
26     }
27 
28 
29 //第二种方法，把标签写成对象串加
30 
31         function Add2() {
32         var tag = document.createElement('input');
33         var p = document.createElement('p');
34         tag.setAttribute('value',"test2");
35         p.appendChild(tag);
36         var obj = document.getElementById('i1');
37         obj.insertAdjacentElement("afterBegin",p);
38 //            obj.appendChild(tag); //在当前标签内追加子标签
39 //            obj.insertBefore(tag,obj.children[1]) //在当前标签内的指定孩子后加标签
40     }
41 </script>
42 </body>
43 </html>

View Code

利用DOM变相实现各类标签都能提交表单：

 1 <form id="f1" action="https://baidu.com" method="get">
 2     <input type="text" >
 3     <input type="submit" value="提交" >
 4     <a onclick="Submit();">点我</a>
 5 </form>
 6 <script>
 7     function Submit() {
 8         document.getElementById('f1').submit();
 9     }
10 </script>

View Code