访问 HTML中元素的方法

时间:2022-01-22 14:05:38

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中元素的方法