JavaScript DOM

来源：互联网发布：python经典书籍推荐编辑：程序博客网时间：2024/06/01 20:37

JavaScript DOM

Document ObjectModel(文本对象模型)

1. 节点及其类型:

1).元素节点

2).属性节点: 元素的属性, 可以直接通过属性的方式来操作.

3).文本节点: 是元素节点的子节点, 其内容为文本.

2. 在 html 文档的什么位置编写 js 代码?

0).直接在 html 页面中书写代码.

<buttonid="button" onclick="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.onload= 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.onload= function(){                            //为每个li节点添加一个confirm确认对话框                            varliNodes=document.getElementsByTagName("li");                            for(vari=0;i<liNodes.length;i++){                                   liNodes[i].onclick=function(){                                          varflag=confirm("确认要删除"+                                                        this.firstChild.nodeValue+"的信息吗？");                                          if(flag){                                                 this.parentNode.removeChild(this);                                          }                                   }                            }                     }

14. innerHTML属性:

1).浏览器几乎都支持该属性, 但不是 DOM 标准的组成部分. innerHTML 属性可以用来读, 写某给定元素里的 HTML 内容

//测试 innerHTML 属性                     window.onload= 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等

0 0