Python开发【第十二篇】:DOM
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Python开发【第十二篇】:DOM,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3651字,纯文字阅读大概需要6分钟。
内容图文
![Python开发【第十二篇】:DOM](/upload/InfoBanner/zyjiaocheng/833/668a33bf3b2e4fa39746c4cb6b001553.jpg)
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。
一、查找元素
1、直接查找
1 2 3 4 |
document.getElementById???????????? 根据 ID 获取一个标签
document.getElementsByName????????? 根据name属性获取标签集合
document.getElementsByClassName???? 根据 class 属性获取标签集合
document.getElementsByTagName?????? 根据标签名获取标签集合
|
2、间接查找
1 2 3 4 5 6 7 8 9 10 11 12 13 |
parentNode?????????? / / 父节点
childNodes?????????? / / 所有子节点
firstChild?????????? / / 第一个子节点
lastChild??????????? / / 最后一个子节点
nextSibling????????? / / 下一个兄弟节点
previousSibling????? / / 上一个兄弟节点
parentElement??????????? / / 父节点标签元素
children???????????????? / / 所有子标签
firstElementChild??????? / / 第一个子标签元素
lastElementChild???????? / / 最后一个子标签元素
nextElementtSibling????? / / 下一个兄弟标签元素
previousElementSibling?? / / 上一个兄弟标签元素
|
二、操作
1、内容
1 2 3 4 5 |
innerText?? 文本
outerText
innerHTML?? HTML内容
innerHTML??
value?????? 值
|
2、属性
1 2 3 4 5 6 7 8 9 |
attributes???????????????? // 获取所有标签属性
setAttribute(key,value)??? // 设置标签属性
getAttribute(key)????????? // 获取指定标签属性
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/
|
![Python开发【第十二篇】:DOM - 文章图片](/upload/getfiles/0001/2021/5/6/20210506023611563.jpg)
3、class操作
1 2 3 |
className???????????????? // 获取所有类名
classList.remove(cls)???? // 删除指定类
classList.add(cls)??????? // 添加类
|
4、标签操作
a.创建标签
1 2 3 4 5 6 7 8 |
// 方式一
var tag = document.createElement( 'a' )
tag.innerText =? "wupeiqi"
tag.className =? "c1"
tag.href =? "http://www.cnblogs.com/wupeiqi"
// 方式二
var tag =? "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"
|
b.操作标签
1 2 3 4 5 6 7 8 9 10 11 |
// 方式一
var obj =? "<input type='text' />" ;
xxx.insertAdjacentHTML( "beforeEnd" ,obj);
xxx.insertAdjacentElement( 'afterBegin' ,document.createElement( 'p' ))
//注意:第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
// 方式二
var tag = document.createElement( 'a' )
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])
|
5、样式操作
1 2 3 4 |
var obj = document.getElementById( 'i1' )
obj.style.fontSize =? "32px" ;
obj.style.backgroundColor =? "red" ;
|
![Python开发【第十二篇】:DOM - 文章图片](/upload/getfiles/0001/2021/5/6/20210506023611563.jpg)
6、位置操作
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 27 28 |
总文档高度
document.documentElement.offsetHeight
?
当前文档占屏幕高度
document.documentElement.clientHeight
?
自身高度
tag.offsetHeight
?
距离上级定位高度
tag.offsetTop
?
父定位标签
tag.offsetParent
?
滚动高度
tag.scrollTop
/*
???? clientHeight -> 可见区域:height + padding
???? clientTop??? -> border高度
???? offsetHeight -> 可见区域:height + padding + border
???? offsetTop??? -> 上级定位标签的高度
???? scrollHeight -> 全文高:height + padding
???? scrollTop??? -> 滚动高度
???? 特别的:
???????? document.documentElement代指文档根节点
*/
|
![Python开发【第十二篇】:DOM - 文章图片](/upload/getfiles/0001/2021/5/6/20210506023611563.jpg)
![Python开发【第十二篇】:DOM - 文章图片](/upload/getfiles/0001/2021/5/6/20210506023611563.jpg)
![Python开发【第十二篇】:DOM - 文章图片](/upload/getfiles/0001/2021/5/6/20210506023611563.jpg)
![Python开发【第十二篇】:DOM - 文章图片](/upload/getfiles/0001/2021/5/6/20210506023611563.jpg)
7、提交表单
1 |
document.geElementById( 'form' ).submit()
|
8、其他操作
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
console.log???????????????? 输出框
alert?????????????????????? 弹出框
confirm???????????????????? 确认框
?
// URL和刷新
location.href?????????????? 获取URL
location.href =? "url" 重定向
location.reload()?????????? 重新加载
?
// 定时器
setInterval???????????????? 多次定时器
clearInterval?????????????? 清除多次定时器
setTimeout????????????????? 单次定时器
clearTimeout??????????????? 清除单次定时器
|
三、事件
对于事件需要注意的要点:
- this
- event
- 事件链以及跳出
this标签当前正在操作的标签,event封装了当前事件的内容。
实例:
![Python开发【第十二篇】:DOM - 文章图片](/upload/getfiles/0001/2021/5/6/20210506023611563.jpg)
![Python开发【第十二篇】:DOM - 文章图片](/upload/getfiles/0001/2021/5/6/20210506023611563.jpg)
内容总结
以上是互联网集市为您收集整理的Python开发【第十二篇】:DOM全部内容,希望文章能够帮你解决Python开发【第十二篇】:DOM所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。