<!--
DOM document object model 文档对象模型
用来将标记型文档封装成对象 并将标记型 文档中的所有内容(标签 文本 属性等)都封装成对象
封装成对象的目的是更为方便的操作这些文档以及文档中的所有内容
因为对象的出现就可以有属性和行为被调用
文档对象模型
文档：标记型文档
对象：封装了属性和行为的实例 可以被直接调用
模型：所有标记型文档都具备一些共性特征的一个体现
标记型文档(标签 属性 标签中封装的数据)
只要是标记型文档DOM这种技术都可以对其进行操作
常见的标记型文档 html xml
DOM这种技术是如何对标记型文档进行操作
要操作标记型文档必须对其进行解析
"lisi,ww,666";
DOM技术的解析方式 将标记型文档解析成一棵DOM树 并将树中的内容都封装成节点对象
注意 这个DOM解析方式的好处 可以对树中的节点进行任意操作 比如:增删改查
弊端 这种解析 需要将整个标记型文档加载进内存 意味着 如果标记型文档的体积很大 较为浪费内存空间
简介另一种解析方式 SAX 是由一些组织定义的一种民间常用的解析方式 并不是W3C的标准 而DOM是W3C的标准
SAX解析的方式 基于事件驱动的解析 获取数据的速度很快 但是不能对标记进行增删改动作 不回头一次性往下读
DOM模型有三种
DOM level 1 将html 文档封装成对象
DOM level 2 将在level 1 基础上加入了新功能 比如解析名称空间
DOM level 3 将xml文档封装成了对象
DHTML (dynamic)动态的HTML 不是一门语言 是多项技术综合体的简称
其中包含了HTML CSS DOM Javascript
这四个技术在动态html页面 效果定义时 都处于什么样的角色呢？ 负责什么样的职责
html 负责提供标签 对数据进行封装 目的是便于对该标签中的数据进行操作
简单说 用标签封装数据
css 负责提供样式属性 对标签中的数据进行样式的定义
简单说 对数据进行样式定义
dom 负责将标签型文档以及文档中的所有内容进行解析 并封装成对象 在对象中定义了更多的属性和行为 便于对对象操作
简单说 将文档和标签以及其他内容变成对象
js 负责提供程序设计语言 对页面中的对象进行逻辑操作
简单说 负责页面的行为定义 就是页面的动态效果
所以javascript 是动态效果的主力编程语言
DHTML+XMLhttpRequest(和服务器通讯) = AJAX
BOM： Browser Object Model 浏览器对象模型
这个模型方便于操作浏览器
浏览器对应的对象就是window对象 这个可以通过查阅dhtml api获得
-->
<div >div区域</div>
<dl>
<dt>上层</dt>
<dd>下层</dd>
</dl>
<table xmlns="http://www.sinna.com">
<tbody>
<tr>
<th>表头</th>
<td>单元格</td>
</tr>
</tbody>
</table>
<table xmlns="http://www.baidu.com">//域名不同唯一 为了区别 名称空间
<body>
<!--
定义一个事件源 通过对事件源的触发 获取想要的结果
比如让用户通过点击按钮就可以知道浏览器的一些信息
处理一个或少量的脚本放在body里面 很多就放头加载优先
-->
<!--定义按钮onclick事件的处理方式 -->
<script type="text/javascript">
//定义一函数
function windowdemo()
{
//alert("window");
//想要知道这个浏览器的信息就需要使用window对象中的navigator
document.write(window.navigator.appName);
document.write(window.navigator.appVersion);
}
//演示location 地址栏
function windowObjDemo()
{
//document.write(location.protocol);
var text = location.href;
//alert(text);
//给location 的href属性设置一个值 改变了地址栏的值 并对其值进行了解析 如果是http还进行连接访问
location.href="http://www.baidu.com";
}
function windowMethod()
{
//var b = confirm("确定点击");
//alert(b);
//setTimeout("alert('ss')",4000);//4秒后执行
timeid = setInterval("alert('interval')",2000);//2秒运行一次
}
function stopMethod()
{
clearInterval(timeid);
}
function windowMove()
{
// alert("hh");
//window.moveBy(21,11) ;//现在是多标签所以不能整体移动 要拖出来
/*for(var x= 0; x<50;x++){
moveBy(20,0);
moveBy(0,20);
moveBy(-20,0);
moveBy(0,-20);
}*/
}
function windowOpen()
{
window.open("ad.html","_blank","height=200,width=400,status=no,toolbar=no,menubar=no,location=no");//ie6以上不支持隐藏地址栏
}
</script>
<!--window中的常见方法 -->
<input type="button" value="window中的方法" onclick="windowOpen()" />
<input type="button" value="停止" onclick="stopMethod()" />
<!--定义事件源 注册事件管理的动作-->
<input type="button" value="演示window中的对象" onclick="windowObjDemo2()" />
</body>
<script type="text/javascript">
/*
onunload=function()
{
alert("onunload run");
}
onload = function()
{
alert("onload run");
}
onbeforeunload = function()
{
alert("onbeforeunload run");
}*/
/*onload = function()
{
window.status="加载完毕了";
}*/
/*
演示弹窗广告效果
页面加载完执行
在当前页面定义脚本 可以在onload事件中完成广告的弹窗
*/
onload = function()
{
open("ad.html","_blank","height=100px");
}
</script>
<body>
<!--
document对象
该对象将标记型文档进行封装
该对象的作用 是对标记型文档进行操作
最常见的操作就是 想要实现动态效果 需要对节点操作 那么要先获取到这个节点
要想获取节点 必须要先获取到节点所属的文档对象 document
所以document对象最常见的操作就是 获取页面中的节点
获取节点的方法体现
1、getElementById();通过标签的id属性值获取该标签节点 返回该标签节点对象
2、getElementsByName();通过标签的name属性获取节点 因为name有相同 所以返回的是一个数组
3、getElementsByTagName();通过标签名获取节点 因为标签名会重复 所以返回的是一个数组
凡是带s的返回的都是数组
-->
<script type="text/javascript">
function getNode()
{
/*
获取页面中的div节点
思路
通过document对象完成 因为div节点有id属性 所以可以通过id属性来完成
*/
//节点都有三个必备属性 节点名称 节点类型 节点值
var node = document.getElementById("divid");
//document.write(node.nodeName);
/*
常见节点有三种
1、标签型节点 类型1
2、属性节点 类型2
3、文本节点 类型3
标签型节点是没有值的 属性和文本节点是可以有值的
*/
//获取div节点中的文本
var text = node.innerHTML;//html适用性更广
//alert(text);
node.innerHTML="如果是你";
//获取文本框节点 getElementsByName方法
var tnode = document.getElementsByName("user")[0];
//alert(tnode.nodeName+tnode.value);
//var tnode1 = document.getElementsByName("user");
//alert(tnode1[0].nodeName+tnode1[0].value);
//获取超链接节点对象 演示getElementsByTagName方法
//直接用标签名获取
var nodes = document.getElementsByTagName("a");
for(var x= 0; x<nodes.length;x++)
{
//alert(nodes[x].innerHTML);
nodes[x].target="_blank";//每个超链接都设置为空白页打开
}
//alert(nodes.nodeName);
}
/*
对于页面中的超链接 新闻连接通过新窗口打开 门户网站在当前页面打开
当然是要获取其中被操作的超链接对象
可是通过document对象获取超链接 拿到的是页面中所有的超链接
只想获取一部分该怎么办？
只要获取到被操作的超链接所属的节点即可
再通过这个节点获取到他里面的所有的超链接节点
*/
function getNodeDemo()
{
//获取超链接所属的div节点
var divNode = document.getElementById("newid");
//通过div对象方法的查找发现它也具备getElementsByTagName方法
//记住 所有的容器型标签都具备这个方法 在该标签范围内获取指定名称的标签
var aNodes = divNode.getElementsByTagName("a");
for(var x= 0;x<aNodes.length;x++)
{
//alert(aNodes[x].innerHTML);
aNodes[x].target="_blank";
}
}
</script>
<input type="button" value="document对象获取节点" onclick="getNodeDemo()" />
<div id="divid">这是个div</div>
<input type="text" name="user"/>
<a href="http://www.baidu.com" >baidu</a><!--获取标签名-->
<div id="newid">
<a href="http://www.xx.com">新闻1</a>
<a href="http://www.xx.com">新闻2</a>
<a href="http://www.xx.com">新闻3</a>
</div>
</body>
1510
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
