JavaScript初识(一):获取节点

JavaScriopt DOM有三大节点:元素节点、属性节点、文本节点。

其中获取元素节点的三种主要方法有:

1.document.getElementById();此方法根据节点的唯一id值获取节点。

  如<li id = "hamigua">哈密瓜</li>,document.getElementById("hamigua");

2.document.getElementByTagName();此方法根据节点的标签名获取节点。

  如<li></li>标签,document.getElementByTagName("li");

3.document.getElementByName();此方法根据节点的name属性获取节点。

  如<input type = "text" name = "n_hamigua" value = "哈密瓜"/>,document.getElementByName("n_hamigua");

  但是这个方法只能获取有name属性的节点,如<li name = "li_hamigua"></li>,document.getElementByName(li_hamigua);是获取不到的,使用时应注意这个问题。

而属性节点和文本节点都是需要先获取到元素节点之后,再获取。

属性节点:<input type = "text" id = "input_hamihua" value = "value_hamigua"/>;document.getElementById("input_hamigua").getAttributeNode("value");

这样才可以获取到input标签的value属性, 即获取到"value_hamigua"这个属性值。

文本节点:<li id = "li_hamigua">哈密瓜</li>;document.getElementById("li_hamigua").firstChild;

这样才可以获取到input标签的文本节点,即获取到"哈密瓜"这个文本值。

在这里解释一下三个节点的区别:

  ①元素节点:类似于<body></body>、<li></li>、<input/>这样的节点。

  ②属性节点:类似于<input type="text" name="text"/>中的"name=‘text‘"这样的节点。

  ③文本节点:类似于<li>HelloWorld</li>中的"HelloWorld"这样的节点。

时间: 2024-11-02 01:48:48

JavaScript初识(一):获取节点的相关文章

JavaScript的DOM_获取节点的类型

node 节点类型:节点可以分为元素节点.属性节点和文本节点,而这些节点又有三个非常有用的属性,分别为:nodeName.nodeType 和 nodeValue. <script type="text/javascript"> window.onload = function(){ var box = document.getElementById('box'); alert(box); //[object HTMLDivElement]元素节点对象 alert(box.

JavaScript的DOM_获取元素方法_getElementsByTagName()获取相同元素的节点列表

不管是 getElementById 还是 getElementsByTagName,在传递参数的时候,并不是所有浏览器都必须区分大小写,为了防止不必要的错误和麻烦,我们必须坚持养成区分大小写的习惯. 一.通过标签名获取节点 1.getElementsByTagName()方法通过标签名获取节点,因为标签名会重复,所以返回一个对象数组 HTMLCollection(NodeList),这个数组保存着所有相同元素名的节点列表. <script type="text/javascript&qu

JavaScript的DOM_获取元素方法_getElementsByName()获取相同名称(name)的节点列表

一.通过标签的name属性获取节点 1.getElementsByName()方法通过标签的name属性获取节点,因为name有相同,所以返回一个对象数组HTMLCollection(NodeList). <script type="text/javascript"> window.onload = function () { if(document.getElementsByName){ var box = document.getElementsByName('text

轻松学习JavaScript二十:DOM编程学习之获取节点

我们这里所说的获取节点包含元素节点,属性节点和文本节点.通常,通过DOM我们就能够操作HTML元素.为 了做到这件事情,您必须首先找到该元素.W3C提供了比较方便简单的定位节点的方法和属性,以便我们快速的对节 点进行操作. 我们先来写一个简单的HTML文档以供我们进行测试,并且JS代码都是写在window.onload事件中: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w

js dom操作获取节点的一些方法

在复习javascript基础的时候,整理了一下js中获取节点的一些常用的方法,见代码: 1 //js获取下一个兄弟节点 2 function getNextSibling(eleObj){ 3 var next = eleObj.nextSibling; 4 if(next.nodeType == 3){ // 文本节点 5 return next.nextSibling; 6 } 7 return next; 8 } 9 //js获取上一个兄弟节点 10 function getPrevio

document获取节点byId&amp;byName

<script type="text/javascript"> /* *需要:获取页面中的DIV节点:*思路:*通过docment对象完成.因为div节点有ID属性.所以可以通过ID属性来完成获取.*/function getNodeDemo(){ var divNode = document.getElementById("divid"); //节点都有三个必要的属性.节点名称.节点类型.节点值//alert(divNode.nodeName+&quo

封装常用的js(Base.js)——【01】理解库,获取节点,连缀,

封装常用的js(Base.js)——[01]理解库,获取节点,连缀,  youjobit07 2014-10-10 15:32:59 前言:       现如今有太多优秀的开源javascript库,比如jQuery,Prototype,Dojo等等,这些javascript库已经把最常用的代码进行了有效的封装,以便我们开发,从而提高效率.现在我这里探讨的是自己创建一个javascript库,自己创建的肯定没有那些开源javascript库功能强大,目的主要是为了提升自己的原生javascrip

通过节点层次关系获取节点

<!--通过节点的层次关系获取节点对象. 关系:1.父节点:parentNode:对应一个节点对象.2.子节点:childNodes:对应一个节点集合.3.兄弟节点: 上一个兄弟节点:parviousSibling下一个兄弟节点:nextSibling--> <script type="text/javascript"> function getNodeByLevel(){ //获取页面中的表格节点var tabNode = document.getElemen

外部引用css属性在Javascript里如何获取

今天做封装一个库的时候发现:想获取节点的CSS属性,如果没有写行内style样式,而是通过link写的,我们在javascript里想要通过.style.属性,是获取不到的. 在网上查找了一下,W3C下提供了一个方法:window.getComputedStyle()可以得到节点的计算后样式,该方法有两个参数,第一个是要所要获取的样式的节点,第二个参数不知道是什么作用,网上给出的例子都将设置成null:即是这样调用的:window.getComputedStyle(node,null),其返回值