Python之Web前端:
Dom
jQuery
###Dom
一. 什么是Dom？
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
二. Dom分类：
按照操作对象的不同，可分为Core DOM、XML DOM 和 HTML DOM。
Core Dom：核心Dom，针对任何结构化文档的标准模型。
XML DOM：用于XML文档的标准模型，对XML元素进行操作。
HTML DOM： 用于HTML文档的标准模型，对HTML元素进行操作。
三. Dom节点：
档中的所有内容都可表示为一个节点(node)，如：HTML里整个文档、每个标签、每个标签的属性和文本都可作为一个节点。
(1)节点分类：
-
- 文档节点(Document)：整个XML、HTML文档
- 元素节点(Element)：每个XML、HTML元素
- 属性节点(Attr)：每个XML、HTML元素的属性
- 文本节点(Text)：每个XML、HTML元素内的文本
- 注释节点(Comment)：每个注释
(2)节点层次：
节点彼此都有等级关系：父节点、兄弟节点、子节点等等。
HTML DOM 树
- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
下面的图片展示了节点树的一部分，以及节点之间的关系：
1 <html> 2 <head> 3 <title>Web前端</title> 4 </head> 5 <body> 6 <h1>DOM</h1> 7 <p>Hello world!</p> 8 </body> 9 </html>
从上面的 HTML 中：
- <html> 节点没有父节点；它是根节点
- <head> 和 <body> 的父节点是 <html> 节点
- 文本节点 "Hello world!" 的父节点是 <p> 节点
并且：
- <html> 节点拥有两个子节点：<head> 和 <body>
- <head> 节点拥有一个子节点：<title> 节点
- <title> 节点也拥有一个子节点：文本节点 "Web前端"
- <h1> 和 <p> 节点是同胞节点，同时也是 <body> 的子节点
并且：
- <head> 元素是 <html> 元素的首个子节点
- <body> 元素是 <html> 元素的最后一个子节点
- <h1> 元素是 <body> 元素的首个子节点
- <p> 元素是 <body> 元素的最后一个子节点
四. Dom功能：
1. 查找元素
直接查找：
1 document.getElementById 根据ID获取一个标签 2 document.getElementsByName 根据name属性获取标签集合 3 document.getElementsByClassName 根据class属性获取标签集合，会有兼容性问题。 4 document.getElementsByTagName 根据标签名获取标签集合
间接查找：
1 //包含元素和内容 2 parentNode // 父节点 3 childNodes // 所有子节点 4 firstChild // 第一个子节点 5 lastChild // 最后一个子节点 6 nextSibling // 下一个兄弟节点 7 previousSibling // 上一个兄弟节点 8 9 //只包含元素 10 parentElement // 父节点标签元素 11 children // 所有子标签 12 firstElementChild // 第一个子标签元素 13 lastElementChild // 最后一个子标签元素 14 nextElementtSibling // 下一个兄弟标签元素 15 previousElementSibling // 上一个兄弟标签元素
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <p id="f1">Hello World!</p> 6 7 <script> 8 var txt=document.getElementById("f1").innerHTML; 9 document.write(txt); 10 // 输出： 11 // Hello World! 12 13 // Hello World! 14 </script> 15 16 </body> 17 </html>
2. 操作
(1) 内容
1 1>innerText 文本 2 3 2>outerText 4 5 3>innerHTML HTML内容 6 7 4>innerHTML 8 9 5>value 值
(2) 属性
1 attributes // 获取所有标签属性 2 setAttribute(key,value) // 设置标签属性 3 getAttribute(key) // 获取指定标签属性 4 5 /* 6 var atr = document.createAttribute("class"); 7 atr.nodeValue="democlass"; 8 document.getElementById('n1').setAttributeNode(atr); 9 */
(3) class操作
1 className // 获取所有类名 2 classList.remove(cls) // 删除指定类 3 classList.add(cls) // 添加类
(4) 标签操作
//创建标签 // 方式一 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>"
1 //操作标签 2 3 // 方式一 4 var obj = "<input type='text' />"; 5 xxx.insertAdjacentHTML("beforeEnd",obj); 6 xxx.insertAdjacentElement('afterBegin',document.createElement('p')) 7 8 //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' 9 10 // 方式二 11 var tag = document.createElement('a') 12 xxx.appendChild(tag) 13 xxx.insertBefore(tag,xxx[1])
(5) 样式操作
1 var obj = document.getElementById('i1') 2 3 obj.style.fontSize = "32px"; 4 obj.style.backgroundColor = "red";
1 <input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;" /> 2 3 <script> 4 function Focus(ths){ 5 ths.style.color = "black"; 6 if(ths.value == '请输入关键字' || ths.value.trim() == ""){ 7 8 ths.value = ""; 9 } 10 } 11 12 function Blur(ths){ 13 if(ths.value.trim() == ""){ 14 ths.value = '请输入关键字'; 15 ths.style.color = 'gray'; 16 }else{ 17 ths.style.color = "black"; 18 } 19 } 20 </script> 21 22 Demo