第一篇 dom

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

一、查找元素

1、直接查找找到的氛围两类第一是元素、第二是元素集合

document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取标签集合
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合

2、间接查找

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点
 
上面node包含所有文本
下面的只包含说哦有标签

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

如果一个标签的nodeType等于1就说明这个标签里面没有文本内容
如果一个标签的nodeType等于3，就说明这个标签里面包含的有文本内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
123
<div class="c1">divvvvv</div>
<div class="c1" id="il">
<p>ppppp</p>
<div name="n1">
<span>span</span>
</div>

<div name="n1">
<a>1</a>
<a>11111</a>
</div>
</div>
<div class="c1">c111111111</div>
</div>
</body>
<script>
var li=document.getElementById("il");
var p1=li.parentNode;
var p2=li.parentElement;

//console.log(li)
//console.log(eles_nodes)

var elees_node= p1.childNodes; //含文本的所有标签
for(var j=0;j<elees_node.length;j++){
var current_node=elees_node[j];
if (current_node.nodeType==1){ //这里判断，输出current_node中不包含文本内容的标签
console.log(elees_node[j])
}
}

</script>

</html>

二、操作

1、内容

1 innerText   文本
2 outerText
3 innerHTML   HTML内容
4 innerHTML   
5 value       获取或者赋值表单标签中的值

下面例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<a href="http://www.baidu.com">百度<span>666</span></a>
    <input id="txt" type="text"/>
    <select id="sel">
        <option value="1">上海</option>
        <option value="2">北京</option>
    </select>
<script>
    var obj=document.getElementsByTagName("a");
//    alert(obj.innerTextr);   //获取文本信息
//    alert(obj.innerHTML);   //获取标签内容

    //获取表单中的值
    var val=document.getElementById("txt").value;
    console.log(val);
    
    //更改值
    obj.innerText='123';
    obj.innerHTML="<p>123</p>"
</script>
</body>
</html>

2、class操作

1 obj.className  以字符串形式获取样式
2 obj.classList     所有的样式放到列表中
3 obj.classList.remove   移除样式
4 obj.classList.add   添加样式

例子：实例模态多画框

点击取消又会回到上图一

代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .hide{
 8             display: none;
 9         }
10         .c1{
11             background-color: papayawhip;
12             position: fixed;
13             top: 0;
14             left: 0;
15             right: 0;
16             bottom: 0;
17             background: rgba(0,0,0,.4);
18             z-index: 2;
19         }
20         .c2{
21             position: fixed;
22              400px;
23             height: 300px;
24             background-color: white;
25             top: 50%;
26             left: 50%;
27             margin-top: -150px;
28             margin-left: -200px;
29             z-index: 3;
30         }
31 
32     </style>
33 </head>
34 <body>
35     <div>
36         <table>
37             <tr>
38                 <td>注册</td>
39                 <td>登录</td>
40                 <td><input type="button" value="点我" onclick="show()"/></td>
41             </tr>
42             <tr>
43                 <td>1</td>
44                 <td>2</td>
45                 <td><input type="button" value="点我"/></td>
46             </tr>
47             <tr>
48                 <td>1</td>
49                 <td>2</td>
50                 <td><input type="button" value="点我"/></td>
51             </tr>
52         </table>
53     </div>
54     <div id="shade" class="c1 hide" ></div>
55     <div id="modal" class="c2 hide">
56         <p>密码：<input type="text"/></p>
57         <p>密码：<input type="password"/></p>
58         <p>
59             <input type="button" value="确定"/>
60             <input type="button" value="取消" onclick="Hide()"/>
61         </p>
62     </div>
63 <script>
64     function show(){
65         document.getElementById("shade").classList.remove("hide");
66         document.getElementById("modal").classList.remove("hide");
67     }
68     function Hide(){
69         document.getElementById("shade").classList.add("hide");
70         document.getElementById("modal").classList.add("hide");
71     }
72 </script>
73 
74 </body>
75 </html>