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 ...
随机推荐
- linux运维、架构之路-Zabbix监控应用及分布式
一.Zabbix监控集群应用 1.监控端口 net.tcp.listen[port] 检查 TCP 端口 是否处于侦听状态.返回 0 - 未侦听:1 - 正在侦听 net.tcp.port[<i ...
- yii2.0中添加二维数组，多条数据。
/** * @inheritdoc 批量添加 * @params $add array 添加数据 */public function add_all($add){ $connection = \Yii ...
- 为并发而生的 ConcurrentHashMap（Java 8）
HashMap 是我们日常最常见的一种容器,它以键值对的形式完成对数据的存储,但众所周知,它在高并发的情境下是不安全的.尤其是在 jdk 1.8 之前,rehash 的过程中采用头插法转移结点,高并发 ...
- ROC和AUC的区别
ROC是一个曲线,AUC是曲线下面的面积值. ROC曲线是FPR和TPR的点连成的线. 可以从上面的图看到,横轴是FPR, 纵轴是TPR (TPR = TP / (TP + FN):FPR = F ...
- Android使用gradle不同配置多项目打包
//build.gradle该配置文件里路径均是相对路径 apply plugin: 'com.android.application' android { def suffix = "su ...
- Leetcode 高精度 Plus One
本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie Plus One Total Accepted: 17614 Total Submissio ...
- 关于chrome浏览器的帐号密码和背景色的填充问题
不知道大家平时做项目的时候有木有关注这个问题,其实之前做项目遇到过类似的问题,但是因为是单独的chrome浏览器的填充,而且是样式问题稍微严重点,也就没在意.然而在近期的项目中有遇到了这个问题,最为一 ...
- 前端优化之动画为什么要尽量用css3代替js
导致JavaScript效率低的两大原因:操作DOM和使用页面动画.通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在内了在频繁的操作DOM和CSS时,浏 ...
- flask 上传文件
flask upload 近日在学习python,接触到了flask框架,刚好客户有个需求,需要在网页上传一个python 代码的zip包,然后使用docker 容器运行这个zip里面的程序,输出结果 ...
- MySql基础总结
1.创建一个表 CREATE TABLE customers ( cust_id INT NOT NULL AUTO_INCREMENT, cust_name CHAR(50) NOT NULL , ...