DOM中访问指定节点主要需要用到以下几个函数:
1.getElementsByTagName(tag):
(1)用来返回一个包含指定标签的节点列表NodeList。然后可以通过前面博客中提到的数组语法(方括号)或者item(pos)来取得该NodeList中具体的那个元素。看下面的代码片段:
//获得img元素列表
var oImgs = document.getElementsByTagName("img");
//获取其中的第二个img标签对应的元素
var secondImg = oImgs[1];
//获取第三个img标签对应的元素
var thirdImg = oImgs.item(2);
(2)如果需要获取某个指定标签下面的所有特定标签,比如说我们需要找到第一个ul下面的所有li元素。那么可以这么使用:
var oUls = document.getElementsByTagName("ul");
var oLis = oUls[0].getElementByTagName("li");
(3)该方法还可以通过通配需进行匹配:
document.getElementsByTagName("*");
这种情况下,会获取到页面所有的元素。但是需要注意,IE6中这么使用是无效的,需要使用下面的方法:
document.all;
2.document.getElementById():
根据标签的id属性获取页面中的标签对应的元素。这个方法非常有用。由于id属性整个页面必须是唯一的,因此这是最有效的获取单个特性节点的方法。
document.getElementById("id");
3.document.getElementsByName():
这个方法主要是为了获取name属性相同的一系列元素。非常典型的例子是radio button控件。
<form method="post" action="....">
<input type="radio" name="radioSex" value="male"/>
<input type="radio" name="radioSex" value="female"/>
</form>
document.getEementsByName("radioSex");
参考书目:
《JavaScript高级编程》Nicolas C. Zakas著, 曹力 张欣 等译。
分享到:
相关推荐
一、DOM基础1.节点(node)层次Document--最顶层的节点,所有的其他节点都是附属于它的。DocumentType--DTD引用(使用<!DOCTYPE>语法)的对象表现形式,它不能包含子节点。DocumentFragment--可以像Document...
韩顺平老师的javascript之dom编程的笔记
如果父节点没有子节点, 则firstChild和lastChild都为nullparentNode 父节点previousSibling 第一个节点的previ
文本节点4<li></li> 文本节点5<li></li> 文本节点6 <!--文本节点adsasda--> <!--元素节点 qeqweq</span>--> </body> javascript [removed] [removed]=function(){ varoUl=doc
DOM文档对象模型是HTML和XML的应用程序接口(API),DOM将整个页面规划成由节点层次构成的文档。DOM对象给予开发者对HTML的访问权限,并且使开发者能将HTML作为XML文档来处理和查看。DOM对象是与语言无关的API,意味...
3) Node类型: ①Node是DOM中各种节点类型的基类型,共享相同的基本属性和方法。 □ Node.Element_NODE(1); □ Node.ATTRIBUTE_NODE(2); □ Node.TEXT_NODE(3); □ Node.CDATA_SECTION_NODE(4); □ Node.ENTITY_RE
本文实例讲述了JavaScript学习笔记之DOM操作。分享给大家供大家参考,具体如下: 一、DOM概念 1. “D”:Docment,指的是文档 2. “O”:Object,指的是对象,在javascript有三种对象:用户定义对象、内建对象...
第1章. JQuery概述 2 1. Jquery基本作用 2 ...4. 替换节点 9 5. 包裹节点 9 6. 属性操作 9 7. 样式操作 9 8. 设置和获取html,文本和值 10 9. 遍历节点 10 10. css-DOM 操作 10 第4章. jQuery的事件 12
Dom createElement()、createTextNode()、appendChild()、removeChild()、replaceChild()、insertBefore()、createDocumentFragment() //创建新节点 function CreatNode() { var oP = document.createElement(“p”)...
html部分代码: 当点击show按钮时,触发showValue函数,将input value的值动态添加到id=”text”的元素节点中! 代码如下: <p> <...</span> </p> ”text”></p> javascript 部分代码: 页面加载时,使inpu
DOM把整个页面映射为一个多层节点结构,HTML或者XML等页面中的每个组成部分都是某种类型的节点,这些节点又包含不同类型的数据。 1.3 BOM 控制浏览器显示的页面以外的部分 二、[removed]元素
Javascript入门学习第一篇 js基础Javascript入门学习第二篇 js类型...js dom实例操作Javascript入门学习第八篇 js dom节点属性说明Javascript入门学习第九篇 Javascript DOM 总结jQuery基础教程笔记适合js新手
利用DOM方法创建元素节点,通常要将document.createElement()、document.createTextNode()、appendChild()配合使用,十分麻烦。 而jQuery使用$就可以直接创建DOM元素 代码如下: var oNewP = $(“使用jQuery创建的...
学习Javascript要分清 1. js语言本身的语法 2. DOM对象(把body,div,p等节点树看成一个对象) 3. BOM对象(把浏览器的地址栏,历史记录,DOM等庄子啊一个对象)
事件流 1.1事件冒泡(IE事件流) □事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播到较为不具体的节点(文档)。 □所有浏览器均支持事件冒泡。...
{14.4}dom4j}{207}{section.14.4} {14.5}XPath}{210}{section.14.5} {14.6}apache.commons}{211}{section.14.6} {15}sqlite3}{213}{chapter.15} {16}Web基础}{215}{chapter.16} {16.1}...
XPAGE学习笔记 1 Theme 2 2 在Xpage中使用Dojo 2 2.1 加载dojo.js 2 2.2 设置应用程序主题引入tundra.css 2 2.3 设置xpage属性引入dojo模块 3 2.4 Xpage的页面html代码 4 2.5 在xpage中使用dojo编程 4 2.5.1 按钮...
这个文档包含了HTML/css的一些基础,还有JavaScript中的基础语法、DOM、BOM还有一些学习js中面向对象、和移动web开发、AJAX、jQuery的一些总结,还有些Web前端与移动开发面试宝典; 6、什么是事件冒泡/捕获? 事件...