DOM进阶

最新推荐文章于 2020-11-16 12:51:05 发布

子心

最新推荐文章于 2020-11-16 12:51:05 发布

阅读量559

点赞数

分类专栏：前端开发文章标签：文档 function button safari 浏览器 input

本文链接：https://blog.csdn.net/muzixin1990520/article/details/6872412

版权

前端开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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 οnmοusedοwn="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" οnkeyup="checkLen(this,this.value)">
<input size="2" tabindex="2" maxlength="2" οnkeyup="checkLen(this,this.value)">
<input size="3" tabindex="3" maxlength="3" οnkeyup="checkLen(this,this.value)">
</form>
</body>
</html>

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

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

<script type="text/javascript">
window.οnlοad=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="删除" οnclick="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"
  }

子心

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM进阶

1.parentNode 属性常被用来改变文档的结构。假设您希望从文档中删除带有 id 为 "maindiv" 的节点：var x=document.getElementById("maindiv");x.parentNode.removeChild(x); 首先，您
复制链接

扫一扫