Python_way day16
1、Dom (找到html中的标签)
一、DOM
1、查找元素
- 直接查找
document.getElementById 根据ID获取一个标签 --->这里是获取一个标签中间没有s
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合/ 兼容性不太好 ----> 这些都是获取多个标签中间有s
document.getElementsByTagName 根据标签名获取标签集合
- 间接查找
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点
#以上的nodes既包含标签，也包含文本内容
<div>
我写的这些文字不算元素，只算节点所以使用node可以获得，并且也会把下面的a标签一起获得
<a>1</a>
<a>2</a>
</div>
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
只包含标签
直接查找：
Nodes包含了所有子节点。
2、操作
a、获取和修改
- 对于有值的标签使用value获取或者设置
t = document.getElementById("i2")
<div id="i2">…</div>
t.children
[<input type="text">]
text = t.children[0]
<input type="text">
text.value
""
text.value //获取当前input框中输入的值
"123"
text.value = 345 //设置input框中的值
345
- 对于没有值的但是有文本内容的比如a标签
使用innetText或者innerHTML这两个标签
innetText
t = document.getElementById("i3")
<a id="i3" href="http://www.baidu.com">百度</a>
t.innerText //获取a标签中的内容
"百度"
t.innerText = "是百度" //设置a标签中的内容，让其在页面上变化
"是百度"
innerHTML
<a id="i3" href="http://www.baidu.com">百<span>666</span>度</a>
t = document.getElementById("i3")
<a id="i3" href="http://www.baidu.com">…</a>
t.innerText
"百666度"
t.innerHTML
"百<span>666</span>度" HTML会将文本中的所有标签都拿到
实例一：搜索框中的文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框文字消失</title>
</head>
<body>
<input id="i1" type="text" value="请输入搜索内容" onfocus="Focus();" onblur="Blur()"/> //onfocus:获取鼠标点击时的动作， onblur:获取鼠标移除时的动作
<script type="text/javascript">
function Focus() {
var tag = document.getElementById("i1"); //获取id=i1的标签
if(tag.value=="请输入搜索内容"){ //如果这个表亲的内容是请输入请输入搜索内容，一点就清空，否则就不管
tag.value = "";
}
}
function Blur() {
var tag = document.getElementById("i1");
var tag_value = tag.value;
if (tag_value.trim().length==0){ //如果搜索框去空格后的长度是0，就证明用户没有输入，那么就将内容恢复
tag.value = "请输入搜索内容";
}
}
</script>
</body>
</html>
b、class操作
增加样式
className // 获取所有类名
classList.remove(cls) // 删除指定类
classList.add(cls) // 添加类 直接改变样式
<input type="text" style="color:red; font-size:40px;"/>
tag.style.color = "red" . //定义文字的颜色
tag.style.fontSize = "40px" //定义字体大小 就是把css中的 - 去掉第二个单词首字母大写，别的样式都是这个规律
实例二:摸态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>莫泰对话框</title>
<style>
.hide{
display: none !important;
/*定义一个display = none的标签，让后面使用*/
} .b{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,.6);
z-index: 9;
} .modal{
height: 200px;
width: 400px;
background-color: lightskyblue;
position: fixed;
z-index: 10;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -100px; } .out_input{
margin-left: 98px;
height: 100px;
margin-top: 10px;
} .d_input{
display: inline-block;
width: 173px;
height: 21px;
margin-top: 10px;
} .login_back{
height: 50px;
width: 204px;
background-color: dodgerblue;
margin: 0 auto;
text-align: center;
line-height:50px;
border: 1px darkblue solid;
} input{
width: 200px;
height: 30px;
} .login_icon{
top: 16px;
left: 68px;
float: inherit;
} .modal_in{
height: 30px;
width: 100px;
float:right;
}
</style>
</head>
<body>
<input class="reg" type="button" value="登陆" onclick="ShowModal();">
<!--一旦点击这个button按钮，onclick，就触发showmodal这个js函数-->
<div id ="black" class="b hide"></div>
<!--让背景这个样式使用两个类属性，一个是颜色，布局，一个就是隐藏，现不显示出来-->
<div id ="mod" class="modal hide">
<!--让中间整个的这个模块使用两个类属性，一个是颜色，布局，一个就是隐藏，现不显示出来-->
<div class="login_back">
<span class="login_icon">
账户登陆
</span>
</div>
<div class="out_input">
<input type="text"/>
<span class="input_imp"></span>
<span class="d_input">
<input type="text" class="input_d"/>
<span class="input_imp"></span>
</span>
</div> <button class="modal_in" onclick="HideModal();">返回</button>
<!--一旦点击这个button按钮，onclick，就触发HideModal这个js函数-->
</div>
<script>
function ShowModal() {
var t1 = document.getElementById("black");
var t2 = document.getElementById("mod");
//<div id="black" class="b"></div>
//<div id="mod" class="modal"></div>
t1.classList.remove("hide"); //移除tag1这个list中的class：hide
t2.classList.remove("hide"); //移除tag2这个list中的class: hide
}
function HideModal() {
var t1 = document.getElementById("black");
var t2 = document.getElementById("mod");
//<div id="black" class="b hide"></div>
//<div id="mod" class="modal hide"></div>
t1.classList.add("hide"); //移除tag1这个list中的class：hide
t2.classList.add("hide"); //移除tag2这个list中的class: hide
}
</script>
</body>
</html>
小知识点：
<a href="javascript:void (0)">取消</a> //表示这个a标签什么都不做
修改样式：
</body>
<div id="i1" style="background-color: red;font-size:40px"></div> //定义好的样式 style
</body>
<script>
tag=document.getElementById("i1");
tag.style.backgroundColor = "green"; //这里直接修改样式
tag.style.fontSize="50px"
</script>
c、属性
id class 或者自定义属性中的值通过属性进行修改。
t = document.getElementById("i1") //获取i1dom的所有内容
<input id="i1" name="123" today="monday" type="text" style="color:red;font-size: 40px">
t.getAttribute("type") //获取type的value
"text"
t.setAttribute("type","password") //把type属性改成password
undefined
t
<input id="i1" name="123" today="monday" type="password" style="color:red;font-size: 40px">
t.remove("type") //删除type属性
实例三：全选反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选，反选，取消</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>11</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>3</td>
<td>33</td>
</tr>
</tbody>
</table>
<hr/>
<input type="button" value="全选" onclick="CheckAll()">
<input type="button" value="反选" onclick="turnchose()">
<input type="button" value="取消" onclick="CancleALL()">
<script>
function CheckAll() {
var tb = document.getElementById("tb");
var trs = tb.children;
for (var i = 0; i < trs.length; i++) {
var tr = trs[i];
var ch = tr.firstElementChild.firstElementChild;
ch.checked = true; //这两种方法都可以，但是要和反选配合使用，反选用checked=true这里也要用，
ch.setAttribute("checked","checked"); //其实所有的选择都使用checked=true就可以实现，但是为了使用set，remove这些功能就把这些都加上了
}
}
function CancleALL() {
var tb=document.getElementById("tb");
var trs = tb.children;
for (var i=0;i<trs.length;i++){
var tr=trs[i];
var ch = tr.firstElementChild.firstElementChild;
console.log(ch);
if (ch.checked){
ch.checked=false; // ch.checked就是获取web页面点击框后的状态
ch.removeAttribute("checked")
}
}
}
function turnchose() {
var tb=document.getElementById("tb");
var trs = tb.children;
for (var i=0;i<trs.length;i++){
var tr=trs[i];
var ch = tr.firstElementChild.firstElementChild;
console.log(ch.checked);
if (ch.checked){
ch.checked = false;
ch.removeAttribute("checked");
}
else{
ch.checked = true;
ch.setAttribute("checked","checked") }
}
}
</script>
</body>
</html>
d、标签操作
- 创建标签
// 方式一
var tag = document.createElement('a')
tag.innerText = "hanxu"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/python-way/" // 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/python-way/'>hanxu的python_way</a>"
优先使用方式一，用对象来创建标签。
- 操作标签
p1 = document.getElementById("i1") //获取现在有的对象
<div id="i1"><p>hello</p></div>
tag1 = document.createElement("a") //1、使用对象的方式创建一个新的a标签
<a></a>
tag1.innerText="111" //给这个a标签填写内容
"111"
tag1
<a>111</a> //重点在这里，tag的值不是字符串，而是一个真正的标签
var tag2 = "<a class='c1' href='http://www.cnblogs.com/python-way/'>hanxu的python_way</a>" //我们再用字符串创建一个标签
undefined
tag2
"<a class='c1' href='http://www.cnblogs.com/python-way/'>hanxu的python_way</a>" //重点这里还有，这样创建出来的标签是一个字符串
以上创建出来的两种标签的操作方式不一样
1、对象创建出来的标签是使用 obj.insertAdjacentElement('位置',obj)来操作
2、字符串创建出来的标签是使用 obj.insertAdjacentText('位置'.obj)来操作
对象形式添加标签：
方法1、obj.appendChile(obj1)
p = document.getElementById("i1")
<div id="i1">…</div>
tag = document.createElement("a")
<a></a>
tag.innerText='111'
"111"
tag
<a>111</a>
p.appendChild(tag)
<a>111</a>
这样添加是添加到 i1 child 的最后面(append)
方式2：
= document.getElementById("i1")
<div id="i1">…</div>
tag = document.createElement("a")
<a></a>
tag.innerText='111'
"111"
tag
<a>111</a>
p.appendChild(tag)
<a>111</a>
p.insertBefore(tag,p.children[0]) //添加到p标签的第一个孩子的前面
<a>111</a>
字符串形式的标签2中方法： HTML Text
tag2，字符串创建标签有两种插入方式：
p.insertAdjacentHTML("beforeEnd",tag2)
undefined
p.insertAdjacentText("beforeEnd",tag2)
#位置说明：位置一共有4个地方分别是 'beforeBegin', 'afterBegin', 'beforeEnd', 'afterEnd 这四种
beforeBegin : 在获取的标签 i1 平级的前面 （before：在...之前，begin：首先，开始）
afterBegin :在获取的标签i1里面的最前面 (after:在...之后，begin：首先，开始)
beforeEnd : 在获取标签的里面的最后（bafore：在...之前，end：最后）
afterEnd:在获取的标签平级的后面(after:在...之后，end：最后)
实例四：点赞
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点赞</title>
<style>
.item{
padding: 50px;
cursor: pointer;
position: relative;
}
</style>
</head>
<body>
<!--先定义好点赞的位置-->
<div class="item">
<a onclick="Fover(this)">赞1</a>
<!--获取点击事件，执行Fover函数,并且将自己a标签整体传到这个函数中（this就是关键字）-->
</div>
<div class="item">
<a onclick="Fover(this)">赞2</a>
</div>
<div class="item">
<a onclick="Fover(this)">赞3</a>
</div>
<div class="item">
<a onclick="Fover(this)">赞4</a>
</div>
<script>
function Fover(ths) {
// 先定义一些变量，一会用
var top = 49; //字体距离顶部的告诉
var left = 71; //字体距离左侧的距离
var op = 1; //透明度
var fontSize = 18; //字体大小初始值
// 然后创建一个span标签
var tag = document.createElement("span");
// 定义span标签的样式
tag.innerText = "+1"; //span的文本内容
tag.style.top = top + "px"; //设置字体的位置
tag.style.left = left + "px";
tag.style.opacity = op; //设置字体的透明度
tag.style.position = "absolute"; //让这个标签相对于item浮起来
tag.style.fontSize = fontSize + "px"; //设置字体大小
ths.parentElement.appendChild(tag); //然后将上面创建的字体添加到父标签的子标签中，就是添加到了自己的旁边
//或者写成这样
// par = ths.parentElement; //获取自己的父标签
// par.insertAdjacentElement("afterBegin",tag); //添加tag标签
var interval = setInterval(function () { //然后执行一个定时器，
top -= 10; //每次执行定时器就让字体的属性变化
left += 10;
op -= 0.1;
fontSize += 5;
tag.style.top = top + "px";
tag.style.left = left + "px";
tag.style.opacity = op;
tag.style.position = "absolute";
tag.style.fontSize = fontSize + "px";
if (op <= 0.2) { //如果透明度小于0.2
clearInterval(interval); //删除这个定时器
ths.parentElement.removeChild(tag); //并且将这个+1的span删除，如果不删除到0.2透明度时字体会停在那里。
}
},40); //定时器每40毫秒执行一次
}
</script>
</body>
</html>
e、定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器
实例五：定时让字消失
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
<div id="status" style="color: red"> </div>
<input type="submit" onclick="DeleteStatus();" value="删除">
<script>
function DeleteStatus() {
var s = document.getElementById("status");
s.innerText="删除成功";
var set = setTimeout(function () { //一次性定时器
var s = document.getElementById("status");
s.innerText="";
},5000); //等待5秒钟
}
</script>
</body>
</html>
f、位置操作
总文档高度
document.documentElement.offsetHeight 当前文档占屏幕高度
document.documentElement.clientHeight 自身高度
tag.offsetHeight 距离上级定位高度（定位标签：在整个标签中寻找有postion reltive，如果有找到距离这个标签的高度，如果整个页面没有postion，则计算到顶部的高度）
tag.offsetTop 父定位标签
tag.offsetParent 滚动高度
tag.scrollTop /*
clientHeight -> 可见区域：height + padding
clientTop -> border高度 //标签边框的高度
offsetHeight -> 可见区域：height + padding + border
#比如div中的内容很多，出现了滚动条， 这offsetHeight 和 offsetTop 高度只能显示div 这个框的高度，但是实际滚动条中的高度要高的多。
offsetTop -> 上级定位标签的高度 //和postion 定位功能的标签的高度
scrollHeight -> 全文高：height + padding
scrollTop -> 滚动高度
特别的：
document.documentElement代指文档根节点
*/
滚动条种类：窗口滚动条，标签滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高度</title>
</head>
<body>
<!--窗口的滚动条-->
<div style="background-color: cadetblue; height: 2000px"></div> //窗口滚动条
<div style="background-color: aqua;height: 200px; overflow: auto"> //标签滚动条
<p>abs</p>
<p>abs</p>
<p>abs</p>
<p>abs</p>
<p>abs</p> // ---------->这里的内容超过了上面div定义的200px，再配合overflow:auto 所以就出现了标签的滚动条
<p>abs</p>
<p>abs</p>
</div>
</body>
</html>
- 获取windowns滚动条
实例六：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高度</title>
<style>
input{
/*定义按钮的位置在windowns的右下角*/
position: fixed;
right: 20px;
bottom: 20px;
}
.hide{
/*隐藏*/
display: none;
}
</style>
</head>
<body onscroll="ShowButton()">
<!--因为要返回整个窗口的最上面，在body这里获取活动时间onscroll--> <!--窗口的滚动条-->
<div style="background-color: cadetblue; height: 2000px"></div>
<input id="b" class="hide" type="button" value="返回顶部" onclick="BackTop()"/><!--点击这个按钮的时候执行BackTop函数 -->
<!--把隐藏的属性先用上，默认在最上面的时候是不显示返回顶部的按钮的-->
<script>
function BackTop() {
document.body.scrollTop = 0;
}
function ShowButton() {
//body那里只要获取滚动事件一下就执行一下这个函数
var s = document.body.scrollTop; //获取当前距离窗口滚动的顶部
var t = document.getElementById("b"); //再获取一下bid的这个input标签
if (s>=100){ //如果判断滚动条距离窗口顶部已经到了100
t.classList.remove("hide"); //那么就要显示返回顶部按钮，就是把隐藏的功能去掉
}else{
t.classList.add("hide") //相反，就是添加进来
}
}
</script>
</body>
</html>
g、提交表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提交表单</title>
</head>
<body>
<form>
<input type="text"/>
<a onclick="Submit(this)">提交</a>
<!--a标签本身没有提交表单的功能，但是通过script就可以了-->
</form>
<script>
function Submit(ths) {
var par = ths.parentElement; //因为提交表单需要form这个标签，所以我们获取这个form
par.submit(); //然后通过form提交
}
</script>
</body>
</html>
h、其他操作
console.log 输出框
alert 弹出框
confirm 确认框
会弹出和alert一样的确认框，点击确认为true，点击取消为faule // URL和刷新
location.href 获取当前浏览器的URL
location.href = "url" 重定向 ，#重新给浏览器复制url
location.reload() 重新加载， 刷新当前页面
location.href // 获取当前阅览器的url
location.href = "https://www.baidu.com" 是重新设置新的url并且跳转
实例七：是否删除 confirm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>是否删除</title>
</head>
<body>
<script>
var ret = confirm("是否删除")
console.log(ret)
</script>
</body>
</html>
3、事件
事件：
1、this，当前触发事件的标签
2、全局事件绑定 windown.onKeyDown = function(){}
3、event 包含了事件相关内容
4、默认事件 : 基本的标签自定义事件会在默认事件前执行，唯独checkbox是默认时间先执行
实例8：事件的优先与执行
<html lang="en">
<head>
<meta charset="UTF-8">
<title>默认事件</title>
</head>
<body>
<form action="https://www.baidu.com">
<input id="username" type="text" />
<input type="submit" value="提交" onclick="return SubMit();" />
<!--因为事件会有默认的优先值，在我们自定义的事件后 submit的优先值就会是自定义的优先，然后再执行默认的事件，-->
<!--我们可以通过第一个值的返回值来判断是否执行默认时间，这个时候就要在onclick里面再写一个return的参数这个参数-->
<!--是ture就执行后面的事件，如果是false就不执行后面时间-->
</form>
<script>
function SubMit() {
var inp = document.getElementById("username"); //获取username的文本内容
if (inp.value.length > 0) { //判断文本内容是否大于0，如果大于就可以提交，否则就不能提交
return true //然后这里面给return定义值
}else{
alert("用户名不能为空");
return false
}
}
</script>
</body>
</html>
实例9：event与全局事件绑定用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<style>
#i2{
position: fixed;
background-color: rgba(0,0,0,.6);
top:0;
left:0;
bottom: 0;
right: 0;
z-index: 10;
}
#i1{
position:relative;background-color: #D5023D;
height: 2000px;
z-index: 9;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div id=i1 ></div>
<div id="i2"></div>
<script>
window.onkeydown = function (event) { //这个event里面保存着所有的onkeydown事件的信息
if(event.key=="Escape"){ //其中的event.key 就是Escape 按下esc的时间
Hide(); //当触发这个时间时我执行隐藏磨砂框的功能
}
};
function Hide() {
var c = document.getElementById("i2");
c.classList.add("hide");
}
</script>
</body>
</html>