webdev2014
- 浏览: 684169 次
-
文章分类
最新评论
DOM知识
01-DOM
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOM</title> </head> <body> <!-- DHTML: 动态HTML ，它不是新的技术，它是几个技术的综合体 包含的技术如下： HTML: 使用HTML中的标签 将数据封装起来，方便操作 CSS : 将封装好的数据 进行样式美化 JavaScript: 处理页面中复杂的业务逻辑 DOM : 将页面中数据(标签、属性、文本) 通过 DOM解析， 解析成对象。 这时，可以通过对象。属性 对象。方法 来操作数据 原理： 将页面中的数据加载到内存中， 经过解析， 会产生结果： DOM树 DOM: document object model 文档对象模型 将页面中数据(标签、属性、文本) 通过 DOM解析， 解析成对象。 DOM树中的节点就是转换后的对象 BOM: browser object model 浏览器对象模型 对应就是DHTML中 Window对象 Window对象 : 代表浏览器中一个打开的窗口 主要包含的对象： document 代表给定浏览器窗口中的 HTML 文档。 history 包含了用户已浏览的 URL 的信息。 location 包含关于当前 URL 的信息。 navigator 包含关于 Web 浏览器的信息。 --> </body> </html>02-BOM
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BOM</title>
</head>
<body>
<!-- Window对象 -->
<script type="text/javascript">
/*
alert 显示包含由应用程序自定义消息的对话框。
confirm 显示一个确认对话框，其中包含一个可选的消息和确定取消按钮。
prompt 显示一个提示对话框，其中带有一条消息和一个输入框。
语法：window.prompt( [sMessage] [, sDefaultValue])
*/
//window.alert("alert run");
//alert("alert run");//window对象 是可以省略不写的
//----------------------------------
//var flag = window.confirm("哥们，你是男的吗？");
//alert(flag);
//--------------------------------------
//var result = window.prompt("请输入您的电话号码：",18888888888);
//alert(result);
</script>
<!-- navigator对象 -->
<script type="text/javascript">
/*
appName 获取浏览器的名称。
appVersion 获取浏览器运行的平台和版本。
platform 获取用户的操作系统名称。
*/
var name = window.navigator.appName;
var version = window.navigator.appVersion;
var platform = navigator.platform;
//alert(name);
//alert(version);
//alert(platform);
</script>
<!-- location对象 -->
<script type="text/javascript">
/*
host 设置或获取 location 或 URL 的 hostname 和 port 号码。
hostname 设置或获取 location 或 URL 的主机名称部分。
href 设置或获取整个 URL 为字符串
port 设置或获取与 URL 关联的端口号码。
*/
var host = location.host;
var hostname = location.hostname;
var port = location.port;
var href = location.href;
//alert(host);
//alert(hostname);
//alert(port);
//alert(href);
</script>
<!-- history对象 -->
<script type="text/javascript">
/*
back 从历史列表中装入前一个 URL。
forward 从历史列表中装入下一个 URL。
go 从历史列表中装入 URL。
*/
</script>
<a href="history.html">超链接</a>
</body>
</html>
03-document对象获取对象方式
<!--
通过document对象如何获取节点（对象）
三种方式：
getElementById 获取对 ID 标签属性为指定值的第一个对象的引用。
通过标签中的 ID属性值 来获取对应的节点(对象),
返回值几个？ 只有一个
所以，我们的ID属性的值 在页面中要唯一.
getElementsByName 根据 NAME 标签属性的值获取对象的集合。
通过标签中 name属性值 来获取对应的节点（对象）
返回值几个？ 结果：一个或者多个
getElementsByTagName 获取基于指定元素名称的对象集合
通过标签的名字 来获取对应的节点（对象）
返回值几个？ 结果：一个或者多个
方法：
getAttribute 获取指定标签属性的值
当使用该方法得到指定属性的值(初始值)的时候，有个前提： 指定的属性必须先在html标签中使用
属性：
value 设置或获取控件对象的显示值。当控件对象提交时此值将返回给服务器。
innerHTML 设置或获取位于对象起始和结束标签内的 HTML。
innerText 设置或获取位于对象起始和结束标签内的文本。
-->
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>如何通过document获取数据</title>
<script type="text/javascript">
function demo1(){
//通过ID的方式找到节点对象
var node = document.getElementById("username");
//alert(node);
//得到value属性值 通过方法的方式(可能会出现问题)
//var value = node.getAttribute("id");
//alert(value);
//得到value属性值 通过属性的方式
var value = node.value;
alert(value);
}
function demo2(){
//通过name的值 来获取节点对象
var nodes = document.getElementsByName("username");
//alert(nodes);
//nodes 它一个存储多个元素的集合，数组
//alert(nodes.length);
var value = nodes[0].value;
alert(value);
}
function demo3(){
//通过标签名来获取节点对象
var nodes = document.getElementsByTagName("input");
//alert(nodes.length);
alert( typeof(nodes) );
var value = nodes[0].value;
alert(value);
}
function demo4(){
//找到p节点
var pNode = document.getElementById("pid");
//var value = pNode.innerHTML;
//var value = pNode.innerText;
//alert(value);
/*
innerHTML 与 innerText区别?
innerHTML 解析字符串中html标签
innerText 不能够解析html标签
*/
pNode.innerHTML = "<font color='red'>今天真开心</font>";
//pNode.innerText = "<font color='red'>今天不开心</font>";
}
</script>
</head>
<body>
用户名称：<input type="text" name="username" id="username" placeholder="请输入用户名称" /><br />
用户密码：<input type="password" name="password" id="password" /><br />
<hr />
<input type="button" value="通过ID获取节点的值" onclick="demo1()" />
<input type="button" value="通过NAME获取节点的值" onclick="demo2()" />
<input type="button" value="通过TAG获取节点的值" onclick="demo3()" />
<hr />
<p id="pid">获取P标签中的文字</p>
<input type="button" value="获取P中文字" onclick="demo4()" />
</body>
</html>
04-NodeCURD
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>节点的增删改查</title>
<!--加入样式表-->
<style type="text/css">
div {
border:#0099FF 1px solid;
height:60px;
width:120px;
margin:20px 0px 20px 20px;
padding:10px 0px 0px 20px;
}
#div_1{
background-color:#00FFFF;
}
#div_2{
background-color:#FF3399;
}
#div_3{
background-color:#0000FF;
}
#div_4{
background-color:#FFFF66;
}
</style>
<script type="text/javascript">
function addNode(){
/*
思路：
找到需要添加数据的标签 div_1
创建文本节点 div区域1
将 文本节点 添加到 div_1 中
*/
//找到div_1
//var divNode = document.getElementById("div_1");
//创建文本节点
//var textNode = document.createTextNode("div区域1");
//将文本节点 添加到指定DIV中
//divNode.appendChild( textNode );
//-------------------------------------
/*
将超链接标签 添加到div1中
<a href="http://www.baidu.com">百度</a>
*/
var divNode = document.getElementById("div_1");
//创建标签
var aNode = document.createElement("a");//<a></a>
//添加属性
aNode.setAttribute("href","http://www.baidu.com");//<a href="http://www.baidu.com"></a>
//为标签内部添加文本
aNode.innerText = "百度";//<a href="http://www.baidu.com">百度</a>
//将 超链接节点 添加到指定的DIV中
divNode.appendChild( aNode );
}
function deleteNode(){
/*
思路：
找到DIV2
删除
*/
//方式一
//var divNode = document.getElementById("div_2");
//divNode.removeNode(true);
//方式二
var divNode = document.getElementById("div_2");
//找到div2的父节点
var parentDivNode = divNode.parentNode;
//通过父节点 删除指定的 子节点
parentDivNode.removeChild( divNode );
}
function updateNode(){
/*
需求：
将文本节点 div区域3 替换成 哈哈
需要找到div3
通过div3 找到内部文本 div区域3
创建文本节点 哈哈
将div区域3 替换成 哈哈
*/
//方式一
//需要找到div3
//var divNode = document.getElementById("div_3");
//找到DIV3中所有的子节点
//var childNodes = divNode.childNodes;
//在子节点集合中 找到 div区域3 节点
//var childNode = childNodes[0];//div区域3
//创建文本节点 哈哈
//var newTextNode = document.createTextNode("哈哈");
//将div区域3 替换成 哈哈
//childNode.replaceNode( newTextNode );
//---------------------------------------------------
//方式二：
//需要找到div3
var divNode = document.getElementById("div_3");
//找到DIV3中所有的子节点
var childNodes = divNode.childNodes;
//在子节点集合中 找到 div区域3 节点
var childNode = childNodes[0];//div区域3
//创建文本节点 哈哈
var newTextNode = document.createTextNode("哈哈");
//通过div区域3节点的 父节点 来实现 div区域3 被替换成 哈哈
divNode.replaceChild(newTextNode, childNode);
}
function copyNode(){
/*
需求：
div4 克隆到 div1
找到div1、div4
克隆div4，产生新节点
将新节点 替换 div1
*/
//找到div1、div4
var divNode1 = document.getElementById("div_1");
var divNode4 = document.getElementById("div_4");
//克隆div4，产生新节点
var cloneNode = divNode4.cloneNode(true);
//将新节点 替换 div1
var parentNode = divNode4.parentNode;
//替换 div1
parentNode.replaceChild( cloneNode, divNode1);
}
</script>
</head>
<!--
创建节点：
createElement 为指定标签创建一个元素的实例。 <a></a>
createTextNode 从指定值中创建文本字符串。 文本对象
添加节点：
appendChild 给对象追加一个子元素。
删除节点：
removeNode 从文档层次中删除对象。
(自杀) 如果设置参数true，同时删除子节点
removeChild 从元素上删除子结点。
(他杀) 删除节点的同时 也会删除子节点
替换节点：
replaceChild 用新的子元素替换已有的子元素。
replaceChild(oNewNode, oChildNode)
replaceNode 用其它元素替换对象。
克隆：
cloneNode 从文档层次中复制对对象的引用。
方法：
setAttribute 设置指定标签属性的值。
属性：
parentNode 获取文档层次中的父对象。
集合：
childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。
-->
<body>
<div id="div_1">
</div>
<div id="div_2">
div区域2
</div>
<div id="div_3">
div区域3
</div>
<div id="div_4">
div区域4
</div>
<hr />
<input type="button" value="创建并添加节点" onclick="addNode()" />
<input type="button" value="删除节点" onclick="deleteNode()" />
<input type="button" value="替换节点" onclick="updateNode()" />
<input type="button" value="克隆节点" onclick="copyNode()" />
</body>
</html>
05-Font
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻广告</title>
<style type="text/css">
<!-- 伪元素选择器 -->
a:link,a:visited {
color:#FF9900;
text-decoration:none;
font-size:15px;
}
a:hover {
color:#0099FF;
}
.newsstyle {
border:#0099FF 1px solid;
font-size:16px;
width:400px;
}
/*
预先定一些选择器
*/
.max {
border:#0099FF 1px solid;
font-size:20px;
color:#FF0000;
background-color:#CCFFFF;
width:400px;
}
.min {
border:#0099FF 1px solid;
font-size:12px;
color:#0000FF;
background-color:#FFFFFF;
width:400px;
}
</style>
<script type="text/javascript">
function changeMax(){
var divNode = document.getElementById("newstext");
divNode.style.fontSize = "20px";
}
function changeMiddle(){
var divNode = document.getElementById("newstext");
divNode.style.fontSize = "16px";
}
function changeSmall(){
var divNode = document.getElementById("newstext");
divNode.style.fontSize = "12px";
}
//---------------------------------------
//优化的方法 实现了 避免代码重复
function changeSize(size,color){
var divNode = document.getElementById("newstext");
divNode.style.fontSize = size;
divNode.style.color = color;
}
//-----------------------------------
//专业版 实现js代码与css代码分离
function changeStyle(style){
var divNode = document.getElementById("newstext");
divNode.className = style;
}
</script>
</head>
<!--
取消超链接默认的访问效果：
href="#" 锚标记 不专业
javascript:void(0) 专业 javascript解析引擎
style 代表了给定元素所有可能的内嵌样式的当前设置。
fontSize 设置或获取对象文本使用的字体大小。
className 设置或获取对象的类。
-->
<body>
<h2>这是一个大新闻.</h2>
<a href="javascript:void(0)" onclick="changeStyle('max')">大字体</a>
<a href="javascript:void(0)" onclick="changeStyle('newsstyle')">中字体</a>
<a href="javascript:void(0)" onclick="changeStyle('min')">小字体</a>
<hr />
<div id="newstext" class="newsstyle">
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
</div>
</body>
</html>
06-List
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>好友列表</title>
<style type="text/css">
table {
border:#0099FF 1px solid;
width:100px;
border-collapse:collapse;
}
table td{
border:#0066FF 1px solid;
background-color:#FF9900;
text-align:center;
}
table td div {
background-color:#FFFF99;
text-align:left;
}
table td a:link, table td a:visited {
color:#00ffFF;
text-decoration:none;
}
table td a:hover {
color:#00CC00;
}
/*
使用display属性:如果取值为none就是隐藏标签。
*/
table td div {
display:none;
}
.open {
display:block;
}
.close {
display:none;
}
</style>
<script type="text/javascript">
function openDiv(node){
/*
<td>
<a href="javascript:void(0)" onclick="openDiv(this)">君王好友</a>
<div>
秦始皇<br />
刘邦<br />
李世民<br />
康熙<br />
</div>
</td>
先找到A标签
找到TD
在TD中 找到div
设置div 显示 隐藏
*/
//先找到A标签,找到TD
//var tdNode = node.parentNode;
//在TD中 找到div
//var divNode = tdNode.getElementsByTagName("div")[0];
//设置div 显示 隐藏
//divNode.style.display = "block";
//if(divNode.style.display == "block"){
// divNode.style.display = "none";
//} else {
// divNode.style.display = "block";
//}
//---------------------------------------------------------
/*
当前列表中，同时 只用一项列表可以打开
思路：
先找到所有DIV
隐藏所有的DIV
将点击的DIV显示
*/
//找到表格
var tableNode = document.getElementsByTagName("table")[0];
//找到表格中的所有div
var divNodes = tableNode.getElementsByTagName("div");
//找到点击的DIV
//先找到A标签,找到TD
var tdNode = node.parentNode;
//在TD中 找到div
var divNode = tdNode.getElementsByTagName("div")[0];
//隐藏所有的DIV
for(var x=0; x<divNodes.length; x++){
//将当前的DIV隐藏
//divNodes[x].style.display = "none";
//将点击的DIV显示， 其他的DIV隐藏
//判断当前DIV 是否是 点击的DIV
if(divNodes[x] == divNode){
//显示
//divNodes[x].style.display = "block";
divNodes[x].className = "open";
} else {
//隐藏
//divNodes[x].style.display = "none";
divNodes[x].className = "close";
}
}
}
</script>
</head>
<!--
样式：
display 设置或获取对象是否要渲染
值：
显示：
block 块级元素 效果： 换行
inline 行内元素 不换行
隐藏：
none
-->
<body>
<table>
<tr>
<td>
<a href="javascript:void(0)" onclick="openDiv(this)">君王好友</a>
<div>
秦始皇<br />
刘邦<br />
李世民<br />
康熙<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="openDiv(this)">三国好友</a>
<div>
刘备<br />
关羽<br />
张飞<br />
赵云<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="openDiv(this)">美女好友</a>
<div>
西施<br />
貂蝉<br />
杨贵妃<br />
王昭君<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="openDiv(this)">IT好友</a>
<div>
马云<br />
李开复<br />
俞敏洪<br />
黎活明<br />
</div>
</td>
</tr>
</table>
</body>
</html>
07-Table
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格的操作</title>
<style type="text/css">
table {
border:#0099FF 1px solid;
width:500px;
border-collapse:collapse;
}
table th, table td {
border:#0099FF 1px solid;
padding:10px 0px 10px 10px;
}
table th {
background-color:#00CCFF;
}
.one {
background-color:#CCFF66;
}
.two {
background-color:#3300FF;
}
.over {
background-color:#FF0000;
}
#click {
background-color:#CC33CC;
}
</style>
<script type="text/javascript">
function trColor(){
//alert("trColor");
//获取表格
var tableNode = document.getElementsByTagName("table")[0];
//获取表格中所有的tr
//var tableNode.getElementsByTagName("tr");
var trNodes = tableNode.rows;
//行变色
for(var x=1; x<trNodes.length; x++){
if(x%2 == 0){
//指定颜色
trNodes[x].className = "one";
} else {
//指定另一种颜色
trNodes[x].className = "two";
}
//上一次的tr样式
var oldStyle = "";
//鼠标进入tr
trNodes[x].onmouseover = function(){
oldStyle = this.className;
this.className = "over";
}
//鼠标移出tr
trNodes[x].onmouseout = function(){
this.className = oldStyle;
}
}
}
</script>
</head>
<!--
隔行变色
获取所有行
行 %2 进行颜色的指定
高亮显示
事件：
onload 在浏览器完成对象的装载后立即触发。
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmouseover 当用户将鼠标指针移动到对象内时触发。
集合：
rows 获取来自于 table 对象的 tr (表格行)对象的集合。
-->
<body onload="trColor()">
<table align="center">
<tr>
<th>电影名称</th>
<th>电影介绍</th>
<th>主演名单</th>
</tr>
<tr>
<td>变形金刚</td>
<td>很不错的电影</td>
<td>机器人</td>
</tr>
<tr>
<td>唐伯虎点秋香</td>
<td>非常好的电影</td>
<td>周星驰,巩俐</td>
</tr>
<tr>
<td>东邪西毒</td>
<td>群星云集的电影</td>
<td>张国荣,梁朝伟...</td>
</tr>
<tr>
<td>少林足球</td>
<td>最厉害的足球电影</td>
<td>周星驰,赵薇</td>
</tr>
<tr>
<td>赌神</td>
<td>小马哥演绎赌神</td>
<td>周润发</td>
</tr>
<tr>
<td>大话西游</td>
<td>超级搞笑的电影</td>
<td>周星驰</td>
</tr>
<tr>
<td>疯狂的石头</td>
<td>一部让人大笑不止的电影</td>
<td>黄渤</td>
</tr>
</table>
</body>
</html>
history
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>history</title>
<script type="text/javascript">
function demo(){
window.history.back();
}
function gogo(){
history.go(-1);
//a-->b-->c
}
</script>
</head>
<body>
<h1>history</h1>
<input type="button" value="back" onclick="demo()" />
<input type="button" value="go" onclick="gogo()" />
</body>
</html>
分享到：
发表评论
相关推荐
html练习之DOM知识---银行系统 html练习之DOM知识---银行系统 html练习之DOM知识---银行系统 html练习之DOM知识---银行系统 html练习之DOM知识---银行系统 html练习之DOM知识---银行系统 html练习之DOM知识---银行...
DOM知识结构 Xmind思维导图 帮助各位更好的学习DOM知识点。
javascript DOM知识点汇总，需要使用xmind编辑器打开，内部附有xmind下载路径
javascript DOM知识点汇总，（需要使用xmind打开），xmind软件下载地址:
Dom知识结构-xmind思维导图.xmind
学多点，了解细致，刚学js，吸收消化不好，dom模块要了解清楚.........
dom基本知识详解dom基本知识详解dom基本知识详解dom基本知识详解dom基本知识详解dom基本知识详解dom基本知识详解
讲解网页制作中的DOM部分知识很形象，很容易就理解了，很实用的资料。
史上最详细的DOM笔记，最全DOM操作详解。
html当中DOM知识的小练习。 节点练习。 html当中DOM知识的小练习。 html当中DOM知识的小练习。 html当中DOM知识的小练习。 html当中DOM知识的小练习。html当中DOM知识的小练习。
DOM 精简知识教程
DOM4J很全的学习资料知识点讲解加上例子，总结的很详细。对学习DOM4J很有帮助，可作为入门 也可以作为参考资料
文章目录HTML DOM 访问（方法）节点的类型节点的四个属性元素节点使用事件HTML DOM 导航 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model） function Focus(){ //console.log(‘Focus’)...
最近我在做一些有用到DOM的练习时，发现自己的DOM知识非常零散(一直以为掌握的很好)，可能有很多朋友都觉得，DOM嘛，也就调用调用几个方法，或者我直接使用jQuery，根本不用考虑DOM的细节。是，这也没错，jQuery对...
DOM1级定义了一个Node接口，该接口是由DOM中的所有节点类型实现。每个节点都有一个nodeType属性，用于表明节点的类型，节点类型在Node类型中有以下几种： Node.ELEMENT_NODE(1); 元素节点 Node.ATTRIBUTE_NODE(2); ...
日期对象Date() 计算机纪元年 : 1970.01.01 每一个创建出来的date对象都记录着那一刻的时间 doc getTime()可以计算时间间隔(ms) var start = new Date().getTime(); for (var i = 0; i ) {} var end = new Date()...
今天我们来讲一下Dom在ajax技术中的作用．当你使用ajax向服务端发出请求，并返回数据到客户端时．你是怎么 将这些返回的数据显示到网页上...否则你就应该好好学习一下Dom知识了！ 甚至你网页中的表格都可以使用Dom进行
Dom知识结 构.xmind eXBB-vcjqFOt-26069.xmind Java-知识 点总结.xmind kvHi-jcnIDKz-30159.xmind 下面挑选个 别模板的截图以供参考 （注：截图仅展示部分，有些大模板中，虽然字体看似比较小，但 均为Xmind格式，在...
当页面加载时，浏览器会创建页面的文档对象模型（Document Object Model）。文档对象模型定义访问和处理HTML文档的标准方法，本篇文章给大家介绍javascript dom 学习总结(五)，感兴趣的朋友一起学习吧
主要特点： * 可以同时上传多个文件；...在使用SWFUpload之前，请确认你具备一定的JavaScript和DOM知识。在实际开发中，大部分的错误都是由于错误的设置和低劣的Event Handlers处理程序所造成的。