本文介绍了JavaScript的基本交互功能，包括对话框、输出框、警告框的使用，以及如何通过JavaScript打开和关闭浏览器窗口。此外，还详细讲解了文档对象模型（DOM）的基础知识，例如如何获取元素、改变HTML内容和样式。
转之于http://www.cnblogs.com/mibear/p/6849905.html 博客园
1.对话框，输出框，警告框
1. document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。
1.对话框，输出框，警告框
1. document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。
2.alert(字符串或变量);
3.confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)。
str：在消息对话框中要显示的文本返回值: Boolean值
4.prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。
语法: prompt(str1, str2);
str1: 要显示在消息对话框中的文本，不可修改
str2：文本框中的内容，可以修改
2.打开新窗口
window.open([URL], [窗口名称], [参数字符串])
URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_self"具有特殊意义的名称。
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。
举例
<script type="text/javascript"> window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>
3.关闭窗口（window.close）
window.close(); //关闭本窗口
或
<窗口对象>.close(); //关闭指定的窗口
4.文档对象模型DOM（Document Object Model）
定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）
三种常见的DOM节点:
1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。
5.通过ID获取元素
document.getElementById(“id”)
6.innerHTML 属性
innerHTML 属性用于获取或替换 HTML 元素的内容。
语法:
Object.innerHTML
注意:
1.Object是获取的元素对象，如通过document.getElementById("ID")获取的元素。
2.注意书写，innerHTML区分大小写。
7.改变HTML样式
语法:
Object.style.property=new style;
<p id="pcon">Hello World!</p>
<script>
var mychar = document.getElementById("pcon");
mychar.style.color="red";
mychar.style.fontSize="20";
mychar.style.backgroundColor ="blue";
<script>
var mychar = document.getElementById("pcon");
mychar.style.color="red";
mychar.style.fontSize="20";
mychar.style.backgroundColor ="blue";
</script>
基本属性表
8.显示和隐藏（display）
网页中经常会看到显示和隐藏的效果，可通过display属性来设置。
语法：
Object.style.display = value
注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
9.控制类名（className 属性）
className 属性设置或返回元素的class 属性。
语法：
object.className = classname
作用:
1.获取元素的class 属性
2. 为网页内的某个元素指定一个css样式来更改该元素的外观
扫一扫
3218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
