JavaScript DOM 操作详解-CSDN博客

本文链接：https://blog.csdn.net/linmen1983/article/details/3934050

javascript

2008-02-27 14:59

getElementById
语法：
oElement = document.getElementById(sID)
参数：
sID :　必选项。字符串(String)。
返回值：
oElement :　对象(Element)。
说明：
根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一个。
如果无符合条件的对象，则返回 null 。
getElementsByName
<input type=checkbox value=2>2
<input type=checkbox value=1>1
<script>
var arr = document.getElementsByTagName("input"); //取得所有input,返回就是数组.
alert(arr[0].value); //取第一个input的值.
</script>

详细讲解JavaScript脚本语言的 document 对象
对象属性
代码

   1. document.title              //设置文档标题等价于HTML的<title>标签
   2. document.bgColor            //设置页面背景色
   3. document.fgColor            //设置前景色(文本颜色)
   4. document.linkColor          //未点击过的链接颜色
   5. document.alinkColor         //激活链接(焦点在此链接上)的颜色
   6. document.vlinkColor         //已点击过的链接颜色
   7. document.URL                //设置URL属性从而在同一窗口打开另一网页
   8. document.fileCreatedDate    //文件建立日期，只读属性
   9. document.fileModifiedDate   //文件修改日期，只读属性
10. document.fileSize           //文件大小，只读属性
11. document.cookie             //设置和读出cookie
12. document.charset            //设置字符集简体中文:gb2312

对象方法
代码

   1. document.write()                   //动态向页面写入内容
   2. document.createElement(Tag)        //创建一个html标签对象
   3. document.getElementById(ID)        //获得指定ID值的对象
   4. document.getElementsByName(Name)   //获得指定Name值的对象

images集合(页面中的图象)

a)通过集合引用
代码

   1. document.images              //对应页面上的<img>标签
   2. document.images.length       //对应页面上<img>标签的个数
   3. document.images[0]           //第1个<img>标签
   4. document.images[i]           //第i-1个<img>标签

b)通过nane属性直接引用
代码

   1. <img name="oImage">
   2.     document.images.oImage       //document.images.name属性

c)引用图片的src属性
代码

   1. document.images.oImage.src   //document.images.name属性.src

d)创建一个图象
代码

   1. var oImage
   2. oImage = new Image()
   3. document.images.oImage.src="/1.jpg"

同时在页面上建立一个<img>标签与之对应就可以显示
代码

   1. <html>
   2. <img name=oImage>
   3. <script language="javascript">
   4.     var oImage
   5.     oImage = new Image()
   6.     document.images.oImage.src="/1.jpg"
   7. </script>
   8. </html>

forms集合(页面中的表单)

a)通过集合引用
代码

   1. document.forms                  //对应页面上的<form>标签
   2. document.forms.length           //对应页面上<form>标签的个数
   3. document.forms[0]               //第1个<form>标签
   4. document.forms[i]               //第i-1个<form>标签
   5. document.forms[i].length        //第i-1个<form>中的控件数
   6. document.forms[i].elements[j]   //第i-1个<form>中第j-1个控件

b)通过标签name属性直接引用
代码

   1. <form name="Myform"><input name="myctrl"></form>
   2. document.Myform.myctrl          //document.表单名.控件名

代码

   1. <html>
   2. 
   3. <form name="Myform">
   4. <input type="text" name="oText">
   5. <input type="password" name="oPswd">
   6. <form>
   7. <script language="javascript">
   8. //获取文本密码框的值
   9. document.write(document.Myform.oText.value)
10. document.write(document.Myform.oPswd.value)
11. </script>
12. </html>

代码

   1. <html>
   2. 
   3. <form name="Myform">
   4. <select name="oSelect">
   5. <option value="1">1</option>
   6. <option value="2">2</option>
   7. <option value="3">3</option>
   8. </select>
   9. </form>
10.
11. <script language="javascript">
12.     //遍历select控件的option项
13.     var length
14.     length=document.Myform.oSelect.length
15.     for(i=0;i<length;i++)
16.     document.write(document.Myform.oSelect[i].value)
17. </script>
18.
19. <script language="javascript">
20.     //遍历option项并且判断某个option是否被选中
21.     for(i=0;i<document.Myform.oSelect.length;i++){
22.     if(document.Myform.oSelect[i].selected!=true)
23.     document.write(document.Myform.oSelect[i].value)
24.     else
25.     document.write("<font color=red>"+document.Myform.oSelect[i].value+"</font>")
26.     }
27. </script>
28.
29. <script language="javascript">
30.     //根据SelectedIndex打印出选中的option
31.     //(0到document.Myform.oSelect.length-1)
32.     i=document.Myform.oSelect.selectedIndex
33.     document.write(document.Myform.oSelect[i].value)
34. </script>
35.
36. <script language="javascript">
37.     //动态增加select控件的option项
38.     var oOption = document.createElement("OPTION");
39.     oOption.text="4";
40.     oOption.value="4";
41.     document.Myform.oSelect.add(oOption);
42. </script>
43. <html>

