Python开发【第十二篇】：DOM

佚名 6年前 (2019-04-11) 随笔 1260人围观抢沙发百度已收录

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

一、查找元素

1、直接查找

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

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); */

Demo

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" ;

Demo

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代指文档根节点 */

test

Demo-滚动固定

Demo-滚动菜单

Demo-滚动高度

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 清除单次定时器