Python开发【第十二篇】：DOM

Python开发【第十二篇】：DOM

文档对象模型（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); */

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

三、事件

对于事件需要注意的要点：

• this
• event
• 事件链以及跳出

this标签当前正在操作的标签，event封装了当前事件的内容。

实例：

  搜索框

  跑马灯

 

posted on 2019-04-11 17:37 恒笛 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/xwqhl/p/10691160.html