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>
<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>
<!--
通过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获取节点的值" οnclick="demo1()" />
<input type="button" value="通过NAME获取节点的值" οnclick="demo2()" />
<input type="button" value="通过TAG获取节点的值" οnclick="demo3()" />
<hr />
<p id="pid">获取P标签中的文字</p>
<input type="button" value="获取P中文字" οnclick="demo4()" />
</body>
</html>
<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="创建并添加节点" οnclick="addNode()" />
<input type="button" value="删除节点" οnclick="deleteNode()" />
<input type="button" value="替换节点" οnclick="updateNode()" />
<input type="button" value="克隆节点" οnclick="copyNode()" />
</body>
</html>
<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)" οnclick="changeStyle('max')">大字体</a>
<a href="javascript:void(0)" οnclick="changeStyle('newsstyle')">中字体</a>
<a href="javascript:void(0)" οnclick="changeStyle('min')">小字体</a>
<hr />
<div id="newstext" class="newsstyle">
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
</div>
</body>
</html>
<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)" οnclick="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)" οnclick="openDiv(this)">君王好友</a>
<div>
秦始皇<br />
刘邦<br />
李世民<br />
康熙<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="openDiv(this)">三国好友</a>
<div>
刘备<br />
关羽<br />
张飞<br />
赵云<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="openDiv(this)">美女好友</a>
<div>
西施<br />
貂蝉<br />
杨贵妃<br />
王昭君<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="openDiv(this)">IT好友</a>
<div>
马云<br />
李开复<br />
俞敏洪<br />
黎活明<br />
</div>
</td>
</tr>
</table>
</body>
</html>
<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 οnlοad="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>
<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" οnclick="demo()" />
<input type="button" value="go" οnclick="gogo()" />
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
