Python Dom 的介绍和使用day1
DOM:
1.查找元素：
1.直接查找
2.间接查找
1.节点 （所有内容）
2.元素 （被括号括起来的内容）
比如：
<div>
111
<a>1<a>
</div>
节点包括111和<a>1<a>，元素只有<a>1<a>
2.操作元素：
1.ID
1.获得标签内容
1.通过ID查找到标签：t=document.getElementById("")
2.通过标签得到间接寻找相关节点：t.childNodes、t.parentNode
3.获得标签的值： t.value
4.获得标签的文本内容：t.innertext、t.innerHTML(
如：<a>一<span>111</span>二<a>) t.innertext ————> 一111二 t.innerHTML ————> 一<span>111</span>二
2.修改标签内容
t.value = "66"
2.class
1.寻找标签,获得标签列表：t=document.getElementsByTagName("div")
2.切片，对目的对线进行操作：(当然，如果知道ID，就找得更快了)
t[0].classList、t[0].classList.add('c4')、t[0].classList.remove()
3.样式
同理：也可以对标签的其他样式进行修改：
如t.style.color="red"，如果带-：如background-color就变成t.style.backgroundColor
4.属性(<div id='i1' name='haha'>)
t.getAttribute(name) 获得属性
t.setAttribute("name","xixi") 修改属性
t.removeAttribute("name") 移除属性
可以用来控制选择框的是否选中，即控制checked
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="CheckAll()"> <input type="button" value="取消" onclick="CancleALL()"> <input type="button" value="反选" onclick="ReverseALL()"> <table border="1"> <thead> <tr> <th>序号</th> <th>用户名</th> <th>密码</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox"></td> <td>11</td> <td>111</td> </tr> <tr> <td><input type="checkbox"></td> <td>22</td> <td>222</td> </tr> <tr> <td><input type="checkbox"></td> <td>33</td> <td>333</td> </tr> </tbody> </table> <script> function CheckAll() { var t1 = document.getElementById("tb"); var t2=t1.children; for(var i=0;i<t2.length;i++) { t3=t2[i].firstElementChild.firstElementChild; t3.setAttribute("checked","checked"); t3.checked = true; } } function CancleALL() { var t1 = document.getElementById("tb"); var t2=t1.children; for(var i=0;i<t2.length;i++) { t3=t2[i].firstElementChild.firstElementChild; t3.removeAttribute("checked") t3.checked = false } } function ReverseALL() { var t1 = document.getElementById("tb"); var t2=t1.children; for(var i=0;i<t2.length;i++) { t3=t2[i].firstElementChild.firstElementChild; var val =t3.getAttribute("checked"); if ((t3.checked==true || val=="checked" )&&t3.checked!=false){t3.checked=false;t3.removeAttribute("checked")} else{t3.checked=true;t3.setAttribute("checked","checked");} } } </script> </body> </html>
PS：当在网页上勾选单选框时，不会在标签中增加 checkde=checked，所以不能通过获取属性来判断，而是直接用
对象.checked == true or false 来改变单选框的是否选中
最后一点，因此两个方法都能改变，所以两种方法要同时兼顾。
当然，最好的方法就是统一使用 对象.checked 来改变
3.使用的例子：
搜索框
1.创建输入框
2.给输入框绑定事件
3.在script上定义事件的内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> //onfocus表示鼠标的焦点在对话框 onblur鼠标的焦点移出对话框 <input id="i1" type="text" value="请输入内容" onfocus="f1();"onblur="f2();"> <script> function f1() { var t=document.getElementById("i1"); var val=t.value if (val=="请输入内容"){t.value=""} } function f2() { var t=document.getElementById("i1"); var val=t.value; // 去空格，看字符长度 if (val.trim().length==0){t.value="请输入内容"} } </script> </body> </html>
弹出框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .bj{ height: 2000px; width: 100%; background-color: #9E9EA6; } .hide{ display: none;!important; } .shade{ position: fixed; top:0; bottom: 0; left: 0; right: 0; background-color: #5ab2ce; z-index: 100; } .modal{ width: 400px; height: 400px; position: fixed; background-color: white; top: 50%; left: 50%; margin-top:-200px ; margin-left: -200px; z-index: 101; } </style> </head> <body> <div class="bj"> <input type="button" value="点我" onclick="f1()"> <div id="shade" class="shade hide"></div> <div id="modal" class="modal hide"> <a href="javascript:void(0);"onclick="f2()">取消</a> </div> </div> <script> function f1() { var t1 = document.getElementById("shade"); var t2 = document.getElementById("modal"); t1.classList.remove("hide"); t2.classList.remove("hide"); } function f2() { var t1 = document.getElementById("shade"); var t2 = document.getElementById("modal"); t1.classList.add("hide"); t2.classList.add("hide"); } </script> </body> </html>
4.标签操作
1.创建标签
方法一：创建对象
var tag = document.createElement('a')
tag.innerText = 'haha'
tag.className = 'c1'
tag.href = "http://www.baidu.com"
方法二：创建字符串
var tag = "<a class='c1' href='http://www.baidu.com'>haha</a>"
2.添加标签
方法一：创建对象
xx.appendChild(tag) 默认加到最后
xx.insertBefore(tag,xx.children[1]) 加到任意位置
xx.insertAdjacentElement("afterBegin",document.createElement('p'))
方法二：创建字符串
xx.insertAdjacentHTML("beforeEnd",tag); 当成标签传进去
xx.insertAdjacentText("beforeEnd",tag); 当成文本传进去
第一个参数只能是
“beforeBegin”在标签外面的前面添加，与标签同级；
“afterEnd”在标签外面的后面添加，与标签同级；
“beforeEnd”在标签里面的最后面添加，是标签的子级
