JavaScript DOM
Document ObjectModel(文本对象模型)
1. 节点及其类型:
1).元素节点
2).属性节点: 元素的属性, 可以直接通过属性的方式来操作.
3).文本节点: 是元素节点的子节点, 其内容为文本.
2. 在 html 文档的什么位置编写 js 代码?
0).直接在 html 页面中书写代码.
<buttonid="button" οnclick="alert('hello world');">ClickMe!</button>
缺点:
①.js 和 html 强耦合, 不利用代码的维护
②.若 click 相应函数是比较复杂的, 则需要先定义一个函数, 然后再在 onclick 属性中完成对函数的引用, 比较麻烦
1).一般地, 不能在 body 节点之前来直接获取 body 内的节点, 因为此时html 文档树还没有加载完成,
获取不到指定的节点:
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>UntitledDocument</title>
<scripttype="text/javascript">
varcityNode = document.getElementById("city");
//打印结果为 null.
alert(cityNode);
</script>
</head>
<body>
......
2).可以在整个 html 文档的最后编写类似代码, 但这不符合习惯
3).一般地, 在 body 节点之前编写 js 代码, 但需要利用window.onload 事件,
该事件在当前文档完全加载之后被触发, 所以其中的代码可以获取到当前文档的任何节点.
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>UntitledDocument</title>
<scripttype="text/javascript">
window.οnlοad= function(){
varcityNode = document.getElementById("city");
alert(cityNode);
};
</script>
</head>
<body>
......
3. 如何来获取元素节点:
1).**document.getElementById: 根据 id 属性获取对应的单个节点
获取id 为 bj 的那个节点.
//在编写 HTML 文档时, 需确保 id 属性值是唯一的.
//该方法为 document 对象的方法
varbjNode=document.getElementById("bj");
alert(bjNode)
2).**document.getElementsByTagName:
根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度
获取所有的 li 节点.
//使用标签名获取指定节点的集合.
//该方法为 Node 接口的方法, 即任何一个节点都有这个方法.
varliNodes=document.getElementsByTagName("li");
alert(liNodes.length);
varcityNode=document.getElementById("city");
varcityLiNodes=cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);3).document.getElementsByName:
根据节点的 name 属性获取符合条件的节点数组,
根据 HTML 文档元素的 name 属性名来获取指定的节点的集合.
vargenderNodes=document.getElementsByName("gender");
alert(genderNodes.length);
但 ie 的实现方式和 W3C 标准有差别:
在 html 文档中若某节点(li)没有name 属性,
则 ie 使用 getElementsByName 不能获取到节点数组, 但火狐可以.
//若 HTML 元素自身没有定义 name 属性, 则 getElementsByName()
//方法对于 IE 无效. 所以使用该方法时需谨慎.
varbjNode2=document.getElementsByName("Beijing");
alert(bjNode2.length);
4).其它的两个方法, ie 根本就不支持, 所以不建议使用
4. 获取属性节点:
1).**可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值
//属性节点即为某一指定的元素节点的属性.
//1.先获取指定的那个元素节点
varnameNode=document.getElementById("name");
//2.再读取指定属性的值
alert(nameNode.value);
//3.设置指定的属性的值.
nameNode.value="百度";
2).通过元素节点的 getAttributeNode 方法来获取属性节点,
然后在通过nodeValue 来读写属性值
5. 获取元素节点的子节点(**只有元素节点才有子节点!!):
1).childNodes 属性获取全部的子节点, 但该方法不实用.因为如果要获取指定的节点
的指定子节点的集合, 可以直接调用元素节点的 getElementsByTagName() 方法来获取.
2).firstChild 属性获取第一个子节点
3).lastChild 属性获取最后一个子节点
//1.获取 #city 节点的所有子节点.
varcityNode=document.getElementById("city");
//2.利用元素节点的 childNodes 方法可以获取指定元素节点的所有子节点.
//但该方法不实用.
alert(cityNode.childNodes);
//3.获取 #city 节点的所有 li 子节点.
varcityLiNodes=cityNode.getElementsByTagName("li");
alert(cityLiNodes);
alert(cityLiNodes.length);
//4.获取指定节点的第一个子节点和最后一个子节点.
alert(cityNode.firstChild);
alert(cityNode.lastChild);
6. 获取文本节点:
1).步骤: 元素节点 --> 获取元素节点的子节点
2).若元素节点只有文本节点一个子节点,
例如 <li id="bj" name="BeiJing">北京</li>, <p>你喜欢哪个城市?</p>,
可以先获取到指定的元素节点 eleNode,
然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值
//文本节点一定是元素节点的子节点.
//1. 获取文本节点所在的元素节点
var bjNode=document.getElementById("bj");
//2. 通过 firstChild 定义为到文本节点
var bjTextNode=bjNode.firstChild;
//3. 通过操作文本节点的 nodeValue 属性来读写文本节点的值.
alert(bjTextNode.nodeValue);
bjTextNode.nodeValue="成都";
7. 节点的属性:
1).nodeName: 代表当前节点的名字. 只读属性.
**如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串
2).nodeType：返回一个整数, 这个数值代表着给定节点的类型.
只读属性. 1 -- 元素节点, 2 -- 属性节点, 3 -- 文本节点
**3). nodeValue：返回给定节点的当前值(字符串). 可读写的属性
①.元素节点, 返回值是 null.
②.属性节点: 返回值是这个属性的值
③.文本节点: 返回值是这个文本节点的内容
//1.元素节点的这 3 个属性
varbjNode=document.getElementById("bj");
alert(bjNode.nodeType);//元素节点: 1
alert(bjNode.nodeName);//节点名: li
alert(bjNode.nodeValue);//元素节点没有 nodeValue 属性值: null
//2.属性节点
varnameAttr=document.getElementById("name").
getAttributeNode("name");
alert(nameAttr.nodeType);//属性节点: 2
alert(nameAttr.nodeName);//属性节点的节点名: 属性名
alert(nameAttr.nodeValue);//属性节点的 nodeValue 属性值: 属性值
//3.文本节点:
vartextNode=bjNode.firstChild;
alert(textNode.nodeType);//文本节点: 0
alert(textNode.nodeName);//节点名: #text
alert(textNode.nodeValue);//文本节点的 nodeValue 属性值:文本值本身.
8. 创建一个元素节点:
1).createElement(): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数：被创建的元素节点的名字, 是一个字符串.
方法的返回值：是一个指向新建节点的引用指针.返回值是一个元素节点, 所以它的 nodeType 属性值等于 1.
**新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象.
document.createElement(elementTagName)
//新创建一个元素节点, 返回值为指向元素节点的引用
//<li></li>
varliNode = document.createElement("li");
9. 创建一个文本节点:
1).createTextNode(): 创建一个包含着给定文本的新文本节点. 这个方法的返回值是一个指向新建文本节点引用指针. 它是一个文本节点, 所以它的nodeType 属性等于 3.
方法只有一个参数：新建文本节点所包含的文本字符串. 新元素节点不会自动添加到文档里
//创建 "厦门" 的文本节点
//document.createTextNode(string)创建一个文本节点
//参数为文本值, 返回该文本节点的引用.
varxmText = document.createTextNode("厦门");
//<li>厦门</li>
liNode.appendChild(xmText);
10. 为元素节点添加子节点:
1).appendChild(): var reference = element.appendChild(newChild): 给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点.
方法的返回值是一个指向新增子节点的引用指针.
11. 节点的替换:
1).replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点
varreference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针
2).该节点除了替换功能以外还有移动的功能.
3).该方法只能完成单向替换, 若需要使用双向替换, 需要自定义函数:
/**
* 互换 aNode 和 bNode
* @param {Object} aNode
* @param {Object} bNode
*/
functionreplaceEach(aNode, bNode){
if(aNode== bNode){
return;
}
//1. 获取 aNode 和 bNode 的父节点. 使用parentNode 属性
varaParent = aNode.parentNode;
varbParent = bNode.parentNode;
if(aParent&& bParent){
//2.克隆 aNode 或 bNode
varaNode2 = aNode.cloneNode(true);
//3.分别调用 aNode 的父节点和 bNode 的父节点的 replaceChild()
//方法实现节点的互换
bParent.replaceChild(aNode2,bNode);
aParent.replaceChild(bNode,aNode);
}
}
12. 插入节点:
1).insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,targetNode);
节点 newNode 将被插入到元素节点element 中并出现在节点 targetNode 的前面.节点 targetNode 必须是 element 元素的一个子节点。
//1.把 #rl 插入到 #bj 节点的前面
varcityNode=document.getElementById("city");
varbjNode=document.getElementById("bj");
varrlNode=document.getElementById("rl");
cityNode.insertBefore(rlNode,bjNode);
2). 自定义 insertAfter() 方法
/**
* 将 newChild 插入到 refChild 的后边
* @param {Object} newChild
* @param {Object} refChild
*/
functioninsertAfter(newNode, refNode){
//1.测试 refNode 是否为其父节点的最后一个子节点
varparent=refNode.parentNode;
if(parent){
varlastNode=parent.lastChild;
//2.若是: 直接把 newNode 插入为 refNode 父节点的最后一个子节点.
if(refNode==lastNode){
parent.appendChild(newNode);
}
//3.若不是: 获取 refNode 的下一个兄弟节点, 然后插入到其下一个
//兄弟节点的前面.
else{
varnextNode=refNode.nextSibling;
parent.insertBefore(newNode,nextNode);
}
}
13. 删除节点:
1).removeChild(): 从一个给定元素里删除一个子节点
var reference =element.removeChild(node);
返回值是一个指向已被删除的子节点的引用指针. 某个节点被 removeChild() 方法删除时, 这个节点所包含的所有子节点将同时被删除.
如果想删除某个节点, 但不知道它的父节点是哪一个, parentNode 属性可以帮忙。
//测试 removeChild 方法:删除节点
window.οnlοad= function(){
//为每个li节点添加一个confirm确认对话框
varliNodes=document.getElementsByTagName("li");
for(vari=0;i<liNodes.length;i++){
liNodes[i].οnclick=function(){
varflag=confirm("确认要删除"+
this.firstChild.nodeValue+"的信息吗？");
if(flag){
this.parentNode.removeChild(this);
}
}
}
} 14. innerHTML属性:
1).浏览器几乎都支持该属性, 但不是 DOM 标准的组成部分. innerHTML 属性可以用来读, 写某给定元素里的 HTML 内容
//测试 innerHTML 属性
window.οnlοad= function(){
varcityNode=document.getElementById("city");
alert(cityNode.innerHTML);
//互换#city 节点和 #game 节点中的内容.
vargameNode=document.getElementById("game");
vartempHTML=cityNode.innerHTML;
cityNode.innerHTML=gameNode.innerHTML;
gameNode.innerHTML=tempHTML;
}15. 其它属性, 参看 API: nsextSibling, previousSibling等
1691
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
