Dom笔记整理
1.Dom(document object model) 文档对象模型
用JavaScript 来操作HTML,CSS
2.JavaScript——Dom 就相当于C#——.Net Framework
属性小写，方法大写。
蓝色的是属性 红色的是方法 可以通过前面的颜色进行判断 方法一般小写
字符类型转换成整数类型 parseInt(value,10) 中的10表示转换多少进制 10进制 16进制~~
value=parseInt(value,10)
3.DHTML
CSS+HTML+Dom
嵌套 由内而外进行 点击一下，弹出几个
<table onclick="alert('table123')">
<tr onclick="alert('tr123')">
<td onclick="alert('td123')">
<p onclick="alert('p123')">12345 </p>
</td>
</tr>
</table>
4.简单的给document注册事件
<script type="text/javascript">
function f1() {
alert("123");
}
</script>
<input type="button" value="简单的给文档注册事件" onclick="document.onclick=f1" />
5.显示提示框
<script type="text/javascript">
function f1() {
if (confirm("您真的要退出吗？")) {
window.close();
}
else {
alert("欢迎您继续访问");
}
}
</script>
<input type="button" value="关闭" onclick="f1()" />
6.转向新的页面 navigate 而不是 方法navigator
<script type="text/javascript">
function f1() {
window.navigate("http://www.baidu.com");
}
</script>
<input type="button" value="转向页面" onclick="f1()" />
7.时间间隔属性
<script type="text/javascript">
function f1() {
alert("每隔一段时间我就会出现");
}
var interval;
function setInterval1() {
interval = setInterval("f1()", 2000); //每隔一段时间调用指定的方法
}
function clearInterval1() {
clearInterval(interval); //清除指定的计时器
}
</script>
<input type="button" value="开始计时" onclick="setInterval1()" />
<input type="button" value="停止计时" onclick="clearInterval1()" />
8.跑马灯效果
start 从0 开始数 end 从1开始数
从左开始移动
<script type="text/javascript">
function leftset() {
var left = document.title.charAt(0);
var right = document.title.substr(1, document.title.length - 1);
document.title = right + left;
setInterval("leftset()",3000)
}
function rightset() {
var left = document.title.charAt(document.title.length-1)
var rigth = document.title.substr(0, document.title.length - 1);
document.title = left + rigth;
setInterval("rightset()",3000);
}
</script>
(2)在一个方法里进行 直接对传过来的参数进行判断
<script type="text/javascript">
var str = "left";
function setdir(str) {
if (str == "left") {
var last = document.title.charAt(0);//第一个字符
var first = document.title.substr(1, document.title.length - 1);//剩下的字符
}
else {
var first = document.title.charAt(document.title.length - 1) //最后一个字符
var last = document.title.substr(0, document.title.length - 1)//开始剩下字符
}
document.title = first + last;
}
setInterval("leftset() ",3000);
</script>
<input type="button" value="向左进行跑马灯" onclick="setdir('left')" />
<input type="button" value="向右进行跑马灯" onclick="setdir('right')" />
9.打开模态和非模态窗口
<script type="text/javascript">
function open1() {
window.showModalDialog("001.htm");
}
function open2() {
window.showModelessDialog("001.htm");
}
</script>
<input type="button" value="打开模态窗口" onclick="open1()" />
<input type="button" value="打开非模态窗口" onclick="open2()" />
10.显示当前鼠标移动的位置
<script type="text/javascript">
function documentxy() { ★★★如果没有空格，两个坐标进行相加
document.title = window.event.clientX + " " + window.event.clientY;
}
</script>
<body onmousemove="documentxy()"> ★★★只在有效区域有用
123456
</body>
11.超链接进入判断 window.event.returnValue = false; 禁止后面的执行 return false;
<script type="text/javascript">
var val;
function f1(val) {
if (val == "t") {
alert("可以进入新网页");
}
else {
alert("禁止进入新网页");
window.event.returnValue = false;
}
}
</script>
<a href="http://www.baidu.com" onclick="f1('f')">百度</a>
12.对按下的键进行控制
<script type="text/javascript">
function f1() {
var txt = window.event.srcElement; //获取发生的事件源
if (txt.id == "txt1") {
alert(window.event.keyCode);
}
else if (txt.id == "txt2") {
if (window.event.keyCode >= 48 && window.event.keyCode <= 57) {
}
else {
window.event.returnValue = false; //如果不是，不允许执行后面的操作
}
}
}
</script>
<input type="text" id="txt1" onkeydown="f1()" />
<input type="text" id="txt2" onkeydown="f1()" />
13.获取屏幕的分辨率 window.screen.width window.screen.height
<input type=button value="获取屏幕的分辨率" onclick="alert(window.screen.width+' '+window.screen.height)" />
14.剪贴板的使用
(1)禁止复制 粘贴
<input type="text" oncopy="alert('禁止复制');return false"/>
<input type="text" onpaste="alert('禁止粘贴');return false" />
(2)允许复制 粘贴，使用剪贴板
<script type="text/javascript">
function f1() {
clipboardData.setData("text", t1.value+"传智播客"+"http://www.itcast.cn"); //剪贴板里设置值 文本 t1.value
}
function f2() {
t2.value = clipboardData.getData("text"); //t2.value 剪贴板里获取值
}
</script>
<input type="text" id="t1" oncopy="alert('禁止复制');return false" />
<input type="button" value="复制" onclick="f1()" />
<input type="text" id="t2" onpaste="alert('禁止粘贴');return false" />
<input type="button" value="粘贴" onclick="f2()" />
(3)
body document
(1)onload 网页加载完毕时触发
放到元素的后面，则是元素加载完后触发，网页有可能未全部加载完毕
放到body的后面，则是网页全部加载完毕后触发
(2)onunload 网页关闭(或者离开时触发)
(3)onbeforeunload 网页准备关闭时触发
onbeforeunload="window.event.returnValue='您真的要退出吗？'";
(4)
获取当前页面的URL onclick ="alert(location.href)"
<input type="button" value ="获取当前页面的地址" onclick ="alert(location.href)" />
改变当前页面的地址
<input type="button" value ="改变当前页面的地址" onclick="location.href='http://www.lihuaedu.com'" />
刷新当前页面
<input type="button" value ="刷新当前页面的地址" onclick ="window.location.reload();" />
<input type ="text" />
(5)
内容联盟 广告代码 只要别人的内容跟着改变，则自己的跟着改变
http://news.baidu.com/newscode.html
&&统计访问流量
<script src='http://s23.cnzz.com/stat.php?id=613505&web_id=613505&show=pic2' language='JavaScript' charset='gb2312'></script>
15.document 动态创建元素
(1)document.write 如果写在方法里，调用方法的话，会冲掉原有的内容
document.write("<a href='http://www.itcast.cn'>传智播客</a>");
document.write("<input type='button' value='动态创建的按钮'/>");
(2)document.createElement
function f1() {
var div1 = document.getElementById("div1");
var input1 = document.createElement("input");
input1.type = "button"
input1.value = "按钮1"
div1.appendChild(input1);
// href 链接的网址 innerText 链接的文本 innerHTML可以对链接的文本进行修饰
var link1 = document.createElement("a");
link1.href = "http://www.baidu.com";
link1.innerText = "百度";
link1.innerHTML="<font color='red'>百度</font>"
div1.appendChild(link1);
}
16.弹出选定的单选按钮的值
<script type="text/javascript">
function f1() {
var radio1 = document.getElementsByName("gender"); //获取所有name为gender的单选按钮
for (var i = 0; i < radio1.length; i++) {
if (radio1[i].checked) { //如果单选按钮被选中了
alert(radio1[i].value);
}
}
}
</script>
<input type="radio" value="男" name="gender" />男
<input type="radio" value="女" name="gender" />女
<input type="radio" value="保密" name="gender" />保密
<input type="button" value="弹出内容" onclick="f1()" />
17.动态改变按钮的文本，背景颜色
<script type="text/javascript">
function f1() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "button") {
inputs[i].onclick = f2;
}
}
}
function f2() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i] == window.event.srcElement) {
inputs[i].value = "哈哈";
inputs[i].style.backgroundColor = "red"
}
else {
inputs[i].value = "按钮";
inputs[i].style.backgroundColor = "white"
}
}
}
</script>
18.倒计时同意协议 声明一个时间数 如果大于0则继续执行 否则取相反的结果
<script type="text/javascript">
var count = 10;
var interval1;
function f1() {
var btn1 = document.getElementById("btn1");
if (count > 0) {
btn1.value = "倒计时" + count + "秒将同意本协议";
count--;
}
else if (count == 0) {
btn1.value = "同意注册";
btn1.disabled = false;
clearInterval(interval1);
}
}
interval1 = setInterval("f1()", 1000);
</script>
<body onload="f1()">
<input type="button" value="同意" id="btn1" disabled="disabled" />
</body>
19.动态显示美女图片
★★★先取得图片的标记，图片的路径，然后进行拼接路径，最后进行下转换
<script type="text/javascript">
function imgdis() {
var img1 = document.getElementById("img");
var now = new Date();
var filename = "mm/" + binary(now.getHours()) + "_" + binary(now.getSeconds()) + ".jpg";
img1.src = filename;
img1.width = 200;
img1.height = 160;
}
function binary(num) {
if (num < 10) {
return "0" + num;
}
else {
return num;
}
}
setInterval("imgdis()",1000);
</script>
<body onload="imgdis()">
<img id="img"/>
</body>
20.实现网页的开关灯效果
★★在CSS中声明两个类，开灯和关灯
<style type="text/css">
.open1
{
background-color: White;
}
.close1
{
background-color: Black;
}
</style>
★★在Dom中声明两个方法，开灯的方法，让 document.body 的类名className为open1
★★★style是一个只读属性
<script type="text/javascript">
function open1() {
document.body.className = "open1";
}
function close1() {
document.body.className = "close1";
}
</script>
<input type="button" value="开灯" onclick="open1()" />
<input type="button" value="关灯" onclick="close1()" />
21.实现评分控件的操作
<script type="text/javascript">
function onmousemove1() {
var table1 = document.getElementById("tab1");
var td1 = tab1.getElementsByTagName("td");
for (var i = 0; i < td1.length; i++) {
td1[i].onclick = f;
td1[i].style.cursor="pointer";
}
}
function f() {
var table1 = document.getElementById("tab1");
var td1 = tab1.getElementsByTagName("td");
var n = indexOf1(td1);
for (var i = 0; i <= n; i++) {
td1[i].style.backgroundColor = "red"
}
for (var i = n + 1; i < td1.length; i++) {
td1[i].style.backgroundColor = "white"
}
}
★★★★★根据传递过来的单元格判断当前处在哪个单元格上
function indexOf1(td1) {
var j = -1;
for (var i = 0; i < td1.length; i++) {
if (td1[i] == window.event.srcElement) {
j = i;
break;
}
}
return j; //返回当前单元格的索引
}
</script>
★★★★★获取当前的索引，如果是第三个的话，那么前面的全部变色，后面的全部变为另外一种颜色。
22.隔行变色 鼠标移动到上面变为另外一种颜色
<script type="text/javascript">
function f1() {
var ul1 = document.getElementById("ul");
var li1 = ul1.getElementsByTagName("li");
for (var i = 0; i < li1.length; i++) {
li1[i].onmouseover = onOver; ★★这个地方如果是onmousemove的话，下面的无法执行
li1[i].onmouseout = onOut;
if (i % 2 == 0) {
li1[i].style.backgroundColor = "red";
}
else {
li1[i].style.backgroundColor = "green";
}
}
}
var defaultColor1; //用一个中间变量进行存储
function onOver() {
defaultColor1 = this.style.backgroundColor;
this.style.backgroundColor = "gray";
}
function onOut() {
this.style.backgroundColor = defaultColor1;
}
</script>
23.文本框的简单控制
(1)简单的文本框获得焦点，离开焦点
<script type="text/javascript">
function txt1() {
var txt1 = document.getElementById("txt1");
if (txt1.value == "请输入要搜索的内容") {
txt1.value = "";
}
else if (txt1.value == "") {
txt1.value = "请输入要搜索的内容";
}
}
</script>
<input type="text" value="请输入要搜索的内容" id="txt1" onfocus="txt1()" onblur="txt1()" />
(2)简易的金额文本框输入与输出
第一步：对所有的文本框的onkeydown 注册一个事件，当按下的不是数字键时，就禁止下面的操作
var txt = document.getElementsByTagName("input");
txt.type = "text";
for (var i = 0; i < txt.length; i++) {
txt[i].onkeydown = function () {
var k = window.event.keyCode;
if ((k == 9) || (k == 13) || (k == 46) || (k == 8) || (k == 189) || (k == 109) || (k == 190) || (k == 110) || (k >= 48 && k <= 57) || (k >= 96 && k <= 105) || (k >= 37 && k <= 40)) {
}
else {
return false;
}
}
}
第二步：如果用户把含有非数字的字符内容粘贴到文本框的话，那么，禁止用户进行粘贴操作
//禁止进行粘贴操作
txt[i].onpaste = function () {
//获取剪贴板里的内容
var txtclip = clipboardData.getData("text")
//声明一个正则表达式
var reg = /^\d+[.]*\d*$/;
if (!reg.test(txtclip)) {
return false;
}
}
第三步：如果离开文本框的话，那么文本向右对齐，同时进行千位符的操作
//离开焦点的时候,文本框里的内容向右对齐
txt[i].onblur = function () {
this.style.textAlign = "right";
this.value = commafy(this.value);
}
第四步：如果光标在原先的文本上，那么就让文本向左对齐，同时替换文本框内的所有千位符
//当获得焦点时，让文本向左对齐，同时替换掉原先的千位符
txt[i].onfocus = function () {
this.style.textAlign = "left";
var reg = /,/g;
this.value = this.value.replace(reg, "");
}
24.层的控制
(1)层的显示和隐藏
<script type="text/javascript">
function f1() {
var div1 = document.getElementById("div1");
var btn1 = document.getElementById("btn1");
if (div1.style.display == "none") {
div1.style.display = "";
btn1.value = "隐藏";
}
else {
div1.style.display = "none";
btn1.value = "显示";
}
}
</script>
<div id="div1">
百度
</div>
<input type="button" value="隐藏层" id="btn1" onclick="f1()" />
(2)层的定位
①absolute,relative可以控制层的 top left 而static则不能控制层的top left
②absolute 相对于浏览器的绝对定位，不会随着其他层位置的改变而改变
relative 是相当于上面层的定位，上面层位置发生改变，它也跟着发生改变
③fixed 是固定的，不会随着浏览器的水平垂直滚动条的改变而改变。
absolute 会随着浏览器的水平垂直滚动条的改变而改变
(3)层中内容的打散
设置或检索对象内文本的字内换行行为 word-break:break-all;
索或设置当对象的内容超过其指定高度及宽度时如何管理内容 overflow:auto"
<div id="div1" style="width:100px; height:150px; background-color:Green; word-break:break-all;overflow:auto">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
25.不同浏览器的Dom差异★★★★★
(1)像素的单位，IE下面可以不加px,而FF浏览器必须加上px;
(2)postion fixed IE8支持，IE6不支持
(3)获取触发事件的IE用的是srcElement 而FF里用的是target
(4)更改网页内标签文本 IE用的是innerText, 而FF用的是textContent
(5)有的CSS做的网页 IE是灰白的，而FF是彩色的. 哀悼型网页只有IE支持
其实就是给IE加了个滤镜
26.常用的一些资料★★★★★
(1)事件
body 事件
onload onunload onbeforeunload
常见事件
onclick（单击）、ondblclick（双击）、onkeydown（按键按下）、onkeypress（点击按键）、onkeyup（按键释放）、onmousedown（鼠标按下）、onmousemove（鼠标移动）、onmouseout（鼠标离开元素范围）、onmouseover（鼠标移动到元素范围）、onmouseup（鼠标按键释放
(2)window对象 window.document.body 当前浏览器窗口
方法
alert()
confirm("确定？")
navigate("http://www.baidu.com");
var timerId = setInterval("alert('hello')",500);
clearInterval(timerId)
setTimeout()
clearTimeout()
showModalDialog("window.htm") 模态窗体
showModelessDialog("window.htm")非模态窗体
属性
window.location.href
window.location.reload() 刷新页面
window.event
altKey
ctrlKey
shiftKey
returnValue 取消后续内容的执行
srcElement 引发事件的事件源
keyCode 引发事件时的键值
button 引发事件时的鼠标键1为左键，2为右键，3为左右键同时
screen 分辨率
width
height
clipboardData 粘贴板
getData("Text")
setData("Text",val)
clearData("Text")
history
back() go(-1)
forward() go(1)
document
方法
write()
writeln()
getElementById()
getElementsByName()
getElementsByTagName()
createElement()
appendChild()
