DOM操作节点对象集合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript"> /*
* 定义一个函数，专门用来为指定元素绑定单击响应函数
* 参数：
* idStr 要绑定单击响应函数的对象的id属性值
* fun 事件的回调函数，当单击元素时，该函数将会被触发
*/
function myClick(idStr , fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
} window.onload = function(){
1、查找#bj节点
//为id为btn01的按钮绑定一个单击响应函数
var btn01 = document.getElementById("btn01"); //获取按钮
btn01.onclick = function(){ //为按钮增加onclick事件，onclick事件作用于bj标签
//查找#bj节点
var bj = document.getElementById("bj");//获取id为bj节点对象，可以对其进行操作
//打印bj
//innerHTML 通过这个属性可以获取到元素内部的html代码
alert(bj.innerHTML);
};
2、查找所有li节点
//为id为btn02的按钮绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
//查找所有li节点
//getElementsByTagName()可以根据标签名来获取一组元素节点对象
//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
//即使查询到的元素只有一个，也会封装到数组中返回
var lis = document.getElementsByTagName("li"); //li collection //打印lis
//alert(lis.length); //变量lis
for(var i=0 ; i<lis.length ; i++){
alert(lis[i].innerHTML); //打印标签文本内容
}
};
3.查找name=gender的所有节点
//为id为btn03的按钮绑定一个单击响应函数
var btn03 = document.getElementById("btn03"); //nodelist
btn03.onclick = function(){
//查找name=gender的所有节点
var inputs = document.getElementsByName("gender"); //alert(inputs.length); // 2 for(var i=0 ; i<inputs.length ; i++){
/*
* innerHTML用于获取元素内部的HTML文本
* 对于自结束标签input，这个属性没有意义
*/
//alert(inputs[i].innerHTML);
/*
* 如果需要读取元素节点属性，
* 直接使用 元素.属性名
* 例子：元素.id 元素.name 元素.value
* 注意：class属性不能采用这种方式，
* 读取class属性时需要使用 元素.className
*/
alert(inputs[i].value);
alert(inputs[i].type);
alert(inputs[i].id);
//alert(inputs[i].class); class是保留关键字
alert(inputs[i].className);
}
}; 4、查找#city下所有li节点
//为id为btn04的按钮绑定一个单击响应函数
var btn04 = document.getElementById("btn04");
btn04.onclick = function(){ //获取id为city的元素
var city = document.getElementById("city"); //查找#city下所有li节点
// var lis = document.getElementsByTagName("li"); 查找文档页面中所有的li
var lis = city.getElementsByTagName("li"); for(var i=0 ; i<lis.length ; i++){
alert(lis[i].innerHTML);
} }; 5、返回#city的所有子节点
//为id为btn05的按钮绑定一个单击响应函数
var btn05 = document.getElementById("btn05");
btn05.onclick = function(){
//获取id为city的节点
var city = document.getElementById("city");
//返回#city的所有子节点
/*
* childNodes属性会获取包括文本节点在内的所有节点
* 根据DOM标签标签间空白也会当成文本节点
* 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
* 所以该属性在IE8中会返回4个子元素而其他浏览器是9个（4个+ 5个li元素之间空白）
*/
var cns = city.childNodes; //alert(cns.length); /*for(var i=0 ; i<cns.length ; i++){
alert(cns[i]);
}*/ /*
* children属性可以获取当前元素的所有子元素li，不包含文本节点
*/
var cns2 = city.children; //推荐使用
alert(cns2.length);
};
6、返回#phone的第一个子节点
//为id为btn06的按钮绑定一个单击响应函数
var btn06 = document.getElementById("btn06");
btn06.onclick = function(){
//获取id为phone的元素
var phone = document.getElementById("phone");
//返回#phone的第一个子节点
//phone.childNodes[0];
//firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
var fir = phone.firstChild; //firstElementChild获取当前元素的第一个子元素（不会获取空白文本）
/*
* firstElementChild不支持IE8及以下的浏览器，
* 如果需要兼容他们尽量不要使用
*/
//fir = phone.firstElementChild; alert(fir);
}; 7、返回#bj的父节点
//为id为btn07的按钮绑定一个单击响应函数
//myClick函数在文档开始的位置，为了减少重复代码，
myClick("btn07",function(){ //获取btn07按钮对象，为其绑定匿名函数onclick对哪个节点做出响应 //获取id为bj的节点
var bj = document.getElementById("bj"); //返回#bj的父节点
var pn = bj.parentNode; alert(pn.innerHTML); //<li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li>
/*
* innerText
* - 该属性可以获取到元素内部的文本内容
* - 它和innerHTML类似，不同的是它会自动将html标签去除
*/
//alert(pn.innerText); //北京 上海 东京 首尔 }); 8、返回#android的前一个兄弟节点
//为id为btn08的按钮绑定一个单击响应函数
myClick("btn08",function(){ //获取id为android的元素
var and = document.getElementById("android"); //返回#android的前一个兄弟节点（也可能获取到空白的文本）
var ps = and.previousSibling; //previousElementSibling获取前一个兄弟元素（不包含空白文本），IE8及以下不支持
//var pe = and.previousElementSibling;
alert(ps);
}); 9、读取#username的value属性值
//读取#username的value属性值
myClick("btn09",function(){
//获取id为username的元素
var um = document.getElementById("username");
//读取um的value属性值
//文本框的value属性值，就是文本框中填写的内容
alert(um.value);
}); 10、设置#username的value属性值
//设置#username的value属性值
myClick("btn10",function(){
//获取id为username的元素
var um = document.getElementById("username"); um.value = "今天天气真不错~~~";
}); 11、返回#bj的文本值
//返回#bj的文本值
myClick("btn11",function(){ //获取id为bj的元素
var bj = document.getElementById("bj");
//方法1
//alert(bj.innerHTML);
//alert(bj.innerText); //方法2
//获取bj中的文本节点
/*var fc = bj.firstChild; //文本对象
alert(fc.nodeValue);*/文本内容 alert(bj.firstChild.nodeValue);
// // 文本节点一般是作为元素节点的子节点存在的。
// • 获取文本节点时，一般先要获取元素节点。在通过元素节点获取文本
// 节点。
// • 例如：
// – 元素节点.firstChild;
// – 获取元素节点的第一个子节点，一般为文本节点 }); }; </script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p> <ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul> <br>
<br> <p>
你喜欢哪款单机游戏?
</p> <ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul> <br />
<br /> <p>
你手机的操作系统是?
</p> <ul id="phone"><li>IOS</li> <li id="android">Android</li><li>Windows Phone</li></ul>
</div> <div class="inner">
gender:
<input class="hello" type="radio" name="gender" value="male"/>
Male
<input class="hello" type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript"> window.onload = function(){
12, 三个常用的对象
//获取body标签
//var body = document.getElementsByTagName("body")[0];
//document.getElementsByTagName("body") 是一个类数组
/*
* 在document中有一个属性body，它保存的是body的引用
*/
var body = document.body; /*
* document.documentElement保存的是html根标签
*/
var html = document.documentElement; //console.log(html); /*
* document.all代表页面中所有的元素
all是undefined,可能是浏览器的bug
*/
var all = document.all; //console.log(all.length); /*for(var i=0 ; i<all.length ; i++){
console.log(all[i]);
}*/ //all = document.getElementsByTagName("*"); //代表页面中所有的元素
//console.log(all.length); 13,CSS选择器查询方法
/*
* 根据元素的class属性值查询一组元素节点对象
* getElementsByClassName()可以根据class属性值获取一组元素节点对象，
* 但是该方法不支持IE8及以下的浏览器
*/
//var box1 = document.getElementsByClassName("box1");
//console.log(box1.length); //获取页面中的所有的div
//var divs = document.getElementsByTagName("div"); //获取class为box1中的所有的div
//.box1 div
/*
* document.querySelector()
* - 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
* - 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
* - 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
*/
var div = document.querySelector(".box1 div"); var box1 = document.querySelector(".box1") //console.log(div.innerHTML);
//console.log(box1.innerHTML); /*
* document.querySelectorAll()
* - 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
* - 即使符合条件的元素只有一个，它也会返回数组
*/
box1 = document.querySelectorAll(".box1");
box1 = document.querySelectorAll("#box2");
console.log(box1); }; </script>
</head>
<body>
<div id="box2"></div>
<div class="box1">
我是第一个box1
<div>我是box1中的div</div>
</div>
<div class="box1">
<div>我是box1中的div</div>
</div>
<div class="box1">
<div>我是box1中的div</div>
</div>
<div class="box1">
<div>我是box1中的div</div>
</div> <div></div>
</body>
</html>
DOM操作节点对象集合的更多相关文章
- jQuery 中使用 DOM 操作节点，对页面中的表格实现增、删、查、改操作
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...
- dom操作节点之常用方法
DOM:获取节点:{1. document.getElementById (元素id):通过元素id找到节点2. document.getElementsByClassName (元素类名classN ...
- JavaScript的DOM操作(节点操作)
创建节点createElement()var node = document.createElement(“div”);没什么可说的,创建一个元素节点,但注意,这个节点不会被自动添加到文档(docum ...
- javascript DOM操作 节点的遍历
通过javascript的遍历可以由一个节点来查找它的子节点(childNodes).兄弟节点(nextSibling/previousSibling)和父节点(parentNode). 代码说明: ...
- js下 Day03、DOM操作--节点方法
语法:parentNode.appendChild(child) 功能:向父节点的子节点列表的末尾添加新的子节点 语法:parentNode.removeChild(child) 功能:从子节点列表中 ...
- JavaScript之DOM操作，事件操作，节点操作
1,DOM操作 1.1 概念 所谓DOM,全称Document Object Model 文档对象模型,DOM是W3C(World Wide Web Consortuum )标准,同时也定义了访问诸 ...
- 理解特性attribute 和 属性property的区别 及相关DOM操作总结
查一下英语单词解释,两个都可以表示属性.但attribute倾向于解释为特质,而property倾向于解释私有的.这个property的私有解释可以更方便我们下面的理解. 第一部分:区别点 第一点: ...
- 前端javascript之BOM、DOM操作、事件
BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>>>:使用js操作前端页面 window对象 所有浏览器都支持 wind ...
- dom 操作
1.dom 的查找 (1)根据id 查找 var object = document.getElementById("id 值"): (2)根据 name 查找:返回 dom 对象 ...
随机推荐
- html网页基本概念
什么是网页?html文档经过浏览器内核渲染后展示出来的页面(五大主流浏览器及四大内核) html文档文件名后缀是.html,之前存在的.htm是为支持DOM系统(目前织梦还是用.htm文件名结尾文件) ...
- JS事件绑定的三种方式比较
js事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- docker笔记（2）
docker笔记(2) 常用命令和操作 1. 镜像操作 操作 命令 说明 检索 docker search 关键字 eg:docker search redis 我们经常去docker hub上检索镜 ...
- win10下载
Win10 简体中文正式版 微软MSDN官方ISO镜像下载(2020年1月21日更新) 官方地址:https://www.microsoft.com/zh-cn/software-download/w ...
- mac 15 IDA7.0 下载安装
吾爱破解上有相应的解决办法,在低版本mac上安装完成后,直接拖到15版本,再打上补丁,补丁可以自己去找,下面是转好了的,mac解压最好不要用自带的解压软件,用BetterZip试试,不行就多解压几次, ...
- python命令行工具的使用——argparse
argparse是一个常用的库函数,使用它的时候我们在命令行中不仅仅可以运行python文件,更可以零时调整参数,十分方便. 首先,如果你只是希望传一丢丢数据进去,那么只看下面两行就行了 import ...
- Element节点
Element节点对象对应网页的 HTML 元素.每一个 HTML 元素,在 DOM 树上都会转化成一个Element节点对象(以下简称元素节点).元素节点的nodeType属性都是1.Element ...
- jQuery---jquery.color.js和jquery.lazyload.js的使用
jquery.color.js的使用 了解即可 <!--1. 引入jquery的js文件--> <script src="jquery-1.12.4.js"> ...
- 【python基础语法】元祖、字典、集合、数据类型的分类（第4天课堂笔记）
""" 列表:可变数据类型,对列表内部的元素可以进行修改 元祖: tuple,不可变数据类型,是不可以进行增删查改 元祖的方法: count 查找元素的数量 index ...
- Jquery实现挂号平台首页源码
带二级导航.轮播海报.二级联动.搜索功能.Tab选项卡 按照国际惯例先放图 index.html <!DOCTYPE html> <html lang="zh-cn&quo ...