访问 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: ...
随机推荐
- Windows Azure公有云服务相关方案
http://www.cnblogs.com/sennly/p/4139675.html 1.公有云平台服务简介 Windows Azure 是一个灵活而开放的云平台,通过该平台,您可以在数据中心快速 ...
- 算法导论学习-binary search tree
1. 概念: Binary-search tree(BST)是一颗二叉树,每个树上的节点都有<=1个父亲节点,ROOT节点没有父亲节点.同时每个树上的节点都有[0,2]个孩子节点(left ch ...
- C 数据结构1——线性表分析(顺序存储、链式存储)
之前是由于学校工作室招新,跟着大伙工作室招新训练营学习数据结构,那个时候,纯碎是小白(至少比现在白很多)那个时候,学习数据结构,真的是一脸茫然,虽然写出来了,但真的不知道在干嘛.调试过程中,各种bug ...
- Configure the AD FS server for claims-based authentication -zhai zi wangluo
Applies To: Microsoft Dynamics CRM 2011, Microsoft Dynamics CRM 2013 After enabling claims-based aut ...
- c++学生成绩管理系统
虽然比较水 =.= 但是写了两节课+一个中午 都是强迫症的锅 http://www.cnblogs.com/wenruo/p/4940182.html #include <cstdio> ...
- Laravel Quickstart
Installation Via Laravel Installer First, download the Laravel installer using Composer. composer gl ...
- mongodb集成spring
1:首先需要下载mongodb的java驱动包 https://github.com/mongodb/mongo-java-driver/downloads 2:需要下载spring集成mongodb ...
- webpack文档
https://github.com/liunian/webpack-doc/blob/master/SUMMARY.md
- linux中删除目录
在linux中删除一个目录很简单,很多人还是习惯用rmdir,不过一旦目录非空,就陷入深深的苦恼之中,现在使用rm -rf命令即可解决. 直接rm就可以了,不过要加两个参数-rf 即:rm -rf 目 ...
- C#Winform窗口特效源码(1)
本文基于.Net开发,使用C#作为开发语言,分别包含以下效果: 移动无边框窗口.窗口移动限制(限制在屏幕内).桌面贴边自动隐藏(仿QQ隐藏窗口) 1.移动无边框窗口 采用了消息的方式,可以实现通过窗口 ...