首页 > 代码库 > JavaScript的DOM（文档对象）基础语法总结1

JavaScript的DOM（文档对象）基础语法总结1

2024-08-27 21:49:07   217人阅读

---恢复内容开始---

前言：HTML文档可以说由节点构成的集合，DOM节点有:

        1）. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。

        2）. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

        3）. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。

  1、节点属性:

技术分享

 

2、遍历节点树:

技术分享

 

3、DOM操作:

技术分享

 

4、getElementsByName()方法

//语法
document.getElementsByName(name)

注意:

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

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

//例子
function getnum(){
  var mynode=document.getElementsByName("myt")         ;  
  alert(mynode.length);
}
</script>
<input name="myt" type="text" value=http://www.mamicode.com/"1">
<input name="myt" type="text" value=http://www.mamicode.com/"2">
<input name="myt" type="text" value=http://www.mamicode.com/"3">
<input name="myt" type="text" value=http://www.mamicode.com/"4">
<input name="myt" type="text" value=http://www.mamicode.com/"5">
<input name="myt" type="text" value=http://www.mamicode.com/"6">
<input type="button" onclick="getnum()" value=http://www.mamicode.com/"看看有几项？" />
//获取 name 为 myt 的元素，同时输出获取的元素节点的长度。

 

5、getElementsByTagName()方法：返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

//语法
document.getElementsByTagName(Tagname)

说明:

1）Tagname是标签的名称，如p、a、img等标签名。

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

//例子
function getnum(){
  var mynode=document.getElementsByTagName("input") ;  
  alert(mynode.length);
}
</script>
<input type="text" value=http://www.mamicode.com/"1">
<input  type="text" value=http://www.mamicode.com/"2">
<input  type="text" value=http://www.mamicode.com/"3">
<input type="button" onclick="getnum()" value=http://www.mamicode.com/"看看有几个input标签？" />
//获取input标签，同时输出获取的元素节点的长度。

 

JavaScript的DOM（文档对象）基础语法总结1


联系
我们