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 ...
随机推荐
- Filter、Listener 学习总结
今天我们来介绍 Filter.Listener 这两个模块一些简单的知识和应用,接下来我们开始我们的正题 ! 1. Filter(过滤器) 1.1 对 Servlet 容器调用 Servlet 的过程 ...
- YiShop_商城网站设计应该注意什么
商城网站的建设,不是一件简单的事情,当然,也不要把商城网站的建设想得那么的复杂,在建设商城网站的时候 ,只要考虑到以下这些因素,定能把商城网站建设工作做好.那么商城网站建设要考虑哪些因素:(1)风格 ...
- 【NOIP2009提高组】最优贸易
https://www.luogu.org/problem/show?pid=1073 如果他想在i点卖出,那么就要在从1点出发到i点的路径里找个最便宜的买入,用Bellman-Ford求出这样最便宜 ...
- Mecanim动画系统
序言:Mecanim动画系统是Unity4.0之后退出的新版动画系统,非常适合人类动画系统.本文是作为自己的学习来讲解的, 可能会有些啰嗦,但尽量把自己的坑都为大家列出来,让大家理解透彻. 一.文件的 ...
- C语言简单实现链栈基本几个功能（适合新手看，大神可指正）
接着上一次的顺序栈,今天我记一下链栈,因为我也是刚学不久,有些地方也稍稍理解不了,所以,一起共勉.我会用我自己结合教材上画的图,争取跟代码一起结合,用文字和图最大化的解释代码,这样的话 ...
- nginx防恶意域名解析
今天无意间查看访问日志发现一个fhxywh.com的域名居然解析到了我的服务器,也就是说通过这个域名也能访问我的博客,这个就是赤裸裸的恶意域名解析了. 这个危害非常大,不仅会影响用户,而且不利于SEO ...
- .NET Core 已经实现了PHP JIT，现在PHP是.NET上的一门开发语言
12月23日,由开源中国联合中国电子技术标准化研究院主办的2017源创会年终盛典在北京万豪酒店顺利举行.在本次大会上,链家集团技术副总裁.PHP 开发组核心成员鸟哥发表了以 " PHP Ne ...
- VMWare 虚拟化 Ubuntu 64 （16.04）-- docker 无法链接 pull 镜像 ？(solved)
背景 根据项目的需要,虚拟化一个Ubuntu OS 来玩 docker,虚拟机选择的是WMWare (VMware-player-14.0.0-6661328); Ubuntu的镜像来自于官网(ubu ...
- 【转载】解决refreshing gradle project 和Building gradle project info 一直卡住\速度慢
转载: http://blog.csdn.net/xx326664162/article/details/52002616 文章出自:薛瑄的博客 分析原因: 更改Gradle的版本后,或者更新AS后, ...
- Targets选项下Other linker flags的设置
-ObjC:加了这个参数后,链接器就会把静态库中所有的Objective-C类和分类都加载到最后的可执行文件中 -all_load:会让链接器把所有找到的目标文件都加载到可执行文件中,但是千万不要随便 ...