JavaScript DOM编程艺术学习总结
JavaScript语言中的对象可以分为三种类型:
=======================================
①. 用户自定义对象.
②. 内建对象. [如Window Array Math Date等]
③. 宿主对象. 由浏览器提供的对象
如何将一个HTML文档在你的脑袋映射成一棵DOM树? [很重要,这个地方搞不懂,下边就不用浪费时间看了....其实很简单]
|
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<body>
<h1>
Here~
</h1>
<div id="newsList">
<p>n1</p>
<p>n2</p>
<p>n3</p>
</div>
</body>
</html>
|
能把上边的HTML内容在脑海中映射成下边的样子就算明白什么叫DOM了,了解一些基本术语
[html] --> 名称:根节点,一棵树中只能有一个根节点一个根节点有若干子节点,孙子节点等等...
|
-------------------------------------
| |
[head] [body] -->> head与body节点都是html的子节点,另外他们分别又有自己的子节点
| |
------------- --------------------
| | | |
[title] [meta] [h1] [div @id="newsList"] -->> 此DIV拥有一个属性节点
| | | |
标题 meta文本节点 Here~ -----------
| | |
[p] [p] [p] -->> 三个兄弟节点
| | |
n1 n2 n3 -->> 文本节点
DOM 相关
==========================================
1. 一份文档就是一棵节点树 [文档中的每一个节点都是一个对象!]
2. 节点分为不同的类型: 元素节点, 属性节点, 文本节点等
3. getElementById()
* 方法将返回一个对象, 该对象对应着文档里一个特别的元素节点
4. getElementByTagName()
调用形式:元素对象.getElementsByTagName(tag)//其中tag可以是通配符例如"*"
* 注意该方法与getElementById的结合使用.
* 该方法将返回一个对象数组,它们分别对应着文档里的每一个特别元素节点, 这些节点中的每个都是一个对象
例子:
|
/**
* @todo getElementByTagName()应用场景
* 是否需要为HTML页面每一个元素定义一个ID?不用!
*/
<div id="content">
<div>title</div>
<div>
<p>para1</p>
<p>para2</p>
<p>para3</p>
</div>
</div>
<script>
/**
* @todo 返回指定ID的对象引用
* @example
var divId = $("元素的ID");
*/
function $(id) {
return document.getElementById(id);
}
//如果想获得content DIV下的所有P标签怎么做?
var contentId = $("content");
/**
* 这样就可以获得节点id为content下的所有P标签对象数组!
*/
contentId.getElementsByTagName("p");
</script>
|
5 getAttribute()与setAttribute()
* 此方法只能通过一个元素节点对象调用它不能过用document对象调用
例子:
|
<html>
<head>
<title>Title</title>
</head>
<body>
<p id="title">Title</p>
<ul id="userList">
<li title="user 1~~">User1</li>
<li title="user 2~~">User2</li>
<li>User3</li>
</ul>
</body>
</html>
<script>
/**
* @todo 返回指定ID的对象引用
* @example
var divId = $("元素的ID");
*/
function $(id) {
return document.getElementById(id);
}
// 获得ID为 title 的对象引用
var titleId = $("title");
document.write("id为title的类型为 : " + typeof(titleId));
var arLi = document.getElementsByTagName("li");
for(i=0; i<arLi.length; i++) {
//返回的都是对象
alert(i + " : " +typeof(arLi[i]));
//获得每一个li节点的title属性值
var liAttrTitle = arLi[i].getAttribute("title");
if(liAttrTitle != null) alert(liAttrTitle);
else arLi[i].setAttribute("title", "新加的值");
}
// 获得文档中一共有多少个节点
alert(document.getElementsByTagName("*").length);
</script>
|
6. childNodes属性 => 返回类型为数组
* 可以让我们从给定文档的节点树里把任何一个元素的所有子元素检索出来.
7. nodeType属性 => 返回指定节点的类型
* nodeType一共有十二种可取值,其中元素节点[1], 属性节点[2], 文本节点[3]最为
实用(方括号中的数字指的是元素节点的类型值)
例子:
|
/**
* @todo 返回HTML当中body元素下所有的子节点个数及所有子节点的类型
*/
function countBodyChildren() {
var bodyElement = document.getElementsByTagName("body")[0];
var bodyChildren = bodyElement.childNodes;
var childNodesLen = bodyChildren.length;
alert("body的节点统计:" + childNodesLen);
for(i=0; i<childNodesLen; i++) {
var childNodeType = bodyChildren[i].nodeType;
if(childNodeType == 1) {
alert("元素节点");
}else if(childNodeType == 2) {
alert("属性节点");
}else if(childNodeType == 3) {
alert("文本节点");
}else{
alert("其他类型节点");
}
}
}
|
8. nodeValue 返回或设置文本节点的值
如下HTML片段
内容
用以下方法获得文本节点的内容?
|
<script>
contentId = $("content");
alert(contentId.childNodes[0].nodeValue); //返回节点值内容
alert(contentId.firstChild.nodeValue='test');//修改了节点节
// *note: childNodes[0]为第一个节点 等同于 firstChild属性
</script>
|
如何让JS在页面加载完成之后执行一些初始化JS方法?
我觉得下边这种使用形式最好,为window.onload属性绑定一个匿名方法,
在这个匿名方法当中执行一些初始化方法
|
window.onload = function() {
myFunc();
myFunc1(para); //可以有参数多好 #_#!
myFunc2(para1, para2);
}
window.onload=myFunc;
|
另外如下方法也可以:
|
function addLoadEvent(func) {
var oldOnload = window.onload;
if(typeof(window.onload != 'function')) {//如果window.onload的值不是一个方法
window.onload = func;
} else {//在这里会递归调用
window.onload = function() {
oldOnload();
func();
}
}
}
|
DOM的常用属性与方法:
方法:
|
1. getElementById()
2. getElementsByTagName()
3. getAttribute()
4. setAttribute()
5. createElement()
6. createTextNode()
7. appendChild()
8. insertBefore()
|
属性:
|
1. nodeName
2. nodeType
3. childNodes
4. nextSibling
5. parentNode
6. firstChild
7. lastChild
|
非DOM标准部份
阅读(2781) | 评论(1) | 转发(0) |
