Python开发【前端】：DOM
DOM（文档对象模型(Document Object Model)）
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作
1、查找元素
① 直接查找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
② 间接查找
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
③ 扩展练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = "i1">我是i1</div>
<a>aaaaa</a>
<a>bbbbb</a>
<a>ccccc</a>
</body>
</html>
1、直接查找练习.html
//获取ID
>document.getElementById('i1');
< <div id="i1">我是i1</div>
//获取内容
>document.getElementById('i1').innerText
<"我是i1"
//重新赋值
>document.getElementById('i1').innerText = '新内容'
<"新内容"
//获取tagname集合
>document.getElementsByTagName('a');
<[<a>aaaaa</a>, <a>bbbbb</a>, <a>ccccc</a>]
//获取集合指定索引元素
>document.getElementsByTagName('a')[1]
< <a>bbbbb</a>
//对单个元素重新赋值
>document.getElementsByTagName('a')[1].innerText = 66666;
<66666
//对集合中所有文件赋值
>tags = document.getElementsByTagName('a');
<[<a>aaaaa</a>, <a>66666</a>, <a>ccccc</a>]
>for(var i=0;i<tags.length;i++){tags[i].innerText=99999;}
<99999
>tags
<[<a>99999</a>, <a>99999</a>, <a>99999</a>]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div>c1Sibling</div>
<div>c1</div>
</div>
<div>
<div>c2Sibling</div>
<div id="i1">c2</div>
</div>
<div>
<div>c3Sibling</div>
<div>c3</div>
</div>
</body>
</html>
2、间接查找练习.html
//获取ID
>tag = document.getElementById('i1');
< <div id="i1">c2</div>
//获取ID的父项
>tag.parentElement
< <div>
<div>c2Sibling</div>
<div id="i1">c2</div>
</div>
//获取父项的子节点
>tag.parentElement.children
< [<div>c2Sibling</div>,<div id="i1">c2</div>]
//获取父项的大兄弟
>tag.parentElement.previousElementSibling
> <div>
<div>c1Sibling</div>
<div>c1</div>
</div>
2、内容操作
① 内容
innerText 文本
outerText
innerHTML HTML内容
innerHTML
value 值
② 属性
attributes // 获取所有标签属性
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性 /*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="全选" onclick="CheckAll();"/>
<input type="button" value="取消" onclick="CancelAll();"/>
<input type="button" value="反选" onclick="ReverseCheck();"/> <table border="1" >
<thead> </thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
</tr>
</tbody>
</table>
<script>
function CheckAll(ths){
var tb = document.getElementById('tb');
var trs = tb.childNodes;
for(var i =0; i<trs.length; i++){ var current_tr = trs[i];
if(current_tr.nodeType==1){
var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
inp.checked = true;
}
}
} function CancelAll(ths){
var tb = document.getElementById('tb');
var trs = tb.childNodes;
for(var i =0; i<trs.length; i++){ var current_tr = trs[i];
if(current_tr.nodeType==1){
var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
inp.checked = false;
}
}
} function ReverseCheck(ths){
var tb = document.getElementById('tb');
var trs = tb.childNodes;
for(var i =0; i<trs.length; i++){
var current_tr = trs[i];
if(current_tr.nodeType==1){
var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
if(inp.checked){
inp.checked = false;
}else{
inp.checked = true;
}
}
}
} </script>
</body>
</html> Demo Demo
Demo
3、Class操作
className // 获取所有类名
classList.remove(cls) // 删除指定类
classList.add(cls) // 添加类
简单练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div>c1Sibling</div>
<div>c1</div>
</div>
<div>
<div>c2Sibling</div>
<div id="i1">c2</div>
</div>
<div>
<div>c3Sibling</div>
<div>c3</div>
</div>
</body>
</html>
class简单操作.html
//获取ID
>document.getElementById('i1');
< <div id="i1">c2</div>
//赋值变量
>tag = document.getElementById('i1');
< <div id="i1">c2</div>
//设置class样式
>tag.className = 'c1';
> "c1"
//设置成功
>tag
< <div id="i1" class="c1">c2</div>
//修改class样式
>tag.className = 'c2';
< "c2"
>tag
< <div id="i1" class="c2">c2</div>
//获取样式列表
>tag.classList
< ["c2"]
//样式列表集合中添加样式
>tag.classList.add('c3')
< undefined
>tag
< <div id="i1" class="c2 c3">c2</div>
//样式列表集合中删除样式
>tag.classList.remove('c2');
< undefined
>tag
< <div id="i1" class="c3">c2</div>
做完上面例子发现不得了了，我们直接可以对样式进行添加修改了，而且现在就可以做动态模块框了，点击按钮可以触发一系列动态效果，吊炸天了呼~，开搞开搞！！！
做之前还得了解这个知识点：
<div onclick="func();">点我</div>
<script>
function func() { }
</script>
上面表示当鼠标点击到div后，执行func()函数
做个模态对话框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
position: fixed;
background-color: #423A3A;
right: 0;
left: 0;
top:0;
bottom: 0;
opacity: 0.6;
z-index: 9;
}
.c2 {
position: fixed;
background-color: white;
height: 400px;
width: 500px;
top:50%;
left: 50%;
z-index: 10;
margin-top: -200px;
margin-left: -250px;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div>
<input type="button" value="打开" onclick="ShowModel();"/>
</div> <div id="i1" class="c1 hide"></div> <div id="i2" class="c2 hide">
<input type="button" value="取消" onclick="HideModel();"/>
</div>
<script>
function ShowModel() {
document.getElementById('i1').classList.remove('hide');
document.getElementById('i2').classList.remove('hide');
}
function HideModel() {
document.getElementById('i1').classList.add('hide');
document.getElementById('i2').classList.add('hide');
}
</script>
</body> </html>
模态对话框.html
页面效果：点击打开后，出现弹出，点击取消，弹出关掉
再做个选项框吧-全选、反选、取消：
<body>
<div>
<table>
<thead>
<tr>
<td>选择</td>
<td>IP地址</td>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"/></td>
<td>192.168.2.201</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>192.168.2.202</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>192.168.2.203</td>
</tr>
</tbody>
</table>
<input type="button" value="全选" onclick="ChooseAll();"/>
<input type="button" value="取消" onclick="CancleAll();"/>
<input type="button" value="反选" onclick="ReverseAll();"/>
</div>
<script>
function ChooseAll() {
var tbody = document.getElementById('tb');
var tr_list = tbody.children;
for(var i=0;i<tr_list.length;i++){
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
checkbox.checked = true
}
}
function CancleAll() {
var tbody = document.getElementById('tb');
var tr_list = tbody.children;
for(var i=0;i<tr_list.length;i++){
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
checkbox.checked = false
}
}
function ReverseAll() {
var tbody = document.getElementById('tb');
var tr_list = tbody.children;
for(var i=0;i<tr_list.length;i++){
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0]; if(checkbox.checked ){
checkbox.checked=false
}else {
checkbox.checked=true
}
}
}
</script>
</body>
页面效果：点击全选所有选项框选上；点击取消后恢复；点击反选，只选择未选上的选项框；一个字叼叼叼！！
根本停不下来，后台管理左侧菜单-点击菜单显示选项，其他菜单关闭
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.item .header{
height: 35px;
background-color: #2459a2;
color: white;
line-height: 35px;
}
</style>
</head>
<body>
<div style="width: 300px">
<div class="item">
<div id='i1' class="header" onclick="ChangeMenu('i1');">菜单一</div>
<div class="content hide">
<div>内容1</div>
<div>内容1</div>
<div>内容1</div>
</div>
</div>
<div class="item">
<div id='i2' class="header" onclick="ChangeMenu('i2');">菜单二</div>
<div class="content hide">
<div>内容2</div>
<div>内容2</div>
<div>内容2</div>
</div>
</div>
<div class="item">
<div id='i3' class="header" onclick="ChangeMenu('i3');">菜单三</div>
<div class="content hide">
<div>内容3</div>
<div>内容3</div>
<div>内容3</div>
</div>
</div>
</div>
<script>
function ChangeMenu(nid) {
var current_header = document.getElementById(nid)
var item_list = current_header.parentElement.parentElement.children
for(var i=0;i<item_list.length;i++){
var current_item = item_list[i];
current_item.children[1].classList.add('hide');
}
current_header.nextElementSibling.classList.remove('hide');
}
</script>
</body>
页面效果：点击菜单一、菜单一展开，其他菜单关闭；点击其他菜单亦可
Python开发【前端】：HTML--》》http://www.cnblogs.com/lianzhilei/p/6038646.html
Python开发【前端】：CSS--》》http://www.cnblogs.com/lianzhilei/p/6046131.html
Python开发【前端】：JavaScript--》》http://www.cnblogs.com/lianzhilei/p/6071530.html
Python开发【前端】：DOM的更多相关文章
- Python开发： DOM
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...
- Python开发【前端】：jQuery
jQuery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是&qu ...
- Python开发【前端】：JavaScript
JavaScript入门 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本 ...
- Python开发【前端】：CSS
css样式选择器 标签上设置style属性: <body> <div style="background-color: #2459a2;height: 48px;" ...
- Python开发【前端】：HTML
HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏 ...
- Python开发【第一篇】：目录
本系列博文包含 Python基础.前端开发.Web框架.缓存以及队列等,希望可以给正在学习编程的童鞋提供一点帮助!!! Python开发[第一篇]:目录 Python开发[第二篇]:初识Python ...
- web开发前端面试知识点目录整理
web开发前端面试知识点目录整理 基本功考察 关于Html 1. html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 2. h5中新增的属性; 如自定义属性data, ...
- 移动端 Web 开发前端知识整理
文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...
- Python 开发轻量级爬虫07
Python 开发轻量级爬虫 (imooc总结07--网页解析器BeautifulSoup) BeautifulSoup下载和安装 使用pip install 安装:在命令行cmd之后输入,pip i ...
随机推荐
- Gerrit管理帐号
文档 Gerrit服务器启动后,网站上有一个Documentation链接.点击后会看到四个选项: index,searching,uploading和access control 文档内容很多,不必 ...
- k-means聚类算法python实现
K-means聚类算法 算法优缺点: 优点:容易实现缺点:可能收敛到局部最小值,在大规模数据集上收敛较慢使用数据类型:数值型数据 算法思想 k-means算法实际上就是通过计算不同样本间的距离来判断他 ...
- [译]：Orchard入门——使用标签管理内容
原文链接:Organizing Content Using Tags 在Orchard中,内容项可以使用标签来分类,同时,通过格式为 ~/tags/tag-name 的url可以直接查看包含对应标签关 ...
- Linux学习笔记（5）-hello world
经过三天的熟悉,我已经将教程中那些常用命令都使用了一遍,所以,从今天起,我已经从一直Linux菜鸟蜕变成了大雕-- Linux的命令无穷多,要想背下来那肯定是不可能的,所以我的目标便是混个手熟,那些常 ...
- [工作中的设计模式]装饰模式decorator
一.模式解析 装饰模式又名包装(Wrapper)模式.装饰模式以对客户端透明的方式扩展对象的功能,是继承关系的一个替代方案. 装饰模式的要点主要是: 1.需要对已有对象扩展新的功能,又不希望改变原有对 ...
- Jquery和其他库（$的好处）
---很多时候我们的页面 会使用很多的 javascript库 ---而这个时候 jQuery这款重点在满足社区用户的需求的工具 做好了让jQuery在页面上与其他库和平共处的准备 凭借名副其实的 ...
- python 之sqlalchemy many to many
# -*- coding: utf-8 -*- """ @author: zengchunyun """ from sqlalchemy i ...
- SQL行合并
CREATE TABLE SC ( Student ), Course ) ) INSERT INTO SC SELECT N'张三',N'大学语文' UNION ALL SELECT N'李四',N ...
- 利用JS实现自定义滚动条
一般默认的滚动条会比较丑,我们可以用简单的js实现自定义滚动条的功能: 代码如下: <!doctype html> <html> <head> <meta c ...
- Java集合类学习-LinkedList, ArrayList, Stack, Queue, Vector
Collection List 在Collection的基础上引入了有序的概念,位置精确:允许相同元素.在列表上迭代通常优于索引遍历.特殊的ListIterator迭代器允许元素插入.替换,双向访问, ...