DOM对象，控制HTML对象

来源：互联网发布：淘宝直通车是在哪里找编辑：程序博客网时间：2024/06/11 10:30

1.getElementsByName()方法

返回带有指定名称的节点对象的集合。

语法：document.getElementsByName(name)

注意：（1）因为文档中的name属性可能不唯一，所有getElementsByName()方法返回的是元素的数组，而不是一个元素。

（2）和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

2.getElementsByTagName()方法

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

语法：document.getElementByTagName(Tagname)

说明:（1）Tagname是标签的名称，如p、a、img等标签吗

（2）和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

3.程序

<!DOCTYPE HTML><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">        <title>无标题文档</title>    </head>        <body>        <form>          请选择你爱好:<br>          <input type="checkbox" name="hobby" id="hobby1">  音乐          <input type="checkbox" name="hobby" id="hobby2">  登山          <input type="checkbox" name="hobby" id="hobby3">  游泳          <input type="checkbox" name="hobby" id="hobby4">  阅读          <input type="checkbox" name="hobby" id="hobby5">  打球          <input type="checkbox" name="hobby" id="hobby6">  跑步 <br>          <input type="button" value = "全选" onclick = "checkall();">          <input type="button" value = "全不选" onclick = "clearall();">          <p>请输入您要选择爱好的序号，序号为1-6:</p>          <input id="wb" name="wb" type="text" >          <input name="ok" type="button" value="确定" onclick = "checkone();">        </form>        <script type="text/javascript">        function checkall(){            var hobby = document.getElementsByTagName("input");            for(var i=0;i<hobby.length;i++)            {                hobby[i].checked=true;            }          // 任务1                    }        function clearall(){            var hobby = document.getElementsByName("hobby");            for(var i=0;i<hobby.length;i++)            {                hobby[i].checked=false;            }         // 任务2                        }                function checkone(){            clearall();            var hobby = document.getElementsByName("hobby");            var j=document.getElementById("wb").value;            for(var i=0;i<j.length;i++){                if(j.charAt(i)>6 || j.charAt(i)<1){                    alert("越界,请重新输入！");                    document.getElementById("wb").value="";                }            }                for(var n=0;n<j.length;n++){                                           hobby[(j.charAt(n))-1].checked=true;                 }                                }                </script>    </body></html>

4.getAttribute()方法

通过元素节点的属性名称获取属性的值。

语法：elementNode.getAttribute(name)

说明：（1）elementNode：使用getELementById()、getElementByTagName()等方法，获取到的元素节点。

（2）name:要想查询的元素节点的属性名字。

5.setAttribute()方法

setAttribute()方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

语法：elementNode.setAttribute(name,value);

说明：name:要设置的属性名 value：要设置的属性值

6.节点属性

在文档对象属性（DOM）中，每个节点都是一个对象，DOM节点有三个重要属性：nodeName：节点名称 nodeValue：节点的值 nodeType：节点的类型

（1）nodeName属性：节点的名称，是只读的。

元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

（2）nodeValue()属性：节点的值

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本自身
属性节点的 nodeValue 是属性的值

（3）nodeType类型

元素类型节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

7.访问子节点childNodes

访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组它具有length属性。

8.访问子节点的第一和最后项

（1）firstChild属性返回‘childNodes’数组的第一个节点

语法：node.firstChild

（2）lastChild属性返回‘childNodes’数组的最后一个子节点。

语法：node.lastChild

9.访问父节点parentNode

获取指定节点的父节点

语法：elementNode.parentNode

注意：父节点只能有一个

10.访问兄弟节点

（1）nextSibling 属性可返回某个节点之后紧跟的节点

语法：nodeObject.nextSibling

（2）previousSibling属性可返回某个节点之前紧跟的节点

语法：nodeObject.previousSibling

11.插入节点appendChild()

在指定节点的最后一个子节点列表之后添加一个新的子节点

语法：appendChild(newnode)

往UL标签添加一个新项PHP

var otest = document.getElementById("test");

var newcode=document.createElement("li");

newcode.innerHTML="PHP";

otest.appendChild(newcode);

</script>

12.插入节点insertBefore()

insertBefore()方法可在已有的子节点钱插入一个新的子节点。

语法：insertBefore(newnode,node);

参数：newnode：要插入的新节点 node:指定此节点前插入的节点

13.删除节点removeChild()

removeChild()方法从子节点列表中删除某个节点。如删除成功，则此方法可返回被删除的节点，如失败，则返回NULL.

语法：nodeObject.removeChild(node)

13.替换元素节点replaceChild()

replaceChild实现子节点的替换，返回被替换对象的引用。

语法：node.replaceChild(newcode,oldnew);

14.创建元素节点createElement

createElement()方法可创建元素节点，此方法可返回一个Element对象。

语法：document.createElement(tagName)

15.创建文本节点createTextNode

createTextNode()方法创建新的文本节点，返回新创建的Text节点。

语法：document.createTextNode(data)

阅读全文

0 0