JavaScript: Advanced
DOM
1. 节点
getElementsByName方法
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function getnum(){
var mynode = document.getElementsByName("myt");
alert(mynode.length);
}
</script>
</head>
<body>
<input name="myt" type="text" value="1">
<input name="myt" type="text" value="2">
<input name="myt" type="text" value="3">
<input name="myt" type="text" value="4">
<input name="myt" type="text" value="5">
<input name="myt" type="text" value="6">
<br />
<input type="button" onclick="getnum()" value="看看有几项？" />
</body>
</html>
getElementsByTagName方法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript</title>
</head>
<body>
<form name="Input">
<table align="center" width="500px" height="50%" border="1">
<tr>
<td align="center" width="100px">
学号:
</td>
<td align="center" width="300px">
<input type="text" id=userid name="user" onblur="validate();">
<div id=usermsg></div>
</td>
</tr>
<tr>
<td align="center" width="100px">
姓名:
</td>
<td align="center">
<input type="text" name="name">
</td>
</tr>
<tr>
<td align="center" width="%45">
性别:
</td>
<td align="center">
<input type="radio" name="sex" value="男">
男
<input type="radio" name="sex" value="女">
女
</td>
</tr>
<tr>
<td align="center" width="30%">
年龄:
</td>
<td align="center" width="300px">
<input type="text" name="age">
</td>
</tr>
<tr>
<td align="center" width="100px">
地址:
</td>
<td align="center" width="300px">
<input type="text" name="addr">
</td>
</tr>
</table>
</form>
<h1 id="myHead" onclick="getValue()">
看看三种获取节点的方法?
</h1>
<p>
点击标题弹出它的值。
</p>
<input type="button" onclick="getElements()"
value="看看name为sex的节点有几个?" />
<Br>
<input type="button" onclick="getTagElements()"
value="看看标签名为input的节点有几个?" />
<script type="text/javascript">
function getValue()
{
var myH = document.getElementById("myHead");
alert(myH.innerHTML)
}
function getElements()
{
var myS = document.getElementsByName("sex");
alert(myS.length);
}
function getTagElements()
{
var myI = document.getElementsByTagName("input");
alert(myI.length);
}
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<form>
请选择你爱好:<br>
<input type="checkbox" name="hobby" id="hobby1"> 音乐
<input type="checkbox" name="hobby" id="hobby2"> 登山
<input type="checkbox" name="hobby" id="hobby3"> 游泳
<input type="checkbox" name="hobby" id="hobby4"> 阅读
<input type="checkbox" name="hobby" id="hobby5"> 打球
<input type="checkbox" name="hobby" id="hobby6"> 跑步 <br>
<input type="button" value = "全选" onclick = "checkall();">
<input type="button" value = "全不选" onclick = "clearall();">
<p>请输入您要选择爱好的序号，序号为1-6:</p>
<input id="wb" name="wb" type="text" >
<input name="ok" type="button" value="确定" onclick = "checkone();">
</form>
<script type="text/javascript">
function checkall(){
var hobby = document.getElementsByTagName("input");
// 任务1
for(var i = 0; i < hobby.length; i++) {
if (hobby[i].type == "checkbox") hobby[i].checked = true;
}
}
function clearall(){
var hobby = document.getElementsByName("hobby");
// 任务2
for (var i = 0; i < hobby.length; i++) {
if (hobby[i].type == "checkbox") hobby[i].checked = false;
}
}
function checkone(){
//var hobby = document.getElementsByName("hobby");
var j=document.getElementById("wb").value;
var m = document.getElementById("hobby"+j);
m.checked = true;
//hobby[parseInt(j)].checked = true;
// 任务3
}
</script>
</body>
</html>
getAttribute()方法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>getAttribute()</title>
</head>
<body>
<p id="intro">课程列表</p>
<ul>
<li title="第1个li">HTML</li>
<li>CSS</li>
<li title="第3个li">JavaScript</li>
<li title="第4个li">Jquery</li>
<li>Html5</li>
</ul>
<p>以下为获取的不为空的li标签title值:</p>
<script type="text/javascript">
var con=document.getElementsByTagName("li");
for (var i=0; i< con.length;i++){
var text = con[i].getAttribute("title");
if(text!=null)
{
document.write(text+"<br>");
}
}
</script>
</body>
</html>
setAttribute方法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<p id="intro">我的课程</p>
<ul>
<li title="JS">JavaScript</li>
<li title="JQ">JQuery</li>
<li title="">HTML/CSS</li>
<li title="JAVA">JAVA</li>
<li title="">PHP</li>
</ul>
<h1>以下为li列表title的值,当title为空时，新设置值为"WEB前端技术":</h1>
<script type="text/javascript">
var Lists=document.getElementsByTagName("li");
for (var i=0; i<Lists.length;i++)
{
var text = Lists[i].getAttribute("title");
document.write(text +"<br>");
if(text=="")
{
Lists[i].setAttribute("title", "WEB前端技术");
document.write(Lists[i].getAttribute("title")+"<br>");
}
}
</script>
</body>
</html>
节点属性
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>节点属性</title>
</head>
<body>
<ul>
<li>javascript</li>
<li>HTML/CSS</li>
<li>jQuery</li>
</ul>
<script type="text/javascript">
var text = document.getElementsByTagName("li");
for (var i = 0; i < text.length; i++) {
document.write(text[i].nodeName+"<br>");
document.write(text[i].nodeValue+"<br>");
document.write(text[i].nodeType+"<br>");
}
</script>
</body>
</html>
childNodes
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div>
javascript
<p>javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var x = document.getElementsByTagName("div")[0].childNodes;
for (var i = 0; i < x.length; i++) {
document.write(x[i].nodeName+"<br>");
document.write(x[i].nodeValue+"<br>");
document.write(x[i].nodeType+"<br>");
}
</script>
</body>
</html>
firstChild和lastChild
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="con">
<p>javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var x=document.getElementById("con");
document.write(x.firstChild.nodeName+"<br>");
document.write(x.lastChild.nodeName+"<br>");
</script>
</body>
</html>
parentNode
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id="con">
<li id="lesson1">javascript
<ul>
<li id="tcon"> 基础语法</li>
<li>流程控制语句</li>
<li>函数</li>
<li>事件</li>
<li>DOM</li>
</ul>
</li>
<li id="lesson2">das</li>
<li id="lesson3">dadf</li>
<li id="lesson4">HTML/CSS
<ul>
<li>文字</li>
<li>段落</li>
<li>表单</li>
<li>表格</li>
</ul>
</li></ul>
<script type="text/javascript">
var mylist = document.getElementById("tcon");
document.write(mylist.parentNode.parentNode.parentNode.lastChild.firstChild.nodeValue)
</script>
</body>
</html>
nextSibling和previousSibling
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>nextSibling</title>
</head>
<body>
<ul id="u1">
<li id="a">javascript</li>
<li id="b">jquery</li>
<li id="c">html</li>
</ul>
<ul id="u2">
<li id="d">css3</li>
<li id="e">php</li>
<li id="f">java</li>
</ul>
<script type="text/javascript">
function get_nextSibling(n){
var x=n.nextSibling;
while (x && x.nodeType!=1){
x=x.nextSibling;
}
return x;
}
var x=document.getElementsByTagName("li")[0];
document.write(x.nodeName);
document.write(" = ");
document.write(x.innerHTML);
var y=get_nextSibling(x);
if(y!=null){
document.write("<br />nextsibling: ");
document.write(y.nodeName);
document.write(" = ");
document.write(y.innerHTML);
}else{
document.write("<br>已经是最后一个节点");
}
</script>
</body>
</html>
appendChild()注意这里是在指定节点的子节点中增加新的子节点
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id="test">
<li>JavaScript</li>
<li>HTML</li>
</ul>
<script type="text/javascript">
var otest = document.getElementById("test");
var newnode = document.createElement("li");
newnode.innerHTML = "PHP";
test.appendChild(newnode);
</script>
</body>
</html>
insertBefore()在已有的子节点前插入一个新的子节点
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id="test"><li>JavaScript</li><li>HTML</li></ul>
<script type="text/javascript">
var otest = document.getElementById("test");
var newnode = document.createElement("li");
newnode.innerHTML = "PHP";
test.insertBefore(newnode, test.childNodes[1]);
</script>
</body>
</html>
removeChild()
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="content">
<h1>html</h1>
<h1>php</h1>
<h1>javascript</h1>
<h1>jquery</h1>
<h1>java</h1>
</div>
<script type="text/javascript">
function clearText() {
var content=document.getElementById("content");
// 在此完成该函数
for (var i = content.childNodes.length-1; i >= 0; i--) {
var x = content.removeChild(test.childNodes[i]);
x = null;
}
/*while (content.childNodes.length > 0) {
var x = content.removeChild(test.childNodes[0]);
x = null;
}*/
}
</script>
<button onclick="clearText()">清除节点内容</button>
</body>
</html>
replaceChild()
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div><b id="oldnode">JavaScript</b>是一个很常用的技术，为网页添加动态效果。</div>
<a href="javascript:replaceMessage()"> 将加粗改为斜体</a>
<script type="text/javascript">
function replaceMessage(){
var newnode = document.createElement("i");
var oldnode = document.getElementById("oldnode");
newnode.innerHTML = oldnode.innerHTML;
oldnode.parentNode.replaceChild(newnode, oldnode);
}
</script>
</body>
</html>
createElement
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
var main = document.body;
//创建链接
function createa(url,text)
{
var a = document.createElement("a");
a.href = url;
a.innerHTML = text;
main.appendChild(a);
}
// 调用函数创建链接
createa(" http://www.imooc.com", "慕课网");
</script>
</body>
</html>
createTextNode
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
.message{
width:200px;
height:100px;
background-color:#CCC;}
</style>
</head>
<body>
<script type="text/javascript">
var element = document.createElement("p");
element.className = "message";
var textNode = document.createTextNode("I love JavaScript!");
element.appendChild(textNode);
document.body.appendChild(element);
</script>
</body>
</html>
浏览器可视区域大小
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript">
var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;
document.write(w + "<br/>");
document.write(h + "<br/>");
</script>
</body>
</html>
网页尺寸
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript">
var w=document.documentElement.scrollWidth || document.body.scrollWidth;
var h=document.documentElement.scrollHeight || document.body.scrollHeight;
document.write(w + "<br/>");
document.write(h + "<br/>");
</script>
</body>
</html>
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript">
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;
document.write(w + "<br>");
document.write(h + "<br>");
</script>
</body>
</html>
JavaScript: Advanced的更多相关文章
- [Javascript] Advanced Console Log Arguments
Get more mileage from your console output by going beyond mere string logging - log entire introspec ...
- [Javascript] Advanced Reduce: Flatten, Flatmap and ReduceRight
Learn a few advanced reduction patterns: flatten allows you to merge a set of arrays into a single a ...
- [Javascript] Advanced Function Scope
Something like 'for' or 'while', 'if', they don't create a new scope: ,,]; ; i < ary.length; i++) ...
- [Javascript] Advanced Reduce: Common Mistakes
Take away: Always check you ruturn the accumulator Always pass in the inital value var data = [" ...
- [Javascript] Advanced Reduce: Additional Reducer Arguments
Sometimes we need to turn arrays into new values in ways that can't be done purely by passing an acc ...
- [Javascript] Advanced Reduce: Composing Functions with Reduce
Learn how to use array reduction to create functional pipelines by composing arrays of functions. co ...
- JavaScript中URL的解码和编码
这些URI方法encodeURI.encodeURIComponent().decodeURI().decodeURIComponent()代替了BOM的escape()和unescape()方法. ...
- javascript中escape()、unescape()、encodeURI()、encodeURIComponent()、decodeURI()、decodeURIComponent()比较
这些URI方法encodeURI.encodeURIComponent().decodeURI().decodeURIComponent()代替了BOM的escape()和unescape()方法.U ...
- JavaScript简易教程（转）
原文:http://www.cnblogs.com/yanhaijing/p/3685304.html 这是我所知道的最完整最简洁的JavaScript基础教程. 这篇文章带你尽快走进JavaScri ...
随机推荐
- ASP.NET网页生成EXCEL并下载（利用DataGrid或GridView等）
前几天要在后台查询数据库内容(用entity framework),将查询出来的信息(List或DataTable形式)转成EXCEL供用户下载.经过谷歌.百度搜索,终于搜出了一些代码.似乎可用了,结 ...
- 通过驱动向打印机发送一段(ESC)控制指令
这个功能看起来挺奇葩的, 写这个是因为有客户在使用驱动连接票据打印机, 但是又要开钱箱, 驱动里只能每张单据都开钱箱, 而这个打印机又不是只打印结帐单 所以就需要用软件控制打印机开钱箱 票据打印机一般 ...
- Python的深拷贝与浅拷贝
一.前奏:熟悉Python内存管理 在Python中,变量在第一次赋值时自动声明,在创建—也就是赋值的时候,解释器会根据语法和右侧的操作数来决定新对象的类型. 引用计数器:一个内部跟踪变量 引用计数: ...
- 【Java 基础篇】【第九课】继承
继承就是为了提高代码的复用率. 利用继承,我们可以避免代码的重复.让Woman类继承自Human类,Woman类就自动拥有了Human类中所有public成员的功能.我们用extends关键字表示继承 ...
- Linux 下动态库 / 静态库（依赖）
一. 依赖动态库的动态库 libfun.so依赖动态库libtest.so(libfun.so动态库里的函数intnothing()调用了libtest.so里的intmytest()函数),而mai ...
- Mongoose中关联查询populate的使用
MongoDB中没有join的特性,因此无法使用join进行表的连接和关联查询,在Mongoose中封装了populate方法,在定义一个 Schema 的时候可以指定了其中的字段(属性)是另一个Sc ...
- Shell Script-读取配置文件
需求 有时候在shell script里面需要一些执行,如果放在程序里面不便于统一管理,并且每一次修改路径都要去script里面改好麻烦,所以统一把路径放在配置文件中方便管理. 问题 如何读取相对应的 ...
- Mockups
Balsamiq Mockups 是一款免费的手绘风格的产品原型设计软件,它一经推出就广受好评,它比纸质的产品原型设计图更加方便存储,而且是简约清爽的手绘风格,UI控件支持自动拖拽,并且可以实现自动对 ...
- Selenium2学习-008-WebUI自动化实战实例-006-易迅登录之 frame 处理
此文主要讲述用 Java 编写 Selenium 自动化测试脚本编写过程中,在因 frame 标签导致页面定位失败,提示 NoSuchElementException 时的,页面元素定位前的 fram ...
- typedef 和 const
1. typedef 允许你为各种数据类型定义新名字 #include <stdio.h>typedef char *ptr_to_char; //这让我看起来,好奇怪,不好读void m ...