温习javascript DOM编程-阿里云开发者社区

温习javascript DOM编程

2011-02-09 667

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Code: 复习Dom操作 #newTest { color...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>复习Dom操作</title>
<style type="text/css">
#newTest
{
color:Red;
}
</style>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
// //jQuery写法--页面加载完成
// $(document).ready(function () {
// });
// //可以简写成
// $(function () {
//
// });
//标准js中的写法 --页面加载完成
window.onload = function () {
var root = document.documentElement; //DOM根节点 --文档节点
var farDIV = document.getElementById("farther"); //根据ID获得DOM的“元素节点”
//元素节点的一些常用的属性
//document.getElementsByTagName("")//根据元素(标签)名称获得DOM的“元素节点”(可能是单个或一组)
//document.getElementsByName("")//根据name属性获得DOM的“元素节点”(可能是单个或一组)
var idNode = farDIV.getAttributeNode("id"); //获得属性为id的“属性节点”
//注意：不要把 getAttribute("id")和getAttributeNode("id")搞混了，前者获取的是属性的值，后者获取的属性节点
var textNode = farDIV.firstChild; //farDIV的第一个子节点
//DOM中常用的属性
//属性（其实只在属性节点中定义才有效）
//farDIV.attributes;//返回该节点的所有属性对象的数组
//节点名称
// alert(root.nodeName + ":" + farDIV.nodeName + ":" + idNode.nodeName + ":" + textNode.nodeName);
//nodeType(不支持IE)有五种，分别代表：标签(元素)节点，属性节点，文本节点，根节点，注释节点
//alert(root.nodeType + ":" + farDIV.nodeType + ":" + idNode.nodeType + ":" + textNode.nodeType);
//节点值
//alert(root.nodeValue + ":" + root.nodeValue + ":" + idNode.value + ":" + textNode.nodeValue);
//根节点的一些常用属性 -- 创建新节点
var newNode = document.createElement("div"); //创建一个div节点
var text = document.createTextNode("这是我手动创建的"); //创建一个文本节点
newNode.appendChild(text); //将文本节点插入div节点中
var attrNode = document.createAttribute("id"); //创建属性节点，属性名为“id”
newNode.setAttributeNode(attrNode); //将newNode节点的属性节点设置为attrNode
newNode.setAttribute("id", "newTest"); //设置newNode节点的id属性设置为newTest
//var comment = document.createComment("我是注释");//创建注释节点
//获取页面中的body标签所在节点
var body = root.lastChild; //获取root的最后一个子节点
body.appendChild(newNode); //将新建的节点插入body中
//如果添加成功，则CSS会生效（字体变红，ID选择器有效）
//获取元素的属性 alert(farDIV.id); alert(farDIV.getAttribute("id"));
alert(newNode.getAttribute("id")); //HTML中获取节点的属性 -- 在XHTML中的可以简写：alert(newNode.id); //
//动态的创建表格
//1.可以使用与上面类似的方式，创建节点、拼接、插入... 但是这样操作似乎很麻烦
//2.可以使用更加简单的操作方式
};
</script>
</head>
<body>
<div id="farther">我是父div</div>
</body>
</html>

温习javascript DOM编程

热门文章

最新文章

相关课程

相关电子书

相关实验场景