代码

   1. <Div id="oDiv">Text</Div>
   2.   document.all.oDiv                        //引用图层oDiv
   3.   document.all.oDiv.style
   4.   document.all.oDiv.style.display=""       //图层设置为可视
   5.   document.all.oDiv.style.display="none"   //图层设置为隐藏

/*document.all表示document中所有对象的集合
只有ie支持此属性，因此也用来判断浏览器的种类*/

主要概述一下一些有用的基础的DOM的方法以及怎样用使用javascript使用它们。
可以实现比如动态地新建控制移动HTML元素。
Document 对象的常用方法

1、getElementById(id)
通过元素的ID访问元素，这是DOM一个基础的访问页面元素的方法，我们要经常用到它.
例如下面的例子，我们可以同DIV的ID迅速的访问到它，而不必通过DOM层层遍历，
<body>
<div id='divid'><p>h</p>
Just for testing;
</div>
<div id='divid'>
Just for testing;
</div>
<script>
var div=document.getElementById('divid');
alert(div.nodeName);
</script>
</body>
注意使用这个函数时如果元素的ID不是唯一的，那么会获得第一个符合条件的元素。
在IE6中如果input、checkbox,radio. 等元素name匹配指定的ID，也会被访问到
例如下面的例子中，获得的元素是input：
<body>
<input name='divid' type="text"/>
<div id='divid'>
    Just for testing;
</div>
<script>
   var div=document.getElementById('divid');
   alert(div.nodeName);
</script>
</body>

2、getElementsByName(name)
返回名字是name的元素数组，在IE6中元素ID匹配这个名字的话，这个元素也将包括在内，而且getElementsByName()仅用于象input,radio,checkbox等元素对象。
象下面例子中georges数组的长度应该是0。
<body>
<div name="george">f</div>
<div name="george">f</div>
<script. type="text/javascript">
var georges=document.getElementsByName("george");
alert(georges.length);
</script>
</body>

3、getElementsByTagName(tagname)
getElementByTagName 可以用于DOCUMENT也可以用元素。getElementsByTagName返回具有指定tagname的子元素列表（数组）。你可以遍历这个数组获得每一个单独的子元素。当处理很大的DOM结构，使用这种方法可以很容易的所有缩小范围。
<html>
<head>
<title></title>
<script>
    function start() {
        // 获得所有tagName是body的元素（当然每个页面只有一个）
       myDocumentElements=document.getElementsByTagName("body");
       myBody=myDocumentElements.item(0);
        // 获得body子元素种的所有P元素
        myBodyElements=myBody.getElementsByTagName("p");
        // 获得第二个P元素
        myP=myBodyElements.item(1);
       //显示这个元素的文本
        alert(myP.firstChild.nodeValue);
    }
</script>
</head>
<body nload="start()">
<p>hi</p>
<p>hello</p>
</body>
</html>

DOM Element 常用方法

1、appendChild(node)
向当前节点对象的追加节点。经常用于给页面动态的添加内容。
例如下面给div添加一个文本节点：
<div id="test"></div>
<script. type="text/javascript">
var newdiv=document.createElement("div")
var newtext=document.createTextNode("A new div")
newdiv.appendChild(newtext)
document.getElementById("test").appendChild(newdiv)
</script>
上面的例子中给DIV添加文本，也可以用newdiv.innerHTML=”A new div”实现，
不过innerHTML不属于DOM

2、removeChild(childreference)
移除当前节点的子节点，返回被移除的节点。这个被移除的节点可以被插入document树中别的地方
<div id="father"><div id="child">A child</div></div>
<script. type="text/javascript">
var childnode=document.getElementById("child")
var removednode=document.getElementById("father").removeChild(childnode)
</script>

3、cloneNode(deepBoolean)
复制并返回当前节点的复制节点，这个复制得到的节点是一个孤立的节点，不在document树中。复制原来节点的属性值，包括ID属性，所以在把这个新节点加到document之前，一定要修改ID属性，以便使它保持唯一。当然如果ID的唯一性不重要可以不做处理。
这个方法支持一个布尔参数，当deepBoolean设置true时，复制当前节点的所有子节点，包括该节点内的文本。
<p id=”mypara”>11111</p>
p=document.getElementById("mypara")
pclone = p.cloneNode(true);
p.parentNode.appendChild(pclone);

4、replaceChild(newChild, oldChild)
把当前节点的一个子节点换成另一个节点
例如：
<div id="adiv"><span id="innerspan">span</span></div>
<script. type="text/javascript">
var ldel=document.getElementById("innerspan");
var newel=document.createElement("p");
var text=document.createTextNode(“ppppp”);
newel.appendChild(text);
document.getElementById("adiv").replaceChild(newel, oldel);
</script>

5、insertBefore(newElement, targetElement)
       给当前节点插入一个新节点，如果targetElement被设置为null，那新节点被当作最后一个子节点插入，否则那新节点应该被插入targetElement之前的最近位置。
