python_way day16 DOM

 

Python_way day16

1、Dom  (找到html中的标签)

 

 一、DOM

1、查找元素

  • 直接查找
?
1
2
3
4
document.getElementById             根据ID获取一个标签         　　　　　　　　 --->这里是获取一个标签中间没有s
document.getElementsByName          根据name属性获取标签集合　　　　　　　　　　
document.getElementsByClassName     根据class属性获取标签集合/ 兼容性不太好　　　----> 这些都是获取多个标签中间有s
document.getElementsByTagName       根据标签名获取标签集合
  • 间接查找
?
1
2
3
4
5
6
7
8
9
10
11
12
13
parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点<br>#以上的nodes既包含标签，也包含文本内容<br><div><br>　　 我写的这些文字不算元素，只算节点所以使用node可以获得，并且也会把下面的a标签一起获得<br>    <a>1</a><br>　　 <a>2</a><br></div><em id="__mceDel">
  
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素<br>只包含标签</em>

　直接查找：

Nodes包含了所有子节点。

 

2、操作

a、获取和修改

  • 对于有值的标签使用value获取或者设置
?
1
2
3
4
5
6
7
8
9
10
11
12
13
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

?
1
2
3
4
5
6
t = document.getElementById("i3")
<a id=​"i3" href=​"http:​/​/​www.baidu.com">​百度​</a>​
t.innerText   //获取a标签中的内容
"百度"
t.innerText = "是百度"    //设置a标签中的内容，让其在页面上变化
"是百度"

innerHTML

?
1
2
3
4
5
6
<em><a id="i3" href="http://www.baidu.com">百<span>666</span>度</a></em><br>t = document.getElementById("i3")
<a id=​"i3" href=​"http:​/​/​www.baidu.com">​…​</a>​
t.innerText
"百666度"
t.innerHTML
"百<span>666</span>度"    HTML会将文本中的所有标签都拿到

实例一：搜索框中的文字

　　

 

b、class操作

?
1
2
3
增加样式<br>className                // 获取所有类名
classList.remove(cls)    // 删除指定类
classList.add(cls)       // 添加类<br><br>直接改变样式<br><input type="text" style="color:red; font-size:40px;"/><br>tag.style.color = "red" .  //定义文字的颜色<br>tag.style.fontSize = "40px"   //定义字体大小  就是把css中的 - 去掉第二个单词首字母大写，别的样式都是这个规律

实例二:摸态对话框　　

　　

小知识点：

?
1
<a href="javascript:void (0)">取消</a>    //表示这个a标签什么都不做

 

修改样式：

?
1
2
3
4
5
6
7
</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"<br></script>

　　

c、属性

id class 或者自定义属性中的值通过属性进行修改。

?
1
2
3
4
5
6
7
8
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">​<br>t.remove("type")　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//删除type属性

实例三：全选反选

　　

d、标签操作

  • 创建标签
?
1
2
3
4
5
6
7
8
// 方式一
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>"

优先使用方式一，用对象来创建标签。

 

  • 操作标签
?
1
2
3
4
5
6
7
8
9
10
11
12
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的值不是字符串，而是一个真正的标签<br><br>
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>"                  //重点这里还有，这样创建出来的标签是一个字符串<br><br>以上创建出来的两种标签的操作方式不一样<br><br>1、对象创建出来的标签是使用 obj.insertAdjacentElement('位置',obj)来操作<br>2、字符串创建出来的标签是使用 obj.insertAdjacentText('位置'.obj)来操作

对象形式添加标签：

方法1、obj.appendChile(obj1)

?
1
2
3
4
5
6
7
8
9
10
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：

?
1
2
3
4
5
6
7
8
9
10
11
12
= 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

?
1
2
3
tag2，字符串创建标签有两种插入方式：<br>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：最后)

　

 

 实例四：点赞

 

e、定时器

?
1
2
3
4
setInterval                 多次定时器
clearInterval               清除多次定时器
<br>setTimeout                  单次定时器
clearTimeout                清除单次定时器

　实例五：定时让字消失

 

f、位置操作　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
总文档高度
document.documentElement.offsetHeight
   
当前文档占屏幕高度
document.documentElement.clientHeight
   
自身高度
tag.offsetHeight
   
距离上级定位高度（定位标签：在整个标签中寻找有postion reltive，如果有找到距离这个标签的高度，如果整个页面没有postion，则计算到顶部的高度）
tag.offsetTop
   
父定位标签
tag.offsetParent
   
滚动高度
tag.scrollTop
  
/*
    clientHeight -> 可见区域：height + padding
    clientTop    -> border高度     //标签边框的高度<br>
    offsetHeight -> 可见区域：height + padding + border  <br>    #比如div中的内容很多，出现了滚动条， 这offsetHeight 和 offsetTop 高度只能显示div 这个框的高度，但是实际滚动条中的高度要高的多。    offsetTop -> 上级定位标签的高度 //和postion 定位功能的标签的高度<br>   <br>    scrollHeight -> 全文高：height + padding 
    scrollTop    -> 滚动高度
    特别的：
        document.documentElement代指文档根节点
*/

滚动条种类：窗口滚动条，标签滚动条

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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滚动条

　实例六：

g、提交表单　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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、其他操作

?
1
2
3
4
5
6
7
8
9
10
console.log                 输出框
alert                       弹出框
confirm                     确认框<br>会弹出和alert一样的确认框，点击确认为true，点击取消为faule
   
// URL和刷新
location.href               获取当前浏览器的URL
location.href = "url"       重定向 ，#重新给浏览器复制url<br>
location.reload()           重新加载， 刷新当前页面
 location.href  // 获取当前阅览器的url
location.href = "https://www.baidu.com" 是重新设置新的url并且跳转

实例七：是否删除 confirm

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!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：事件的优先与执行

　　

实例9：event与全局事件绑定用法：

　　

　　

posted @   wawahan  阅读(226)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET制作智能桌面机器人：结合BotSharp智能体框架开发语音交互
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
阅读排行：
· 《HelloGitHub》第 108 期
· Windows桌面应用自动更新解决方案SharpUpdater5发布
· 我的家庭实验室服务器集群硬件清单
· Supergateway：MCP服务器的远程调试与集成工具
· C# 13 中的新增功能实操
点击右上角即可分享
微信分享提示