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 对象 ...
随机推荐
- 利用低代码优化人力资源配置，为软件开发降本提效 ZT
低代码 是一种主要应用于企业信息化领域的快速开发技术.借助低代码,开发者无需编码即可生成企业应用的常见功能,少量编码能开发出更多扩展功能.有了低代码技术,IT团队甚至业务团队都可以参与到编写应用程序当 ...
- jq--实现自定义下拉框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- vue自定义分页组件---切图网
vue2.5自定义分页组件 Pagination.vue,可设置每页显示条数,带跳转框直接跳转到相应页面,亲测有用.目前很多框架自带有分页组件比如elementUI,不过在面对一个拿到PSD稿,然后重 ...
- RMAN中MAXSETSIZE和MAXPIECESIZE的用法
MAXSETSIZE跟MAXPIECESIZE用法 区别:maxpiecesize设置的是备份完成后的备份片大小,对备份整体的大小没有影响,比如一个G的备份完成文件,maxpiecesize设置为10 ...
- postman设置变量
参数化 变量引用格式:{{username}} , 区别jmeter的 {username} 一.设置与引用环境变量 背景:在不同的环境下跑相同的测试,生产环境或测试环境 二.设置与引用全局变量 ...
- C#画图之饼图
public JsonResult DrawPie() { // 预置颜色 List<Color> colors = new List<Color>() { Color.Fro ...
- 小Z的袜子(hose) HYSBZ - 2038 莫队+分块
#include<bits/stdc++.h> using namespace std; typedef long long ll; typedef pair<ll,ll>pl ...
- .NET Core DI简单介绍
依赖注入的基础 我们都知道DI,,他是一种开发模式.他是将服务可被应用程序任何位置的代码使用,当某个代码组件(如一个类)需要引用某些外部代码(一个服务)时.都有两种选择 1:直接在调用代码种创建服务组 ...
- HTML5文档类型如何定义，有哪些标签，以及如何使用，从整体认识HTML5
html5新增结构标签 header 头部 nav 导航 section 区域 article 文章 aside 侧边栏 figure 一组多媒体内容 figcaption 多媒体内容的标题 foot ...
- 自然语言处理(1)-HMM隐马尔科夫模型基础概念（一）
隐马尔科夫模型HMM 序言 文本序列标注是自然语言处理中非常重要的一环,我先接触到的是CRF(条件随机场模型)用于解决相关问题,因此希望能够对CRF有一个全面的理解,但是由于在学习过程中发现一个算法像 ...