您的位置:首页 > Web前端 > JavaScript

JavaScript的DOM(文档对象)基础语法总结1

2016-12-18 13:33 666 查看
---恢复内容开始---

前言: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="1">
<input name="myt" type="text" value="2">
<input name="myt" type="text" value="3">
<input name="myt" type="text" value="4">
<input name="myt" type="text" value="5">
<input name="myt" type="text" value="6">
<input type="button" onclick="getnum()" value="看看有几项?" />
//获取 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="1">
<input  type="text" value="2">
<input  type="text" value="3">
<input type="button" onclick="getnum()" value="看看有几个input标签?" />
//获取input标签,同时输出获取的元素节点的长度。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: