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 对象 ...
随机推荐
- 【JZOJ 5048】【GDOI2017模拟一试4.11】IQ测试
题目大意: 判断一个序列是否是另外一个序列删除若干个数字之后得到的. 正文: 我们可以定义两个指针,分别指向长序列和短序列. 拿样例来举例: 如果指针指的数相同,两个指针都往右跳: 如果不同,则指向长 ...
- mysql必知必会--过 滤 数 据
使用 WHERE 子句 数据库表一般包含大量的数据,很少需要检索表中所有行.通常只 会根据特定操作或报告的需要提取表数据的子集.只检索所需数据需要 指定搜索条件(search criteria),搜索 ...
- uniapp后台api设计(微信user表)
MySQL 创建数据库: CREATE DATABASE [IF NOT EXISTS] <数据库名> [[DEFAULT] CHARACTER SET <字符集名>] [[ ...
- Numerical Testing Reportes of A New Conjugate Gradient Projection Method for Convex Constrained Nonlinear Equations
Numerical Testing Reportes of A New Conjugate Gradient Projection Method for Convex Constrained Nonl ...
- Node.js文档-path
用于处理文件路径和目录路径 引入 const path = require('path') path.extname(path) 返回扩展名.从最后一次出现 . 字符到字符串结束. const pat ...
- echarts--可拖动的曲线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Badusb 简易制作
Badusb easy_make 0x00 basic knowledge and equip arduino IDE download address: https://www.arduino.cc ...
- JavaSE学习笔记（14）---File类和IO流（字节流和字符流）
JavaSE学习笔记(14)---File类和IO流(字节流和字符流) File类 概述 java.io.File 类是文件和目录路径名的抽象表示,主要用于文件和目录的创建.查找和删除等操作. 构造方 ...
- Python_3
""" Function_1: 寻找水仙花数. 水仙花数也被称为超完全数字不变数.自恋数.自幂数.阿姆斯特朗数, 它是一个3位数,该数字每个位上数字的立方之和正好等于它本 ...
- Ansible之优化提升执行效率
今天分享一下Ansible在工作环境中有那些可以优化的配置 环境介绍:以前在公司工作处理服务器问题,需要用批量操作都是用shell脚本编写的工具,后来发现Ansible这个自动化工具,安装简单,操作起 ...