DOM进阶

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
文档 9
4.向超链接添加快捷键
   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 targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
   targ = targ.parentNode
var tname
tname=targ.tagName
alert("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.tabIndex
	if (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"
  }









阅读更多
个人分类: 前端开发
上一篇UI设计技术
下一篇高级前端开发技术练级攻略
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