关于prompt(message)这个函数，它是有返回值的，返回值是一个字符串型的，下面是代码：
<!doctype <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
<script type="text/javascript">
var name=prompt("请输入你的名字");
document.write("欢迎<strong>"+name+"来到这里！</strong>");
</script>
</head>
<body>
</body>
</html>
当输出参数后，将显示“欢迎参数值来到这里！”
但是当点击取消后将显示“欢迎null来到这里！”
下面是关于文档的一些内容
document的11个属性：
1.title
虽然我们一般在h5中已经在title标签中设置了文档标题，但是我们还可以用js来动态的改变文档的标题，比如我的代码
如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
<script type="text/javascript">
var a=0;
window.οnlοad=function(){
var t=setInterval("movtitle()",1000);
}
function movtitle(){
if(a==1){
document.title="欢迎来到这里！"
a=0;
}else{
document.title="welcome here！";
a=1;
}
}
</script>
</head>
<body>
</body>
</html>
2.url
用来显示当前页面的URL
3.fileCreateDate（创建日期）
4.fileModifiedDate（可以精确到天）
5.lastModigied（可以精确到秒）
6.fileSize
下面是对文件日期调用的代码，
<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
<script type="text/javascript">
document.write("文档的当前日期是："+document.fileCreateDate+"<br/>");
document.write("文档的修改日期是："+document.fileModifiedDate+"<br/>");
document.write("文档的最后一次修改日期是："+document.lastModified+"<br/>");
document.write("文档的大小是："+document.fileSize+"<br/>");
</script>
</head>
<body>
</body>
</html>
但是，只有最后的修改日期可以得到，并且得到的日期是不对的，而其他的日期是undefined。不知道是什么原因，有知
道的大神指点一下
7.fgcolor(文档的前背景)
8.bgcolor（文档的背景颜色）
其实这两个颜色一个是文字的颜色，一个是背景颜色，前背景颜色就是文章的颜色，不知道为啥我的两个浏览器不能显示
，一个是百度，一个是谷歌，
9.linkColor（未访问的超链接）
10.alinkColor(激活状态的超链接)
11.vlinkColor(已访问的超链接)
这三个方法，小编在这里没办法给出演示结果，不知道是浏览器的原因，就是不能显示，
document的4个基本的方法
1.document.write()
2.document.writeln()
上面的这两个方法其实是差不多的，都是输出内容，但是writeln输出后是有空格的，而write是没有空格的，writeln（
“字符串”）=write（“字符串\n”），在<pre>和<xme>标签下会显示不同，writeln是以行显示，而write是在同行显示
，比如：
document.writeln("<pre>输出字符串1</pre>")
<pre>输出字符串2</pre>
<pre>输出字符串3</pre>
运行结果是显示3行。
3.document.getElementById()
4.document.getElementsByName()
需要注意的最后一个方法，调用元素名字的时候，方法名时不同于第三个方法的
今天还新学了关于dom的一些知识
首先是dom中一些基础的节点属性
1.parentNode
2.childNodes(子节点集合)
3.fristChild
4.lastChild
5.previousSibling（当前节点的上一个兄弟节点）
6.nextSibling（当前节点的下一个节点）
7.attributes（节点的属性列表）
8.nodeValue
9.nodeType
10.nodeName
这里需要注意的是
添加的js最好放在body闭合标签的上面，如果放到head的里面代码是不一样的
当放到body闭合标签之前的代码为：
var e=document.getElementById("myul");
if(e.parentNode){
alert("列表的父节点是存在的！");
}（这里“myul”是我定义的一个元素标签id）
而放到head后面则为：
window.οnlοad=function(){
var w=document.querySelector(".fristli");
if(w.firstChild){
alert("不存在子节点");
}
}（这里“.fristli”是我定义的一个标签的classname）
在节点操作中最常用的节点操作是下面的5个
1.创建节点
2.删除节点
3.复制节点
4.替换节点
5.插入节点
在说这几个操作前先说一下怎么查到元素，有两个方法
1.document.getElementById()
2.doucment.getElementsByName()
这两个是有区别的，第一个返回一个元素的id号，第二个返回一个数组，返回的是数组中某个下标元素
第一个非常简单就不添加代码了，下面是第二个方法的代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
</head>
<body>
<input type="radio" value="btn_1" name="btn"/>
<input type="radio" value="btn_2" name="btn"/>
<input type="radio" value="btn_3" name="btn"/>
<input type="radio" value="btn_4" name="btn"/>
<input type="radio" value="btn_5" name="btn"/>
<script type="text/javascript">
alert(document.getElementsByName("btn")[1].value);
</script>
</body>
</html>
只显示“btn_2”
对于插入节点
简单的只需要4步就可以了比如插入一行字符串
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
</head>
<body>
<input type="radio" value="btn_1" name="btn"/>
<input type="radio" value="btn_2" name="btn"/>
<input type="radio" value="btn_3" name="btn"/>
<input type="radio" value="btn_4" name="btn"/>
<input type="radio" value="btn_5" name="btn"/>
<script type="text/javascript">
var e=document.createElement(
"h1")
var txt=document.createTextNode("这里是新添加的元素！");
e.appendChild(txt);
document.body.appendChild(e);
</script>
</body>
</html>
第一行，选择要插入的标签名，第二行是要添加的文本，第三行是将文本加入到标签中，第四行是将标签添加到页面中
当添加一个复杂的按钮时，比如一个button按钮，代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
</head>
<body>
<input type="radio" value="btn_1" name="btn"/>
<input type="radio" value="btn_2" name="btn"/>
<input type="radio" value="btn_3" name="btn"/>
<input type="radio" value="btn_4" name="btn"/>
<input type="radio" value="btn_5" name="btn"/>
<script type="text/javascript">
var t=document.createElement("input");
t.id="btn_6";
t.type="button";
t.value="按钮";
t.οnclick=function(){
alert(
"新添加的按钮！");
}
document.body.appendChild(t);
</script>
</body>
</html>
下面是插入节点，有两种方法，
1.appendChild()
2.insertBefore()
下面是为ul元素添加li元素的代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
</head>
<body>
<div>
<ul id="myul">
<li>HTML</li>
<li>javascript</li>
<li>css</li>
</ul>
<input type="text" id="mytext"/>
<input type="button" value="提交按钮" id="mybtn" οnclick="myclick()"/>
</div>
<script type="text/javascript">
function myclick(){
var x=document.createElement("li");
var txt=document.createTextNode(document.getElementById("mytext").value);
var d=document.getElementById("myul");
x.appendChild(txt);
d.appendChild(x);
}
</script>
</body>
</html>
insertBefore()的作用是将一个新的节点添加到当前节点的末尾
用法：父节点.insertBefore(新的子节点,当前节点)
具体的代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
</head>
<body>
<ul id="myul">
<li>水杯</li>
<li id="myli">手机</li>
<li class="my_li">鼠标</li>
</ul>
<p>请输入内容：<input type="text" id="myinput"/></p>
<p>请输入内容：<input type="text" id="my_input"/></p>
<input type="button" value="添加内容" id="mybtn" οnclick="myclick()"/>
<script type="text/javascript">
function myclick(){
var e=document.createElement("li");
var w=document.createElement("li");
var txt=document.createTextNode(document.getElementById("myinput").value);
var _txt=document.createTextNode(document.getElementById("my_input").value);
e.appendChild(txt);
w.appendChild(_txt);
var myul=document.getElementById('myul');
myul.insertBefore(e,document.getElementById('myli'));
myul.insertBefore(w,document.querySelector('.my_li'));
}
</script>
</body>
</html>
removeChild（） 删除节点
用法：document.body
对于移除字节点，对于a,p,span，li是可以的，代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
</head>
<body>
<ul id="myul">
<li id="myli">手机</li>
<li>鼠标</li>
<li>水杯</li>
</ul>
<a href="#" id="mya">测试</a>
<p id="myp">测试代码</p>
<span id="myspan"> 测试代码2</span>
<input type="button" value="删除" οnclick="mybtn()"/>
<script type="text/javascript">
function mybtn(){
confirm("确定要删除吗？");
var s=document.getElementById('myp');
document.body.removeChild(s);
var sf=document.getElementById('myspan');
document.body.removeChild(sf);
var f=document.getElementById('mya');
document.body.removeChild(f);
var t=document.getElementById('myli');
var l=document.getElementById('myul');
l.removeChild(t);
}
</script>
</body>
</html>
obj.cloneChild(arg) 这个是复制节点，当arg是1或true时，复制的是该节点以及子节点，当arg为0或false时复制的是
该节点本身，不包含子节点。其中，obj是节点复制后放在的位置，代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
</head>
<body>
<ul id="myul">
<li id="myli">手机</li>
<li>鼠标</li>
<li>水杯</li>
</ul>
<input type="button" value="复制添加" οnclick="myadd()">
<script type="text/javascript">
function myadd(){
var i=document.getElementById('myul');
document.body.appendChild(i.cloneNode(1));
}
</script>
</body>
</html>
obj.replaceChild(new,old)替换节点，其中obj是替换节点的父节点，new是新的节点，old是旧的节点，代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
</head>
<body>
<h1 id="tit">原文字</h1>
<hr/>
<p> 输入标签：<input type="text" id="reinput"/></p>
<p> 输入文本：<input type="text" id="re_input"/></p>
<input type="button" value="替换" id="rebtn" οnclick="rebtn()" />
<script type="text/javascript">
function rebtn(){
var a=document.getElementById('tit');
var b=document.getElementById('reinput').value;
var c=document.getElementById('re_input').value;
var d=document.createElement(b);
var txt=document.createTextNode(c);
d.appendChild(txt);
document.body.replaceChild(d,a);
}
</script>
</body>
</html>
<!doctype <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
<script type="text/javascript">
var name=prompt("请输入你的名字");
document.write("欢迎<strong>"+name+"来到这里！</strong>");
</script>
</head>
<body>
</body>
</html>
当输出参数后，将显示“欢迎参数值来到这里！”
但是当点击取消后将显示“欢迎null来到这里！”
下面是关于文档的一些内容
document的11个属性：
1.title
虽然我们一般在h5中已经在title标签中设置了文档标题，但是我们还可以用js来动态的改变文档的标题，比如我的代码
如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
<script type="text/javascript">
var a=0;
window.οnlοad=function(){
var t=setInterval("movtitle()",1000);
}
function movtitle(){
if(a==1){
document.title="欢迎来到这里！"
a=0;
}else{
document.title="welcome here！";
a=1;
}
}
</script>
</head>
<body>
</body>
</html>
2.url
用来显示当前页面的URL
3.fileCreateDate（创建日期）
4.fileModifiedDate（可以精确到天）
5.lastModigied（可以精确到秒）
6.fileSize
下面是对文件日期调用的代码，
<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
<script type="text/javascript">
document.write("文档的当前日期是："+document.fileCreateDate+"<br/>");
document.write("文档的修改日期是："+document.fileModifiedDate+"<br/>");
document.write("文档的最后一次修改日期是："+document.lastModified+"<br/>");
document.write("文档的大小是："+document.fileSize+"<br/>");
</script>
</head>
<body>
</body>
</html>
但是，只有最后的修改日期可以得到，并且得到的日期是不对的，而其他的日期是undefined。不知道是什么原因，有知
道的大神指点一下
7.fgcolor(文档的前背景)
8.bgcolor（文档的背景颜色）
其实这两个颜色一个是文字的颜色，一个是背景颜色，前背景颜色就是文章的颜色，不知道为啥我的两个浏览器不能显示
，一个是百度，一个是谷歌，
9.linkColor（未访问的超链接）
10.alinkColor(激活状态的超链接)
11.vlinkColor(已访问的超链接)
这三个方法，小编在这里没办法给出演示结果，不知道是浏览器的原因，就是不能显示，
document的4个基本的方法
1.document.write()
2.document.writeln()
上面的这两个方法其实是差不多的，都是输出内容，但是writeln输出后是有空格的，而write是没有空格的，writeln（
“字符串”）=write（“字符串\n”），在<pre>和<xme>标签下会显示不同，writeln是以行显示，而write是在同行显示
，比如：
document.writeln("<pre>输出字符串1</pre>")
<pre>输出字符串2</pre>
<pre>输出字符串3</pre>
运行结果是显示3行。
3.document.getElementById()
4.document.getElementsByName()
需要注意的最后一个方法，调用元素名字的时候，方法名时不同于第三个方法的
今天还新学了关于dom的一些知识
首先是dom中一些基础的节点属性
1.parentNode
2.childNodes(子节点集合)
3.fristChild
4.lastChild
5.previousSibling（当前节点的上一个兄弟节点）
6.nextSibling（当前节点的下一个节点）
7.attributes（节点的属性列表）
8.nodeValue
9.nodeType
10.nodeName
这里需要注意的是
添加的js最好放在body闭合标签的上面，如果放到head的里面代码是不一样的
当放到body闭合标签之前的代码为：
var e=document.getElementById("myul");
if(e.parentNode){
alert("列表的父节点是存在的！");
}（这里“myul”是我定义的一个元素标签id）
而放到head后面则为：
window.οnlοad=function(){
var w=document.querySelector(".fristli");
if(w.firstChild){
alert("不存在子节点");
}
}（这里“.fristli”是我定义的一个标签的classname）
在节点操作中最常用的节点操作是下面的5个
1.创建节点
2.删除节点
3.复制节点
4.替换节点
5.插入节点
在说这几个操作前先说一下怎么查到元素，有两个方法
1.document.getElementById()
2.doucment.getElementsByName()
这两个是有区别的，第一个返回一个元素的id号，第二个返回一个数组，返回的是数组中某个下标元素
第一个非常简单就不添加代码了，下面是第二个方法的代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
</head>
<body>
<input type="radio" value="btn_1" name="btn"/>
<input type="radio" value="btn_2" name="btn"/>
<input type="radio" value="btn_3" name="btn"/>
<input type="radio" value="btn_4" name="btn"/>
<input type="radio" value="btn_5" name="btn"/>
<script type="text/javascript">
alert(document.getElementsByName("btn")[1].value);
</script>
</body>
</html>
只显示“btn_2”
对于插入节点
简单的只需要4步就可以了比如插入一行字符串
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
</head>
<body>
<input type="radio" value="btn_1" name="btn"/>
<input type="radio" value="btn_2" name="btn"/>
<input type="radio" value="btn_3" name="btn"/>
<input type="radio" value="btn_4" name="btn"/>
<input type="radio" value="btn_5" name="btn"/>
<script type="text/javascript">
var e=document.createElement(
"h1")
var txt=document.createTextNode("这里是新添加的元素！");
e.appendChild(txt);
document.body.appendChild(e);
</script>
</body>
</html>
第一行，选择要插入的标签名，第二行是要添加的文本，第三行是将文本加入到标签中，第四行是将标签添加到页面中
当添加一个复杂的按钮时，比如一个button按钮，代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
</head>
<body>
<input type="radio" value="btn_1" name="btn"/>
<input type="radio" value="btn_2" name="btn"/>
<input type="radio" value="btn_3" name="btn"/>
<input type="radio" value="btn_4" name="btn"/>
<input type="radio" value="btn_5" name="btn"/>
<script type="text/javascript">
var t=document.createElement("input");
t.id="btn_6";
t.type="button";
t.value="按钮";
t.οnclick=function(){
alert(
"新添加的按钮！");
}
document.body.appendChild(t);
</script>
</body>
</html>
下面是插入节点，有两种方法，
1.appendChild()
2.insertBefore()
下面是为ul元素添加li元素的代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
</head>
<body>
<div>
<ul id="myul">
<li>HTML</li>
<li>javascript</li>
<li>css</li>
</ul>
<input type="text" id="mytext"/>
<input type="button" value="提交按钮" id="mybtn" οnclick="myclick()"/>
</div>
<script type="text/javascript">
function myclick(){
var x=document.createElement("li");
var txt=document.createTextNode(document.getElementById("mytext").value);
var d=document.getElementById("myul");
x.appendChild(txt);
d.appendChild(x);
}
</script>
</body>
</html>
insertBefore()的作用是将一个新的节点添加到当前节点的末尾
用法：父节点.insertBefore(新的子节点,当前节点)
具体的代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
</head>
<body>
<ul id="myul">
<li>水杯</li>
<li id="myli">手机</li>
<li class="my_li">鼠标</li>
</ul>
<p>请输入内容：<input type="text" id="myinput"/></p>
<p>请输入内容：<input type="text" id="my_input"/></p>
<input type="button" value="添加内容" id="mybtn" οnclick="myclick()"/>
<script type="text/javascript">
function myclick(){
var e=document.createElement("li");
var w=document.createElement("li");
var txt=document.createTextNode(document.getElementById("myinput").value);
var _txt=document.createTextNode(document.getElementById("my_input").value);
e.appendChild(txt);
w.appendChild(_txt);
var myul=document.getElementById('myul');
myul.insertBefore(e,document.getElementById('myli'));
myul.insertBefore(w,document.querySelector('.my_li'));
}
</script>
</body>
</html>
removeChild（） 删除节点
用法：document.body
对于移除字节点，对于a,p,span，li是可以的，代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
</head>
<body>
<ul id="myul">
<li id="myli">手机</li>
<li>鼠标</li>
<li>水杯</li>
</ul>
<a href="#" id="mya">测试</a>
<p id="myp">测试代码</p>
<span id="myspan"> 测试代码2</span>
<input type="button" value="删除" οnclick="mybtn()"/>
<script type="text/javascript">
function mybtn(){
confirm("确定要删除吗？");
var s=document.getElementById('myp');
document.body.removeChild(s);
var sf=document.getElementById('myspan');
document.body.removeChild(sf);
var f=document.getElementById('mya');
document.body.removeChild(f);
var t=document.getElementById('myli');
var l=document.getElementById('myul');
l.removeChild(t);
}
</script>
</body>
</html>
obj.cloneChild(arg) 这个是复制节点，当arg是1或true时，复制的是该节点以及子节点，当arg为0或false时复制的是
该节点本身，不包含子节点。其中，obj是节点复制后放在的位置，代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
</head>
<body>
<ul id="myul">
<li id="myli">手机</li>
<li>鼠标</li>
<li>水杯</li>
</ul>
<input type="button" value="复制添加" οnclick="myadd()">
<script type="text/javascript">
function myadd(){
var i=document.getElementById('myul');
document.body.appendChild(i.cloneNode(1));
}
</script>
</body>
</html>
obj.replaceChild(new,old)替换节点，其中obj是替换节点的父节点，new是新的节点，old是旧的节点，代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
</head>
<body>
<h1 id="tit">原文字</h1>
<hr/>
<p> 输入标签：<input type="text" id="reinput"/></p>
<p> 输入文本：<input type="text" id="re_input"/></p>
<input type="button" value="替换" id="rebtn" οnclick="rebtn()" />
<script type="text/javascript">
function rebtn(){
var a=document.getElementById('tit');
var b=document.getElementById('reinput').value;
var c=document.getElementById('re_input').value;
var d=document.createElement(b);
var txt=document.createTextNode(c);
d.appendChild(txt);
document.body.replaceChild(d,a);
}
</script>
</body>
</html>
