Python 复习笔记 dom
JavaScript:
https://www.cnblogs.com/otome/p/12588542.html
jquery：
https://www.cnblogs.com/otome/p/12682354.html
Dom（document）
1.查找
1.直接查找：
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
2.间接查找：
通过一个标签找出各种关系的标签：
节点：（所有内容）
1 parentNode // 父节点 2 childNodes // 所有子节点 3 firstChild // 第一个子节点 4 lastChild // 最后一个子节点 5 nextSibling // 下一个兄弟节点 6 previousSibling // 上一个兄弟节点
元素：（被括号括起来的内容）
1 parentElement // 父节点标签元素 2 children // 所有子标签 3 firstElementChild // 第一个子标签元素 4 lastElementChild // 最后一个子标签元素 5 nextElementtSibling // 下一个兄弟标签元素 6 previousElementSibling // 上一个兄弟标签元素
节点和元素的区别：
<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，"-"后的C变成大写的
4.属性(<div id='i1' name='haha'>)
t.getAttribute(name) 获得属性 t.setAttribute("name","xixi") 修改属性 t.removeAttribute("name") 移除属性
可以用来控制选择框的是否选中，即控制checked
PS：当在网页上勾选单选框时，不会在标签中增加 checkde=checked，所以不能通过获取属性来判断，而是直接用
对象.checked == true or false 来改变单选框的是否选中
最后一点，因为两个方法都能改变，所以两种方法要同时兼顾。当然，最好的方法就是统一使用 对象.checked 来改变
3.标签操作
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); 当成文本传进去
第一个参数只能是
“afterBegin”在标签里面的最前面添加，是标签子级；
“beforeBegin”在标签外面的前面添加，与标签同级；
“afterEnd”在标签外面的后面添加，与标签同级；
“beforeEnd”在标签里面的最后面添加，是标签的子级
4.位置
1.clientHeight 可见区域：height+padding
2.clientTop border高度
3.offsetHeight 可见区域：height+padding+border
4.offsetTop 距离上级定位标签的高度
5.scrollHeight 全文高：height+padding
6.scrollTop 滚动高度
PS：谷歌浏览器使用document.body.scrollTop一直显示0，所以使用document.documentElement.scrollTop
跟程序开头的<!DOCTYPE html>有关，各浏览器下 scrollTop的差异 原文链接：https://blog.csdn.net/sleepwalker_1992/article/details/80677845
IE：
对于没有doctype声明的页面，使用 document.body.scrollTop 或 document.documentElement.scrollTop；
对于有doctype声明的页面，则使用 document.documentElement.scrollTop；
Chrome、Firefox：
对于没有doctype声明的页面，使用 document.body.scrollTop 来获取 scrollTop高度 ；
对于有doctype声明的页面，则使用 document.documentElement.scrollTop；
Safari:
safari 比较特别，有自己获取scrollTop的函数 ： window.pageYOffset ；
所以可以合在一起判断window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
5.提交表单
之前是<input type='submit' value='提交'>来提交当前form的表单
现在可以用DOM来提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="i1">
<input type="text">
<input type="submit"value="提交">
<a onclick="Submit()">提交</a>
</form>
<script>
function Submit() {
var tag=document.getElementById('i1');
tag.submit();
}
</script>
</body>
</html>
6.其他操作：
1.console.log() 输出框，把括号中的内容输出到网页上
2.alert() 弹出框
3.confirm() 确认框，有返回值，为false或true
//URL和刷新
4.location.href 获取URL
5.location.href="URL" 重定向
6.location.reload() 重新加载
//定时器：
7.setInterval 多次定时器
8.clearInterval
9.setTimeOut 单次定时器
10.clearTimeOut
7.事件的绑定
特殊事件：
1.this，指向当前触发事件的标签
2.全局事件绑定 window.onkeydown=function(){}
3.event，特殊参数，包含事件相关内容(跟之前的pygame的event差不多)
4.默认事件
如：
（a标签，跳转）（submit标签，提交）.....
如果绑定事件，先执行自定义事件，再执行默认事件
<input type="submit" value="提交" onclick="return Submit()">
加上return的话，后面的Submit()函数如果是true就会执行后面的事件，如果是false就不执行
（checkbox，勾选）..
如果绑定事件，先执行默认事件，再执行自定义事件
实际操作的一些例子：
1.搜索框
1.创建输入框
2.给输入框绑定事件
3.在script上定义事件的内容
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 //onfocus表示鼠标的焦点在对话框 onblur鼠标的焦点移出对话框 9 <input id="i1" type="text" value="请输入内容" onfocus="f1();"onblur="f2();"> 10 <script> 11 function f1() { 12 var t=document.getElementById("i1"); 13 var val=t.value 14 if (val=="请输入内容"){t.value=""} 15 } 16 function f2() { 17 var t=document.getElementById("i1"); 18 var val=t.value; 19 // 去空格，看字符长度 20 if (val.trim().length==0){t.value="请输入内容"} 21 } 22 </script> 23 </body> 24 </html>
2.弹出框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 margin: 0; 9 } 10 .bj{ 11 height: 2000px; 12 width: 100%; 13 background-color: #9E9EA6; 14 } 15 .hide{ 16 display: none;!important; 17 } 18 .shade{ 19 position: fixed; 20 top:0; 21 bottom: 0; 22 left: 0; 23 right: 0; 24 background-color: #5ab2ce; 25 z-index: 100; 26 } 27 .modal{ 28 width: 400px; 29 height: 400px; 30 position: fixed; 31 background-color: white; 32 top: 50%; 33 left: 50%; 34 margin-top:-200px ; 35 margin-left: -200px; 36 z-index: 101; 37 } 38 </style> 39 </head> 40 <body> 41 <div class="bj"> 42 <input type="button" value="点我" onclick="f1()"> 43 <div id="shade" class="shade hide"></div> 44 <div id="modal" class="modal hide"> 45 <a href="javascript:void(0);"onclick="f2()">取消</a> 46 </div> 47 </div> 48 <script> 49 function f1() { 50 var t1 = document.getElementById("shade"); 51 var t2 = document.getElementById("modal"); 52 t1.classList.remove("hide"); 53 t2.classList.remove("hide"); 54 } 55 function f2() { 56 var t1 = document.getElementById("shade"); 57 var t2 = document.getElementById("modal"); 58 t1.classList.add("hide"); 59 t2.classList.add("hide"); 60 } 61 </script> 62 </body> 63 </html>
3.点赞（绑定事件）
1.this，指向当前触发事件的标签， function(this)，可以传入这个标签
2.setInterval(匿名函数，时间单位ms) 创建定时器，会返回一个值，inter=setInterval()
3.clearInterval删除定时器,传入创建时返回的值，clearInterval(inter)
4.removeChild删除子标签
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .item{ 8 padding: 50px; 9 position: relative; 10 } 11 .item span{ 12 position: absolute; 13 top: 42px; 14 left: 83px; 15 opacity: 1; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="item"> 21 <a onclick="f1(this)">赞!</a> 22 </div> 23 <div class="item"> 24 <a onclick="f1(this)">赞!</a> 25 </div> 26 <div class="item"> 27 <a onclick="f1(this)">赞!</a> 28 </div> 29 <div class="item"> 30 <a onclick="f1(this)">赞!</a> 31 </div> 32 <script> 33 function f1(ths) { 34 var top=42; 35 var left=83; 36 var op=1; 37 var fontSize=18; 38 var tag = document.createElement('span'); 39 tag.innerText='+1'; 40 tag.style.top=top+'px'; 41 tag.style.left=left+'px'; 42 tag.style.fontSize=fontSize+'px'; 43 tag.style.opacity=op; 44 ths.parentElement.appendChild(tag); 45 46 var inter=setInterval(function () 47 { 48 top-=10; 49 left+=10; 50 op-=0.1; 51 fontSize+=5; 52 tag.style.top=top+'px'; 53 tag.style.left=left+'px'; 54 tag.style.fontSize=fontSize+'px'; 55 tag.style.opacity=op; 56 if (op<=0.2){ 57 clearInterval(inter); 58 ths.parentElement.removeChild(tag) 59 } 60 } 61 ,50) 62 } 63 </script> 64 </body> 65 </html> 66 67 点赞例子
