【Python之路】第十三篇--DOM
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
一、查找元素
1、直接查找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
2、间接查找
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
节点与标签的区别: 节点会把标签中文本也找出来!
二、操作
1、内容
innerText 文本
outerText
innerHTML HTML内容
outerHTML
value 值 => 文本框,下来框 表单标签的值 获取 与 赋值:(其他同理)
text = obj.innerText => 获取包含的文本
obj.innerText = '123'
2、属性
attributes // 获取所有标签属性 => 字典形式
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性 => 没有的为null /*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/
3、class操作
className // 获取所有类名 => 字符串形式
classList.remove(cls) // 删除指定类 => 列表形式
classList.add(cls) // 添加类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
list-style: none;
padding: 0;
margin: 0;
}
.title{
background: #DDDDDD;
}
.clearfix:after{
display: block;
content: 'x';
height: 0;
visibility: hidden;
clear: both;
}
ul li{
background: blue;
color: white;
float: left;
padding: 8px 10px;
}
.content{
border: 1px solid #DDDDDD;
min-height: 200px;
}
.active{
background-color: white;
color: #000000;
}
.dis-con{
display: none;
}
</style>
</head>
<body>
<div class="tab-menu">
<div class="title clearfix">
<ul>
<li class="active" target='d1' onclick="Show(this)">价格趋势</li>
<li target='d2' onclick="Show(this)">市场分布</li>
<li target='d3' onclick="Show(this)">其他</li>
</ul>
</div> <div class="content" id='content'>
<div con='d1'>content1</div>
<div class="dis-con" con='d2'>content2</div>
<div class="dis-con" con='d3'>content3</div>
</div>
</div> <script type="text/javascript">
function Show(obj){
var target = obj.getAttribute('target');
var menu = obj.parentElement.children;
for(var i=0;i<menu.length;i++){
if(menu[i] == obj){
obj.className='active';
}else{
menu[i].removeAttribute('class');
}
}
//操作内容
var con_node = document.getElementById('content');
con = con_node.children;
for(var j=0;j<con.length;j++){
var attr = con[j].getAttribute('con');
if(attr == target){
con[j].classList.remove('dis-con');
}else{
con[j].classList.add('dis-con');
}
}
} </script>
</body>
</html>
demo
4、标签操作
a.创建标签
// 方式一
var tag = document.createElement('a')
tag.innerText = "alex"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/5poi" // 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/5poi'>5poi</a>"
b.操作标签
// 方式一
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]) # 指定在xxx[1]前面插入 //移动
obj.appendChild(div)
//克隆
obj.cloneNode(true) true => 表示克隆里面全部东西 默认:false只克隆标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p> test 1:</p>
<div>
<input type="text" />
<input type="button" value="提交" onclick="Common(this)"/>
</div>
<div>
<ul id="commonlist">
<li>alex</li>
<li>eric</li>
</ul>
</div> <p>test 2:</p>
<div>
<input type="text" />
<input type="button" value="提交" onclick="Common2(this)"/>
</div>
<div>
<ul id="commonlist2">
<li>alex</li>
<li>eric</li>
</ul>
</div> <script type="text/javascript">
function Common(obj){
var val = obj.previousElementSibling.value;
obj.previousElementSibling.value ='' ;
var commonlist = document.getElementById('commonlist');
//形式一
var str = '<li>'+val+'</li>';
commonlist.insertAdjacentHTML('beforeEnd',str);
}
function Common2(obj){
var val = obj.previousElementSibling.value;
obj.previousElementSibling.value ='' ;
var commonlist = document.getElementById('commonlist2');
//形式二
tag = document.createElement('li');
tag.innerText = val;
// commonlist.appendChild(tag);
// commonlist.insertBefore(tag,commonlist.children[1]); var temp = document.createElement('a');
temp.innerText = '百度';
temp.href = 'http://www.baidu.com';
tag.appendChild(temp);
commonlist.appendChild(tag); } </script>
</body>
</html>
demo
5、样式操作
var obj = document.getElementById('i1')
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";
#注意转换:
background-color => backgroundColor
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.input-black{
color: black;
}
.input-gray{
color: gray;
} </style>
</head>
<body>
<input type="text" placeholder="请输入内容" />
<p>test 1:</p> <input type="text" class="input-gray" value="请输入内容" onfocus="In(this)" onblur="Out(this)"/> <script type="text/javascript">
function In(obj){
obj.className = 'input-black';
var current = obj.value;
if(current == '请输入内容'){
obj.value = '';
}
}
function Out(obj){ var current = obj.value;
if(current == '请输入内容' || current.trim().length == 0){
obj.value = '请输入内容';
obj.className = 'input-gray';
}
} </script>
</body>
</html>
demo
6、位置操作
特指整个窗口
document.documentElement 总文档高度(文档流)
document.documentElement.offsetHeight 当前文档占屏幕高度(视口高度)
document.documentElement.clientHeight 可见范围高度: (自身height+border+padding)
tag.offsetHeight 当前标签距离文档''顶部''高度(距离上级定位高度)
#如果当前标签,的父标签有position 的话 就是距离position高度
tag.offsetTop 父定位标签
tag.offsetParent 滚动条距离顶部高度 (滚动高度)
tag.scrollTop /*
clientHeight -> 可见区域：height + padding
clientTop -> border高度
offsetHeight -> 可见区域：height + padding + border
offsetTop -> 上级定位标签的高度
scrollHeight -> 全文高：height + padding
scrollTop -> 滚动高度
特别的：
document.documentElement代指文档根节点
*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.content{
height: 2000px;
}
.top{
width: 40px;
height: 40px;
background-color: burlywood;
position: fixed;
right: 20px;
bottom: 10px;
}
.hide{
display: none;
}
</style>
</head>
<body onscroll="f1()">
<div class="content"></div> <div class="top" onclick="Gotop()" id='top'>
<a href="javascript:void(0)">返回顶部</a>
</div> <script type="text/javascript">
function Gotop(){
document.body.scrollTop = 0 ;
}
function f1(){
var top = document.body.scrollTop;
var go_top = document.getElementById('top');
if(top > 100){
go_top.classList.remove('hide');
}else{
go_top.classList.add('hide');
}
} </script>
</body>
</html>
返回顶部按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
background-color: gray; }
.pg-head{
background: #000000;
height: 48px;
}
.menu{
position: absolute;
width: 180px;
left: 200px;
background-color: white;
float: left;
}
.content{
position: absolute;
width: 180px;
left: 385px;
background-color: white;
float: left;
}
.item{
background-color: white;
width: 800px;
height: 900px;
}
.pg-body .fixed{
position: fixed;
top:10px;
}
.pg-body .menu .active{
background-color: #426ebe;
color: white;
}
</style>
</head> <body onscroll="Hua();">
<div class="pg-head"></div> <div class="pg-body">
<div id='menu' class="menu">
<ul>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ul>
</div> <div id='content' class="content">
<div class="item">床前明月光</div>
<div class="item">疑是地上霜</div>
<div class="item" style="height: 100px;">举头望明月</div>
</div>
</div> <script type="text/javascript"> function Hua(){ var a = document.body.offsetHeight;
var b = document.getElementById('content').offsetHeight;
var c = document.documentElement.clientHeight; // console.log(document.body.scrollTop , document.body.clientHeight , document.body.scrollHeight );
var huagao = document.body.scrollTop;
var menu = document.getElementById('menu');
if (huagao > 48 ){
menu.classList.add('fixed');
}else{
menu.classList.remove('fixed');
} var items = document.getElementById('content').children;
for(var i=0;i<items.length;i++){
var currentItem = items[i];
// console.log(currentItem.offsetTop);
// console.log(currentItem.offsetTop , currentItem.offsetParent.offsetTop);
var currentItemBodyTop = currentItem.offsetTop + currentItem.offsetParent.offsetTop
// console.log(currentItemTop , huagao);
var currentItemWindowTop = currentItemBodyTop - huagao ;
var currentHeight = items[i].offsetHeight;
// console.log(currentItemWindowTop);
if(currentItemWindowTop < 0 && huagao < (currentHeight + currentItemBodyTop)){
menu.getElementsByTagName('li')[i].classList.add('active');
var li = menu.getElementsByTagName('li');
for(var j=0;j<li.length;j++){
if(li[j] != menu.getElementsByTagName('li')[i]){
li[j].classList.remove('active');
}
}
break;
} } //当最后一部分高度不够时!
if( (a+b) == (huagao+c) ){
var mu = document.getElementById('menu').children[0].lastElementChild;
var ac = document.getElementById('menu').children[0].getElementsByClassName('active')[0];
ac.classList.remove('active');
mu.classList.add('active');
} }
</script>
</body>
</html>
滚动菜单
7、提交表单
document.geElementById('form').submit()
8、其他操作
console.log 输出框
alert 弹出框
confirm 确认框 // URL和刷新
location.href 获取URL
location.href = "url" 重定向
location.reload() 重新加载 // 定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器 setInterval(function (){...} , 1000 ) 每1秒执行一次这个函数
三、事件
对于事件需要注意的要点：
this
event
事件链以及跳出
1.注册事件:
a. <div onxxxx=''>
b.document....on.... =function() 2.this 代指当前正在操作的标签
3.event 触发当前标签的事件内容 onkeydown='down(this,event)' console.log(e.KeyCode) 4. 自定义事件>默认事件 (优先级) 如果想要阻止后面事件发生, 需要 return false;
<a href='#' onclick = 'return Func();' ></a> 如果Func返回false 后面事件不再执行!!!!
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.logo{
background-color:red ;
height: 60px;
color:white;
font-size: 60px;
text-align: center;
}
</style>
</head>
<body>
<div id="logo" class='logo'>欢迎莅临指导</div> <script type="text/javascript"> setInterval(function f1(){ var logo = document.getElementById('logo').innerText;
var first_str = logo[0];
var sub_str = logo.slice(1,logo.length);
var new_str = sub_str + first_str;
document.getElementById('logo').innerText = new_str; },800) </script> </body>
</html>
跑马灯
练习题:
demo 1:class操作
demo 2:标签操作(多层标签嵌套)
demo 3:样式操作
demo 4:返回顶部按钮
demo 5:滚动菜单
demo 6:事件-跑马灯
1.折叠菜单:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
padding: 0;
margin: 0;
}
.father{
width: 200px;
height: 500px;
background-color: gray;
}
.hidetitle{
display:none;
}
.title{
background-color: red;
cursor: pointer;
}
.context{
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="father">
<div class="item">
<div class="title" onclick="Show(this)">菜单一</div>
<div class="context">
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
</div> <div class="item">
<div class="title" onclick="Show(this)">菜单二</div>
<div class="context hidetitle">
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
</div> <div class="item">
<div class="title" onclick="Show(this)">菜单三</div>
<div class="context hidetitle">
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
</div> <div class="item">
<div class="title" onclick="Show(this)">菜单四</div>
<div class="context hidetitle">
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
</div>
</div> <script type="text/javascript">
function Show(obj){ var pre_node = obj.parentElement;
obj.nextElementSibling.classList.remove('hidetitle'); var father = obj.parentElement.parentElement;
var all_son = father.children;
for(var i=0;i<all_son.length;i++){
if (all_son[i] != pre_node){
all_son[i].children[1].classList.add('hidetitle');
}
}
}
</script> </body>
</html>
【Python之路】第十三篇--DOM的更多相关文章
- Python之路(第二十三篇) 面向对象初级：静态属性、静态方法、类方法
一.静态属性 静态属性相当于数据属性. 用@property语法糖装饰器将类的函数属性变成可以不用加括号直接的类似数据属性. 可以封装逻辑,让用户感觉是在调用一个普通的数据属性. 例子 class R ...
- Python之路(第十三篇)time模块、random模块、string模块、验证码练习
一.time模块 三种时间表示 在Python中,通常有这几种方式来表示时间: 时间戳(timestamp) : 通常来说,时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量.(从 ...
- Python之路【第九篇】：Python操作 RabbitMQ、Redis、Memcache、SQLAlchemy
Python之路[第九篇]:Python操作 RabbitMQ.Redis.Memcache.SQLAlchemy Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用 ...
- Python开发【第二十三篇】：持续更新中...
Python开发[第二十三篇]:持续更新中...
- Python开发【第十三篇】：jQuery--无内容点击-不进去（一）
Python开发[第十三篇]:jQuery--无内容点击-不进去(一)
- Python开发【第十三篇】：jQuery（二）
http://www.bubuko.com/infodetail-1438296.html 处理完毕需要整理贴进来 Python之路[第十三篇]jQuery案例-Form表单&插件及扩展 ...
- Python之路【第一篇】python基础
一.python开发 1.开发: 1)高级语言:python .Java .PHP. C# Go ruby c++ ===>字节码 2)低级语言:c .汇编 2.语言之间的对比: 1)py ...
- 【Python之路】特别篇--ECMA对象、DOM对象、BOM对象
ECMA对象 从传统意义上来说,ECMAScript 并不真正具有类.事实上,除了说明不存在类,在 ECMA-262 中根本没有出现“类”这个词. ECMAScript 定义了“对象定义”,逻辑上等价 ...
- 【Python之路】第九篇--Python基础之线程、进程和协程
进程与线程之间的关系 线程是属于进程的,线程运行在进程空间内,同一进程所产生的线程共享同一内存空间,当进程退出时该进程所产生的线程都会被强制退出并清除.线程可与属于同一进程的其它线程共享进程所拥有的全 ...
随机推荐
- Activity具体解释（生命周期、启动方式、状态保存，全然退出等）
一.什么是Activity? 简单的说:Activity就是布满整个窗体或者悬浮于其它窗体上的交互界面. 在一个应用程序中通常由多个Activity构成,都会在Manifest.xml中指定一个主的A ...
- Java常见分页方式
1. 网站常见分页样式 采用传统的分页方式(邮件列表),可以明确的获取数据信息,如有多少条数据 分多少页显示等 采用下拉式的分页样式(QQ空间),一般无法获取明确的数据数量相关的信息,但是在分页操作之 ...
- （四）Maven构建多模块项目
在平时的Javaweb项目开发中为了便于后期的维护,我们一般会进行分层开发,最常见的就是分为domain(域模型层).dao(数据库访问层).service(业务逻辑层).web(表现层),这样分层之 ...
- C-类型转换(陷阱)
getchar() 返回值为int类型 1.自动类型转换(运算符两边变量类型不同时) 1).两个变量类型自动转换成一样的类型(会根据参数类型自动转换, 而不是直接位转换), 且运算结果也是转换后的类型 ...
- Windows下MySQL備份與還原
方法一 備份: C:\...\MySQL\MySQL Server 5.1\bin\>mysqldump aa -u root -p > d:\aaa.sql.bak 還原: C:\... ...
- Android基础新手教程——4.4.1 ContentProvider初探
Android基础新手教程--4.4.1 ContentProvider初探 标签(空格分隔): Android基础新手教程 本节引言: 本节给大家带来的是Android四大组件中的最后一个--Con ...
- C++语言基础(13)-抽象类和纯虚函数
一.基本语法 在C++中,可以将虚函数声明为纯虚函数,语法格式为: ; 纯虚函数没有函数体,只有函数声明,在虚函数声明的结尾加上=0,表明此函数为纯虚函数. 最后的=0并不表示函数返回值为0,它只起形 ...
- ubuntu 下查看某个包是否 安装
dpkg -l dpkg -l|grep package-name dpkg --status package-name 查看/var/lib/dpkg/status 内容
- java json字符串和对象互转
/** * Created by admin on 2017/7/26. */ public class NewPost { private String title; private String ...
- jquery中绑定点击事件
$("body").on("click",".tab-contentBox td",function(){}; $(".tab-c ...