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 ...
随机推荐
- Win10 之最新最简单有效安装配置adb
今天在新买的笔记本上安装配置adb,开始觉得挺简单的事,公司win7电脑上有现成的,但实际过程中--没想的那么简单了!好了,废话少说,直接正题. 研究了好一会下,总算搞定,总结如下: 1.下载Andr ...
- 这是一篇关于：以时间表的形式来介绍Java如何演变至今，以及Java版本的一些特性的分享
这是一篇关于:以时间表的形式来介绍Java如何演变至今,以及Java版本的一些特性的分享: Java版本,功能和历史 原文[英]:https://javapapers.com/core-java/ja ...
- 深入理解Java虚拟机---学习感悟以及笔记
一.为什么要学习Java虚拟机? 这里我们使用举例来说明为什么要学习Java虚拟机,其实这个问题就和为什么要学习数据结构和算法是一个道理,工欲善其事,必先利其器.曾经的我经常害怕处理内存溢 ...
- Java分布式锁实现详解
在进行大型网站技术架构设计以及业务实现的过程中,多少都会遇到需要使用分布式锁的情况.那么问题也就接踵而至,哪种分布式锁更适合我们的项目? 下面就这个问题,我做了一些分析: 分布式锁现状: 目前几乎很多 ...
- 深入理解ES6之—增强的数组功能
创建数组 Array.of()方法 ES6为数组新增创建方法的目的之一,是帮助开发者在使用Array构造器时避开js语言的一个怪异点.Array.of()方法总会创建一个包含所有传入参数的数组,而不管 ...
- OpenCV 实现图片的水平投影与垂直投影，并进行行分割
对于印刷体图片来说,进行水平投影和垂直投影可以很快的进行分割,本文就在OpenCV中如何进行水平投影和垂直投影通过代码进行说明. 水平投影:二维图像在y轴上的投影 垂直投影:二维图像在x轴上的投影 由 ...
- Heritrix1.14.4在Eclipse的配置和使用
转载 1.首先在 Eclipse 中新建 Java 工程 ,工程名自取,以MyHeritrix为例.利用下载的源代码包根据以下步骤来配置这个工程. 2.导入类库 Heritrix 所用到的工具类库都在 ...
- 【JDK1.8】JDK1.8集合源码阅读——ArrayList
一.前言 在前面几篇,我们已经学习了常见了Map,下面开始阅读实现Collection接口的常见的实现类.在有了之前源码的铺垫之后,我们后面的阅读之路将会变得简单很多,因为很多Collection的结 ...
- 重要经验五：block作为属性的注意事项
现代ios应用的开发.不使用GCD和block,效率会减少非常多,在今年3月份之前,我在block的学习和使用方面,精力和经验都明显不足,在SF有个牛逼同事.不仅自己积累了一套库,并且对这个库持续进行 ...
- IDEA使用有道翻译插件
使用IDEA编写代码或者查看源码的时候有时候需要使用的翻译功能,虽然已经有繁多的翻译服务提供了桌面版的软件,但是并不大适合使用在阅读或者编写代码这个场景.IDEA丰富的插件库为我们提供了一些翻译插件, ...