JavaScript的DOM编程--08--复习
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title> <script type="text/javascript">
//1. 节点的类型: 元素节点、属性节点、文本节点
//通常情况下, 操作属性节点直接通过 "元素节点.属性名" 的方式来读写属性值
//而不是获取属性节点. //2. 写 JS 代码的位置
//2.1 具体位置在哪
//2.2 window.onload 事件被触发的时间,
//以及如何为该事件赋值一个相应函数 //3. 获取获取元素节点
//3.1 根据 id 获取
//3.2 根据 标签名 获取: 该方法并非 document 对象所独有, 任何元素节点
//都可以调用该方法, 以获取指定的子节点.
//3.3 根据 name 属性名来获取: 若 HTML 元素本身没有 name 属性,
//我们硬添加一个 name 属性, 使用 getElementsByName(name)
//对于 ie 是不好用的。 //4. 获取子节点
//4.1 childNodes 属性: 获取指定元素的所有子节点, 但不怎么常用.
//4.2 firstChild、lastChild 属性: 获取元素节点的文本节点(如果一个元素
// 节点只有一个文本子节点).
//4.3 使用元素节点的 getElementsByTagName("方法"); //5. 读写文本节点:
//5.1 文本节点一定是元素节点的子节点
//5.2 步骤: 获取文本节点所在的元素节点 -> 利用 firstChild 获取文本节点
// -> 利用节点的 nodeValue 属性来读写文本值. //6. 节点的属性: 所有节点都有的属性(按元素节点, 属性节点, 文本节点来说明)
//6.1 nodeType: 1, 2, 3 只读属性
//6.2 nodeName: 返回对应的节点的名字 只读属性
//6.3 nodeValue: null, 属性值, 文本值 可读写的属性. //7. 属性节点:
//7.1 一般情况下不单独获取属性节点,
//而是通过 元素节点.属性名 的方式来读写属性值 window.onload = function(){
//弹出对话框.
//alert("helloworld"); //var bjNode = document.getElementById("bj");
//alert(bjNode); //var liNodes = document.getElementsByTagName("li");
//alert(liNodes.length); //var genderNodes = document.getElementsByName("gender");
//alert(genderNodes.length); //var bjNodes = document.getElementsByName("BeiJing");
//alert(bjNodes.length); // var cityNode = document.getElementById("city");
//var cityLiNodes = cityNode.getElementsByTagName("li");
//alert(cityLiNodes.length); // var liChildren = cityNode.childNodes;
// alert(liChildren.length);
//
// var cityFirstChild = cityNode.firstChild;
// alert(cityFirstChild); var bjNode = document.getElementById("bj");
alert(bjNode.firstChild.nodeValue);
bjNode.firstChild.nodeValue = "尚硅谷"; // var nameNode = document.getElementsByName("username")[0];
// alert(nameNode.value);
// nameNode.value = "尚硅谷";
} </script> </head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</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>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female <br><br>
name: <input type="text" name="username" value="atguigu"/> </body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"> //需求: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: "请选择类型";
// 检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容";
//若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点 //需求2: 使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值. window.onload = function(){ function showContent(liNode){
alert("^_^#" + liNode.firstChild.nodeValue);
} var liNodes = document.getElementsByTagName("li");
for(var i = 0; i < liNodes.length; i++){
liNodes[i].onclick = function(){
showContent(this);
}
} //1. 获取 #submit 对应的按钮 submitBtn
var submit = document.getElementById("submit"); //2. 为 submitBtn 添加 onclick 响应函数
submit.onclick = function(){ //4. 检查是否选择 type, 若没有选择给出提示: "请选择类型"
//4.1 选择所有的 name="type" 的节点 types
var types = document.getElementsByName("type"); //4.2 遍历 types, 检查其是否有一个 type 的 checked 属性存在, 就可说明
//有一个 type 被选中了: 通过 if(元素节点.属性名) 来判断某一个元素节点是否有
//该属性.
var typeVal = null;
for(var i = 0; i < types.length; i++){
if(types[i].checked){
typeVal = types[i].value;
break;
}
} //4.3 若没有任何一个 type 被选中, 则弹出: "请选择类型". 响应方法结束:
//return false
if(typeVal == null){
alert("请选择类型");
return false;
} //5. 获取 name="name" 的文本值: 通过 value 属性: nameVal
var nameEle = document.getElementsByName("name")[0];
var nameVal = nameEle.value; //6. 去除 nameVal 的前后空格.
var reg = /^\s*|\s*$/g;
nameVal = nameVal.replace(reg, ""); //使 name 的文本框也去除前后空格.
nameEle.value = nameVal; //6. 把 nameVal 和 "" 进行比较, 若是 "" 说明只出入了空格, 弹出 "请输入内容"
//方法结束: return false
if(nameVal == ""){
alert("请输入内容");
return false;
} //7. 创建 li 节点
var liNode = document.createElement("li"); //8. 利用 nameVal 创建文本节点
var content = document.createTextNode(nameVal); //9. 把 8 加为 7 的子节点
liNode.appendChild(content); //11. 为新创建的 li 添加 onclick 响应函数
liNode.onclick = function(){
showContent(this);
} //10. 把 7 加为选择的 type 对应的 ul 的子节点
document.getElementById(typeVal)
.appendChild(liNode); //3. 在 onclick 响应函数的结尾处添加 return false, 就可以取消提交按钮的
//默认行为.
return false;
}
} </script>
</head>
<body> <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> <form action="dom-7.html" name="myform"> <input type="radio" name="type" value="city">城市
<input type="radio" name="type" value="game">游戏 name: <input type="text" name="name"/> <input type="submit" value="Submit" id="submit"/> </form> </body>
</html>
JavaScript的DOM编程--08--复习的更多相关文章
- HTML、css、javascript、DOM编程
HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...
- 高性能JavaScript之DOM编程
我们知道.DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价非常昂贵. 有个贴切的比喻.把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之 ...
- 高性能Javascript(2) DOM编程
第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM ...
- JavaScript的DOM编程--12--innerHTML属性
innerHTML属性: 1). 浏览器几乎都支持该属性, 但不是 DOM 标准的组成部分. innerHTML 属性可以用来读, 写某给定元素里的 HTML 内容 <html> < ...
- JavaScript的DOM编程--01--js代码的写入位置
DOM:Document Object Model(文本对象模型) D:文档 – html 文档 或 xml 文档 O:对象 – document 对象的属性和方法 M:模型 DOM 是针对xml(h ...
- 高性能JavaScript（DOM编程）
首先什么是DOM?为什么慢? DOM:文档对象模型,是一个独立于语言的,用于操作XML和HTML文档的程序接口(API) 用脚本进行DOM操作的代价很昂贵.那么,怎样才能提高程序的效率? 1.DOM访 ...
- JavaScript的DOM编程--11--插入节点
插入节点: 1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面 var reference = element.insertBefore(newNode,t ...
- JavaScript的DOM编程--10--删除节点
1). removeChild(): 从一个给定元素里删除一个子节点 var reference = element.removeChild(node); 返回值是一个指向已被删除的子节点的引用指针. ...
- JavaScript的DOM编程--09--节点的替换
节点的替换: 1). replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点 var reference = element.replaceChild(newChild,o ...
随机推荐
- SPFA【模板】单源最短路径
题目传送 https://www.luogu.org/problem/show?pid=3371没啥解释,SPFA纯模版qaq//Gang #include<iostream> #incl ...
- Spring Boot应用 打包与部署指南
Spring Boot的打包与部署有何特点? Java Web应用在Spring Boot之前,通常是打包成war(Web application ARchive)包,结合Tomcat来完成部署. 对 ...
- 数据库服务器---Tps
事务处理系统:Transactionprocessingsystems(TPS) 提高事务处理效率与保证其正确性 在数据(信息)发生处将它们记录下来 通过OLTP产生新的信息 将信息保存到数据库中供其 ...
- Cesium中Clock控件及时间序列瓦片动态加载
前言 前面已经写了两篇博客介绍Cesium,一篇整体上简单介绍了Cesium如何上手,还有一篇介绍了如何将Cesium与分布式地理信息处理框架Geotrellis相结合.Cesium的强大之处也在于其 ...
- c++邻接表存储图（无向），并用广度优先和深度优先遍历（实验）
一开始我是用c写的,后面才发现广搜要用到队列,所以我就直接使用c++的STL队列来写, 因为不想再写多一个队列了.这次实验写了两个多钟,因为要边写边思考,太菜了哈哈. 主要参考<大话数据结构&g ...
- [开源项目] Android校验库 - FireEye
简单易用的Android校验库. 这是一个简单Android校验库,按配置来验证用户输入的表单信息. 仅仅须要几行代码,就可以验证用户输入,而且将验证错误反馈给用户. 它内置了大量经常使用的验证类型, ...
- Cocos2d-x 3.0正式版及android环境搭建
开发环境是:mac + xcode + eclipse ,在win以下的环境和这个都是一样的,唯一不一样的就是环境变量的配置. 以下主要介绍cocos2d-x环境的设置以及android的环境搭建 1 ...
- 九度OJ 1205 N阶楼梯上楼问题 （DP）
题目1205:N阶楼梯上楼问题 时间限制:1 秒 内存限制:128 兆 特殊判题:否 提交:2817 解决:1073 题目描写叙述: N阶楼梯上楼问题:一次能够走两阶或一阶.问有多少种上楼方式. (要 ...
- js、jquery实现模糊搜索功能
模糊搜索功能在工作中应用广泛,并且很实用,自己写了一个方法,以后用到的时候可以直接拿来用了! 实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 ...
- [UWP]了解TypeConverter
1. 前言 TypeConverter是XAML解释器的幕后功臣,它做了大量工作,从WPF诞生以来,几乎每一次XAML的运作都有它的参与.虽然UWP中TypeConverter已经彻彻底底退居幕后,连 ...