javascript学习笔记(十八) 获得页面中的元素代码

1.获取元素

getElementById()方法，通过元素的id获取元素，接受一个参数即要获取元素的id，如果不存在这个id返回 null
注意不要让表单元素的name和别的元素的id相同，IE8以下的IE浏览器用这个方法通过元素的name属性可以获得该元素
以下面元素为例

<div id ="myDiv">这里是id为“myDiv”的div内容</div>var document.getElementById("myDiv"); //"myDiv"区分大小写，取得<div>元素的引用
getElementsByTagName()方法，通过元素的标签名获得元素，接受一个参数即要获取元素的标签名，返回包含0个或多个的NodeList


代码如下:

var images = document.getElementsByTagName("img"); //获取页面中的所有<img>元素

alert(images.length); //图像的数量
alert(images[0].src); //第一个图片元素的src
alert(images.item(0).src); //同上

getElementsByName()方法，通过元素的name属性获得元素，接受一个参数即要获取元素的name属性，常用来获取单选按钮


代码如下:

<ul>
<li><input type="radio" name="color" value="red" id="colorRed"><label for="colorRed"></label></li>
<li><input type="radio" name="color" value="green" id="colorGreen"><label for="colorGreen"></label></li>
<li><input type="radio" name="color" value="blue" id="colorBlue"><label for="colorBlue"></label></li>
</ul>var radios = document.getElementsByName("color"); //获取name="color"的所有单选按钮

2.获取元素子节点或元素子节点及其后代节点


代码如下:

<ul id="myList">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>

注意：IE认为<ul>元素有3个子节点，分别是3个元素，其他浏览器会认为有7个子节点，包括3个元素和4个文本节点，如果<ul>在一行中：

<ul id="myList"><li>项目一</li><li>项目二</li><li>项目三</li></ul>　　
任何浏览器都认为有3个子节点

获取元素的子节点:


代码如下:

var ul = document.getElementById("myList");
for (var i=0,len = ul.childNodes.length ; i < len ; i++ ) {
if ( ul.childNodes.length[i].nodeType == 1) { //nodeType == 1 说明节点是元素节点，而不是文本节点
//执行某些操作
}
}

获取元素的子节点及其后代节点:


代码如下:

var ul = document.getElementById("myList");
var items = ul.getElementsByTagName("li"); //li里的li也会被取得

3通过节点的属性查找其它节点
nextSibling属性指向当前节点的下一个兄弟节点
previousSibling属性指向当前节点的上一个兄弟节点
firstChild属性指向第一个子节点，lastChild指向最后一个子节点
childNodes保存着所有子节点（其实是NodeList对象）,可以通过方括号的方法访问如 someNode.childNodes[0] 访问第一个子节点
parentNode属性指向父节点

节点关系如下：

NodeList是个数组对象，我们可以把它转换为数组，函数如下


代码如下:

function converToArray (nodes) {
var arrary = null;
try {
array = Array.prototype.slice.call(nodes,0);
}
catch (ex) {
array = new Array();
for (var i=0,len=nodes.length ; i<len ; i++) {
array.push(nodes[i]);
}
}
return array;
}

var div = document.getElementById("side");
alert(converToArray(div.childNodes));

赞 (0)

