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 ...
随机推荐
- mysql参数，蛮全的
网上有很多的文章教怎么配置MySQL服务器,但考虑到服务器硬件配置的不同,具体应用的差别,那些文章的做法只能作为初步设置参考,我们需要根据自己的情况进行配置优化,好的做法是MySQL服务器稳定运行了一 ...
- 将数据导入hive，将数据从hive导出
一:将数据导入hive(六种方式) 1.从本地导入 load data local inpath 'file_path' into table tbname; 用于一般的场景. 2.从hdfs上导入数 ...
- Scala Tail Recursion (尾递归)
Scala对尾递归进行了优化,甚至提供了专门的标注告诉编译器需要进行尾递归优化.不过这种优化仅限于严格的尾递归,间接递归等情况,不会被优化. 尾递归的概念 递归,大家都不陌生,一个函数直接或间接的调用 ...
- php---文件上传分析
文件上传: 先抄一段:预定义变量$_FILES数组有5个内容: $_FILES['userfile']['name']——客户端机器文件的原名称 $_FILES['userfi ...
- ArcGIS Engine开发之旅01---产品组成、逻辑体系结构
原文:ArcGIS Engine开发之旅01---产品组成.逻辑体系结构 ArcGIS Engine 由两个产品组成: 面向开发人员的软件开发包(ArcGIS Engine Developer k ...
- linux power button
最近需要使用到power button按键,linux中有gpio keys的机制,只要注册即可. device注册 arch/arm/mach-mx6/board-mx6q_sabresd.c #d ...
- JDK的安装！力求简单明了！
作为一个java语言的开发人员,第一件事就是安装JDK,就像当兵的要有刀枪,学生要有书本纸笔一样!话不多说,配置如下: 1.下载一个JDK安装包,解压到任意目录,我解压的是:C:\Tools\Java ...
- MySQL注释符
mysql注释符有三种:1.#...(注释至行末,推荐)2.-- ...(两条短线之后又一个空格)3./*...*/(多行注释) 1.
- jboss漏洞导致服务器中毒
中毒现象 1. 网络出现拥塞,访问延迟增加. 2. 系统定时任务表中出现异常的定时任务. 3. 出现异常进程. 4. $JBOSS_HOME/bin或/root目录下出现大量的异常文件. 现象 ...
- JS函数创建的具体过程
JS函数创建的过程: 1.新建Object对象F,类型设置为Function 2.设置F.__proto__ = Function.prototype 3.设置F.constructor = Func ...