<body>
<span id="lovespan">熊掌我所欲也!</span>
</body>
<script. type="text/javascript">
var lovespan=document.getElementById("lovespan")
var newspan=document.createElement("span")
var newspanref=document.body.insertBefore(newspan, lovespan)
newspanref.innerHTML="鱼与";
</script>

6、click()
执行元素的一次点击，可以用于通过脚本来触发onClick函数
<script>
function wow() {
alert("我好象没有点鼠标啊");
}
</script>
<div id="test" nclick=’wow()’>hhh</div>
<script. type="text/javascript">
var div = document.getElementById("test");
div.click();
</script>

DOM Element的属性:（下面是常用的。IE5.0以上,mozllia都支持的）

1、childeNodes 返回所有子节点对象,
例如
<table id="mylist">
<tr><td>一个和尚有水喝。</td></tr>
<tr><td>两个和尚挑水喝。</td></tr>
<tr><td>三个和尚没水喝。</td></tr>
</table>
<script>
var msg=””
var mylist=document.getElementById("mylist")
for (i=0; i<mylist.childNodes.length; i++){
   var tr=mylist.childNodes[i];
   for(j=0;j<tr.childNodes[j].length; j++) {
      var td=tr.childNodes[j];
      msg+=td.innerText;
   }
}
alert(msg);
</script>

2、innerHTML
这是一个事实上的标准，不属于w3c DOM，但是几乎所有支持DOM的浏览器，都支持这个属性。通过这个属性我们很容易修改一个元素的HTML。
<p><b>新人类，什么？！</b></p>
<script. type="text/javascript">
window.onload=function(){
document.getElementsByTagName("p")[0].innerHTML="<b>新新人类，什么？！</b>"
}
</script>

3、style
返回一个元素的style对象的引用，通过它我们可以获得并修改每个单独的样式。
例如下面的脚本可以修改一个元素的背景色
document.getElementById("test").style.backgroundColor="yellow"

4、firstChild    返回第一个子节点

5、lastChild     返回最后一个子节点

6、parentNode   返回父节点的对象。

7、nextSibling   返回下一个兄弟节点的对象

8、previousSibling 返回前一个兄弟节点的对象

9、nodeName 返回节点的HTML标记名称，使用英文的大写字母，如P, FONT

例如
<div id=’test’>ddd</div>
<script>
if (document.getElementById("test").nodeName=="DIV")
   alert("This is a DIV");
</script>

第一个例子：
使用DOM1.0   的javascript动态地创建一个HTML table。
<head>
<title>Sample code </title>
<script>
    function start() {
//获得body的引用
        var mybody=document.getElementsByTagName("body").item(0);
//创建一个<table></table>元素
        mytable = document.createElement("TABLE");
//创建一个<TBODY></TBODY>元素
        mytablebody = document.createElement("TBODY");
// 创建行列
        for(j=0;j<3;j++) {
//创建一个<TR></TR>元素
            mycurrent_row=document.createElement("TR");
            for(i=0;i<3;i++) {
//创建一个<TD></TD>元素
                mycurrent_cell=document.createElement("TD");
//创建一个文本元素
                currenttext=document.createTextNode("cell is row "+j+", column "+i);
//把新的文本元素添加到单元TD上
                mycurrent_cell.appendChild(currenttext);
// appends the cell TD into the row TR
//把单元TD添加到行TR上
                mycurrent_row.appendChild(mycurrent_cell);
            }
//把行TR添加到TBODY上
            mytablebody.appendChild(mycurrent_row);
        }
// 把 TBODY 添加到 TABLE
        mytable.appendChild(mytablebody);
// 把 TABLE 添加到 BODY
        mybody.appendChild(mytable);
// 把mytable的border 属性设置为2
        mytable.setAttribute("border","2");
    }
</script>
</head>
<body nload="start()">
</body>

</html>

首先，我们创建一个table元素
接着，创建一个TBODY元素，它应该是TABLE元素的子元素，
但是现在现在它们之间没有联系。
接着，使用一个循环创建TR元素，它们应该是TBODY元素的子元素。
对于每一个TR，我们使用一个循环创建TD元素，它们是TR的子元素。
对于每一个TD，我们创建一个文本节点元素
现在，我们创建好了这些TABLE, TBODY, TR, TD还有文本元素，但是它们之间的层级
关系并没有建立起来。然后我们以上相反的顺序把每一个对象添加到它的父节点上。
mycurrent_cell.appendChild(currenttext);
mycurrent_row.appendChild(mycurrent_cell);
mytablebody.appendChild(mycurrent_row);
mytable.appendChild(mytablebody);
现在DOM层次如下:
                    BODY
                      |
                   TABLE
                      |
                   TBODY
                      |
      TR-------------------TR------------------TR
       |               |              |

TD-----TD-----TD TD-----TD-----TD TD-----TD-----TD

js dom相关