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()方法
注意:
1)因为文档中的 name 属性可能不唯一,所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。
2)和数组类似也有length属性,可以和访问数组一样的方法来访问,从0开始。
5、getElementsByTagName()方法:返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
说明:
1)Tagname是标签的名称,如p、a、img等标签名。
2)和数组类似也有length属性,可以和访问数组一样的方法来访问,所以从0开始。
前言: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标签,同时输出获取的元素节点的长度。
相关文章推荐
- JavaScript的DOM(文档对象)基础语法总结2
- JavaScript基础语法、dom操作树及document对象
- JavaScript的BOM(浏览器对象)基础语法总结
- JavaScript的内置对象(Date日期+string字符串)基础语法总结
- JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
- 第一百一十三节,JavaScript文档对象,DOM基础
- JavaScript面向对象基础语法总结
- JavaScript基础——文档对象模型(DOM)
- JavaScript基础语法、dom操作树及document对象
- JavaScript DOM基础总结
- javascript基础部分(四)DOM和内置对象
- JavaScript 文档对象模型(DOM)
- JavaScript 文档对象模型(DOM)
- javascript 基础学习整理 二 之 html对象总结,参考W3C
- JavaScript基础语法测试代码,覆盖JavaScript五大对象和function!
- 栋栋晓09:Javascript学习总结:基础知识1(语法、关键字和保留字、变量、数据类型、操作符)
- JavaScript之 ------ 文档对象模型(DOM)
- javascript 文档对象模型(DOM)
- javascript核心技术 DOM 文档对象模型
- JavaScript学习笔记(09)之文档对象模型DOM