DOM进阶

来源：互联网发布：淘宝开店新规编辑：程序博客网时间：2024/05/22 13:33

1.parentNode 属性常被用来改变文档的结构。假设您希望从文档中删除带有 id 为 "maindiv" 的节点：

var x=document.getElementById("maindiv");x.parentNode.removeChild(x);

首先，您需要找到带有指定 id 的节点，然后移至其父节点并执行 removeChild() 方法。

2.有两种特殊的文档属性可用来访问根节点：

document.documentElement
document.body

3.nodeName

nodeName 属性含有某个节点的名称。

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

注释：nodeName 所包含的 XML 元素的标签名称永远是大写的

nodeValue

对于文本节点，nodeValue 属性包含文本。

对于属性节点，nodeValue 属性包含属性值。

nodeValue 属性对于文档节点和元素节点是不可用的。

nodeType 属性可返回节点的类型。

最重要的节点类型是：

元素类型节点类型元素1属性2文本3注释8文档94.向超链接添加快捷键

document.getElementById('w3').accessKey="w"

<a id="w3" href="http://www.w3school.com.cn/">W3School.com.cn</a> （请使用 Alt + w 给该链接赋予焦点）

5.打开新窗口，并添加文本，然后关闭它。

  <script type="text/javascript">  function createNewDoc()  {  var newDoc=document.open("text/html","replace");  var txt="<html><body>学习 DOM 非常有趣！</body></html>";  newDoc.write(txt);  newDoc.close();  }</script>

6.document.write(document.anchors.length)计算锚点的数目，document.forms.length计算表单的数目

7.event.button确定鼠标的点击，为2是点击鼠标右键，为0是点击鼠标左键，为1是点击鼠标中键。

8.event.clientX，event.clientY确定光标的坐标。event.screenX，event.screenY相对于屏幕，光标的坐标。

9.event.keyCode点击键盘确定unicode

10.确定那个标签或者元素被点击了

<html><head><script type="text/javascript">function whichElement(e){var targif (!e) var e = window.eventif (e.target) targ = e.targetelse if (e.srcElement) targ = e.srcElementif (targ.nodeType == 3) // defeat Safari bug   targ = targ.parentNodevar tnametname=targ.tagNamealert("You clicked on a " + tname + " element.")}</script></head><body onmousedown="whichElement(event)"><p>在文档中点击某个位置。消息框会提示出您所点击的标签的名称。</p><h3>这是标题</h3><p>这是段落。</p><img src="/i/eg_mouse2.jpg" /></body></html>

11.event.type确定触发的事件类型

12.document.getElementById("myButton").disabled=true禁用button

13.document.getElementById("myCheck").checked=true操作复选框

14.document.getElementById("fname").value.toUpperCase()转换大小写

15.document.getElementById("myForm").reset()重置表单直接用这个，要添加form标签，不用获取text文本复制为空。

16.document.getElementById('text1').focus()，document.getElementById('text1').blur()设置焦点与失去焦点。

17.document.getElementById("myText").select()选取文本框中的内容。

18.mylist.options[mylist.selectedIndex].text获取选中的select的text值mylist.length获取select的选项的数目。document.getElementById("mySelect").multiple=true设置可以选中多个。
19.这段脚本在达到文本框的最大长度时跳到下一个文本框：

<html><head><script type="text/javascript">function checkLen(x,y){if (y.length==x.maxLength){var next=x.tabIndexif (next<document.getElementById("myForm").length){document.getElementById("myForm").elements[next].focus()}}}</script></head><body><p>这段脚本在达到文本框的最大长度时跳到下一个文本框：</p><form id="myForm"><input size="3" tabindex="1" maxlength="3" onkeyup="checkLen(this,this.value)"><input size="2" tabindex="2" maxlength="2" onkeyup="checkLen(this,this.value)"><input size="3" tabindex="3" maxlength="3" onkeyup="checkLen(this,this.value)"></form></body></html>

tabindex是设置TAB键的切换顺序，按照数字的大小有顺序切换，但是如果tabindex=1，就设置了跳过tab切换。如果值相同，以在html中的顺序为主。

20.在网页加载完全时光标就定位在文本框中

<script type="text/javascript">window.onload=function(){  if(document.readyState=="complete"){  document.getElementById("keyword").focus();  }}</script>

21. window.top.location="/example/hdom/tryjs_breakout.htm"跳出框架

22.

如果你的 URL 是/example/hdom/anchors.htm#abc这里的 #abc 就是“锚”，就是页面内部的一个标记，加在 URL 后面可以直接滚动到这个“锚”的位置。x.location.hash = y 就是设置这个锚。

23.navigator.appName，navigator.appVersion，对应浏览器名称：Netscape，浏览器版本：5

24.从select中删除一项

<script type="text/javascript">function removeOption()  {  var x=document.getElementById("mySelect")  x.remove(x.selectedIndex)  }</script>

25.选区一个单元格的文本

  var x=document.getElementById('myTable').rows[0].cells;  alert(x[0].innerHTML);

26.为表格创建标题

var x=document.getElementById('myTable').createCaption()  x.innerHTML="我的表格标题"

27.删除行

<script type="text/javascript">function deleteRow(r)  {  var i=r.parentNode.parentNode.rowIndex  document.getElementById('myTable').deleteRow(i)  }</script>

<tr>  <td>Row 1</td>  <td><input type="button" value="删除" onclick="deleteRow(this)"></td></tr>

28.添加行

function insRow()  {  var x=document.getElementById('myTable').insertRow(0)  var y=x.insertCell(0)  var z=x.insertCell(1)  y.innerHTML="NEW CELL1"  z.innerHTML="NEW CELL2"  }