访问 HTML中元素的方法
http://www.w3school.com.cn/jsref/index.asp
1.document.getElementbyId(“id1”),Html中,名称是id1的元素的对象。由于要求元素的id是唯一的,所以通过getElementId()方法获得的是一个对象,而不是一个数组。
2.document.getElementbyTagName("h1"),返回所有标签为<h1>的对象的集合(他的返回值是一个数组,包括了所有标签是<h1>的集合),如果要查看当前html中有多少个<h1>元素,可以使用document.getElementbyTagName("h1").length,来获得。如果想获得特定的<h1>元素,可以通过document.getElementbyTagName("h1")[0]来获得。另外getElementbyTagName不仅仅是document的方法,也可以是其他元素的方法,表示获得其他元素内部的指定标签的元素。比如,var eventList= docuement.getElementbyId("EventList");//得到Html中id 为EventList的元素,
var li1 = eventList.getElementbyTagName("li")[0]得到 eventList标签中包含的第一个<li>标签。
3.文档的重要属性:在文档中每个节点都有一些重要的属性,最重要的是
(1).nodeType(它用来描述该节点是什么),比如这个节点是一个元素类型的节点(p,h1,li)等等,或者是一个文本(text)类型的节点,比如<h1 id=”title1”>我是标题</h1>。*当节点是元素节点时,Element.nodeType的返回值是 1;如果节点是文本类型节点时,返回值是 3;
(2).nodeName,表示的是元素的名字,比如在<body>中定义了一个<TextArea id=”myText”>元素,如果用 var myNodeName = document.getElementbyId(“myText”).nodeName;返回值是”TextArea”.
(3)nodeValue是节点的值,如果节点是一个元素,则它的nodeValue是null,如果nodeValue是文本节点,则他的值是文本的内容。
4.父节点,子节点,兄弟节点之间的访问:
(1)从父节点访问子节点:(a).yourElement.childNodes(),这是访问该父节点下面的所有子节点,返回值是一个节点的数组(NodeList)。需要取到某一个的时候,可以用[1]类似的索引取到,还可以用数组的属性取到子节点的个数等等。
(b).firstChild,lastChild顾名思义了,不多解释,但是有一点,一个节点的属性,比如nodeType,nodeName,nodeValue等等都被看成是它的子节点,所以要访问这些属性的时候,getElementbyId(“aaa”).nodeType是访问不到的,需要用 getElementbyId[“aaa”].firstChild.nodeType,才可以访问。
(2)从子节点访问父节点:parentNode,可以利用循环访问父节点
例:while(parentElm.className !=‘dynamic’&& parentElm !=’document.body’)
{
parentElm=parentElm.parentNode;
}
(3)兄弟节点之间的访问:可以使用element.previousSibling和element.nextSibling属性,访问当前节点的上一个兄弟节点和下一个兄弟节点。
5.JavaScript中访问Html标签属性的方法:
(1)用getElementById(“”)等取得节点的方法得当标签,然后 .【属性】就可以,例如:getElementsByTagName(“A”)[0].href = “color.htm”
(2)用getElementById(“”)等取得节点的方法得到标签,然后用getAttribute 或者 setAttribute设置属性值。
6.创建新节点
document.createElement(element):创建一个名字为element的新元素,需要提供一个字符串形式的元素名。
document.createTextNode(“string”):创建一个节点值为string的文本节点。
newNode = node.cloneNode(bool):创建newNode节点作为Node的副本(clone)
node.appendChild(newNode):将newNode作为子节点,添加在node所有子节点后。
node.insertBefore(newNode,oldNode):在node节点的子节点oldNode之前插入newNode.
node.removeChild(oldNode):移除node节点的子节点oldNode
访问 HTML中元素的方法的更多相关文章
- JAVA中循环删除list中元素的方法总结【转】
印象中循环删除list中的元素使用for循环的方式是有问题的,但是可以使用增强的for循环,然后今天在使用时发现报错了,然后去科普了一下,再然后发现这是一个误区.下面就来讲一讲..伸手党可直接跳至文末 ...
- java中循环删除list中元素的方法
重点哈 印象中循环删除list中的元素使用for循环的方式是有问题的,但是可以使用增强的for循环,然后今天在使用时发现报错了,然后去科普了一下,再然后发现这是一个误区.下面就来讲一讲..伸手党可直接 ...
- javascript 获取父页面中元素对象方法
父页面中: <input type="hidden" id="areaID" value="test1"> <iframe ...
- Java中循环删除list中元素的方法总结
印象中循环删除list中的元素使用for循环的方式是有问题的,但是可以使用增强的for循环,然后在今天使用的时候发现报错了,然后去科普了一下,发现这是一个误区.下面我们来一起看一下. Java中循环遍 ...
- js删除数组中元素的方法
一.清空数组 var ary = [1,2,3,4]; ary.splice(0,ary.length);//清空数组 console.log(ary); // 输出 [],空数组,即被清空了 二.删 ...
- python删除列表中元素的方法
删除列表中元素的三种方法-remove.pop.del 1 1.remove: 删除单个元素,删除首个符合条件的元素,按值删除 2 举例说明: 3 >>> str=[1,2,3,4, ...
- JS实现循环删除数组中元素的方法介绍
这篇文章主要给大家介绍了关于Javascript循环删除数组中元素的几种方法,文中给出了详细的示例代码供大家参考学习,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧. 本文主要跟大家分享了 ...
- JAVA中循环删除list中元素的方法总结(同上篇)
印象中循环删除list中的元素使用for循环的方式是有问题的,但是可以使用增强的for循环,然后今天在使用时发现报错了,然后去科普了一下,再然后发现这是一个误区.下面就来讲一讲..伸手党可直接跳至文末 ...
- vue学习(五) 访问vue内部元素或者方法
//html <div id="app"> <input type="button" value="ok" v-bind: ...
随机推荐
- 【原创】Hadoop机架感知对性能调优的理解
Hadoop作为大数据处理的典型平台,在海量数据处理过程中,其主要限制因素是节点之间的数据传输速率.因为集群的带宽有限,而有限的带宽资源却承担着大量的刚性带宽需求,例如Shuffle阶段的数据传输不可 ...
- mongodb基础系列——数据库查询数据返回前台JSP(一)
经过一段时间停顿,终于提笔来重新整理mongodb基础系列博客了. 同时也很抱歉,由于各种原因,没有及时整理出,今天做了一个demo,来演示,mongodb数据库查询的数据在JSP显示问题. 做了一个 ...
- [转]JQuery判断浏览器类型版本1.9和2.0之后的区别
转至:http://zhidao.baidu.com/link?url=Nzk2aSxBKRZKYg9Evqn8hLwMyXTI-4jza-zCAZq4Vd6hWCOHIvuBX6yj8hzDYDrf ...
- DataTable 导出到 Excel 类
底层类: #region DataTable 导出到 Excel /// <summary> /// DataTable 导出到 Excel /// </summary> // ...
- C# webkit.net的简单使用
webkit.net 0.5下载地址https://sourceforge.net/projects/webkitdotnet/files/WebKit%20.NET%200.x/0.5/WebK ...
- CSS-div漂浮
显示效果如下: 代码如下: <div style="width:100%;border-top:0px solid #999999;"> <div style=& ...
- java并发 使用ScheduledExecutor的温室控制器--thinking in java 21.7.5
package org.rui.thread.newc; import java.text.DateFormat; import java.text.SimpleDateFormat; import ...
- [Javascript] Adding Shapes to Maps with Leaflet and GeoJSON
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 从本地上传整个目录到hdfs的java程序
首先在网上找了好久没有找到从本地文件系统上传整个目录到hdfs文件系统的程序,权威指南上也没有,都是单个文件上传,所以这里自己编写了一个程序,封装成jar包执行能够复制. 先说明一下代码:须要手动输入 ...
- 标准I/O库之标准I/O的效率
程序清单5-1 用getc和putc将标准输入复制到标准输出 #include "apue.h" int main( void ) { int c; while(( c = get ...