相关推荐

  • javascript学习笔记(十一) 正则表达式介绍

    1.修饰符 . 任意一个字符 * 匹配*前面0个或多个字符 + 匹配+前面一个或多个字符 ? 匹配?前面0个或1个字符 ^ 以^后面的字符为前导 $ 以$前面的字符结尾 [] 匹配[]内的一个字符 () 分组,可以用\1 \2提取 [^] 匹配^后的以外的字符 {n} {n}前的字符有n个,n为正数 {n,} {n,}前的字符至少有n个,n为正数 {n,m} {n,m}前的字符有n~m个,n,m为正数 2.字符 \d 一个数字 \D 一个非数字 \w 一个字母或数字 \W 一个非字母和非数字 \

  • javascript学习笔记(二) js一些基本概念

    1.typeof 操作符:用于检测给定变量的数据类型 复制代码 代码如下: var message="some string"; alert(typeof message); //"string" alert(typeof(message)); //"string" alert(typeof 100); //"number" typeof操作符可能返回下列字符串: "undefined","boo

  • javascript学习笔记(十) js对象 继承

    1.原型链 //很少单独使用 复制代码 代码如下: View Code //定义 SuperClass类,有一个属性property和一个方法getSuperValue function SuperClass() { this.property = true; } SuperClass.prototype.getSuperValue = function() { return this.property; } //定义SubClass类,有一个属性subproperty和后来添加的一个方法get

  • javascript学习笔记(十五) js间歇调用和超时调用

    1.超时调用setTimeout() setTimeout() 方法接受两个参数,第一个参数是函数,第二个参数是时间(单位微秒),返回数值ID 复制代码 代码如下: setTimeout( function () { alert("你好!"); },1000); 调用前取消clearTimeout(),接受一个参数超时调用ID 复制代码 代码如下: var timeOutId = setTimeout( function () { alert("你好!"); },1

  • javascript学习笔记(十四) window对象使用介绍

    1.窗口位置 以下取得浏览器窗口距屏幕左边和上边的位置 复制代码 代码如下: var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX; //左边位置 var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY; //上边位置 2.浏

  • javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)

    1.警告框alert() 复制代码 代码如下: alert("欢迎光临!"); 2.信息框confirm(),有取消,确定按钮 复制代码 代码如下: if (confirm("你同意吗?")) { alert("同意"); } else { alert("不同意"); } 3.提示框prompt(),用于提示用户输入一些文本 复制代码 代码如下: var result = prompt("您尊姓大名?",&

  • javascript学习笔记(一) 在html中使用javascript

    1.延时脚本运行的方法: 方法一:把全部javascript引用放在<body>元素中,页面内容后,如 复制代码 代码如下: <html> <head> <title>示例1</title> </head> <body> <!--页面内容--> <script type="text/javascript" src="example1.js"></scri

  • javascript学习笔记(八) js内置对象

    1.URI方法 encodeURI()和encodeURIComponent()对URI进行编码 encodeURI()不会对本身属于URI的特殊字符进行编码,如冒号,正斜杠,问好,井字等 encodeURIComponent()会对任何非标准字符进行编码 2.eval() 方法:解释参数中的代码字符串 复制代码 代码如下: var msg = "hello world"; eval("alert(msg)"); //"hello world"

  • javascript学习笔记(九) js对象 设计模式

    1.创建对象 复制代码 代码如下: var person = new Object(); person.name = "RuiLiang"; person.age = 30; person.job = "Teacher"; person.sayName = function () { alert(this.name); }; person.sayName(); 2.工厂模式 缺点:不能识别对象 复制代码 代码如下: function createPerson(nam

  • javascript学习笔记(四) Number 数字类型

    toFixed() 方法指定小数位个数 toExponential() 方法 用科学计数法表示数,参数指定小数位个数 toPrecision() 方法自动判断调用toFixed()或toExponential()方法,参数指定所有数的位数 复制代码 代码如下: var num = 99; alert(toFixed(2)); //99.00 alert(toExponential(1)); //9.0e+1 alert(toPrecision(1)); //9.0e+1 alert(toPrec

  • javascript学习笔记(十三) js闭包介绍(转)

    javascript学习笔记(十三) js闭包介绍(转)

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. 复制代码 代码如下: var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. 复制代码 代码如下: function f1(){ var n=999; } alert(n); // error 这里

  • javascript学习笔记(十二) RegExp类型介绍

    1.匹配模式标记: g ------ 表示全局模式,而不是发现第一个匹配成功就立刻结束 i ------- 表示不区分大小写模式 m ----- 表示多行匹配,一行结束时向下一行继续匹配 复制代码 代码如下: //匹配第一个bat 或cat,不区分大小写 var pattern1 = /[bc]at/i var pattern2 = new RegExp("[bc]at","i"); //同上 使用RegEXp是字面量模式要转换成字符串 /\[bc\]at/ ===

  • javascript学习笔记(七) js函数介绍

    1.函数内部属性 arguments arguments用来保存函数的参数,arguments.callee指向拥有arguments对象的函数 复制代码 代码如下: //阶乘 function factorial(num) { if (num <= 1) { return 1; } else { return num*arguments.callee(num-1); //用agreements.callee代替 } } var trueFactorial = factorial; factor

  • javascript学习笔记(六) Date 日期类型

    1.创建日期对象 复制代码 代码如下: var now = new Date(); //获得当前系统日期和时间 var someDate = new Date(Date.parse("May 25,2012")); var someDate = new Date("May 25,2012"); //与上相同 var someDate = new Date(Date.UTC(2010,0)); //GMT时间2010年1月1日凌晨0时 var someDate = n

  • javascript学习笔记(十九) 节点的操作实现代码

    本节要用到的html例子 复制代码 代码如下: <ul id="myList"> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ul> 1.创建元素节点 document.createElement() 方法 用于创建元素,接受一个参数,即要创建元素的标签名,返回创建的元素节点 复制代码 代码如下: var div = document.createEle

  • javascript学习笔记(十七) 检测浏览器插件代码

    复制代码 代码如下: //检测非IE浏览器插件函数 function hasPlugin(name) { name = name.toLowerCase(); for (var i=0 ; i < navigator.plugins.length ; i++ ) { if (navigator.plugins[i].name.toLowerCase().indexOf(name) >-1) { return true; } } return false; } //检测IE浏览器插件函数 fun

  • javascript学习笔记(二十) 获得和设置元素的特性（属性）

    本节html以下面的为例 复制代码 代码如下: <div id="myDiv" class="bd" title="我是div"> <img id="img1" /> <a id="myA" href = "http://www.baidu.com">百度</a> </div> 1.通过HTMLElement类型(对象)的属性获

  • javascript学习笔记(三) String 字符串类型介绍

    1.字符方法charAt() .charCodeAt().fromCharCode() 复制代码 代码如下: var stringValue = "hello world"; alert(stringValue.charAt(1)); //"e" alert(stringValue[1]); //"e" alert(stringValue.charCodeAt(1)); //101 alert(String.fromCharCode(104,10

  • javascript学习笔记(五) Array 数组类型介绍

    数组的创建 第一种: 复制代码 代码如下: var colors = new Array(); var colors = new Array(20);//创建包含20项的数组 var colors = new Array("Greg");//创建包含1项,即字符串"Greg"的数组 var colors = new Array("red","blue","green"); //创建包含3项 第二种: 复制代

随机推荐