dom基础知识零碎笔记

来源：互联网发布：制作ppt的软件编辑：程序博客网时间：2024/05/25 23:26

dom是HTML页面的模型，将每个标签都做为一个对象

ondblclick双击响应事件

window对象代表当前浏览器窗口，使用window对象的属性，方法可以省略window
如alert()
confirm()确定，取消按钮的对话框
navigate()导向到另外一个网站

setInterval每隔一段时间执行指定的代码。第一个参数是代码的字符串
每二个参数是间隔时间。返回值是定时器的标识
setInterval("alert('hello')",5000);

clearInterval取消setInterval的定时执行。

var intervalid=setInterval("alert('hello')",5000);
clearInterval(intervalid);

setTimeout定时执行。不像setInterval那样重复定时执行
只执行一次
clearTimeout清除定时
interval:间隔 timeout:超时
var timeoutId=setTimeout("alert('hello')",2000);

onload:网页加载完毕时触发。浏览器是一边下载一边执行
可能会出现js执行时需要操作某个元素，这个元素还没有加载
如果这时就要把操作的代码放到onload事件中或
把js放到元素之后
元素的onload是元素自己加载完成后触发

onunload网页关闭时触发
<body onunload="confirm('确定要离开吗')">

onbeforeunload在网页准备关闭时触发
<body onbeforeunload="window.event.returnValue='文章将会丢失'">
</body>

onclick ondblclick onkeydown onkeypress onmousemove onmouseout onmouseover onmouseup鼠标释放

window.location.href="http://www.baidu.com" 重新导向新的地址

window.location.reload()刷新页面

window.event用来获得发生事件的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取得相关信息.类似于winform中的e
altkey bool类型，表示发生事件时alt键时否被按下。
ctrlkey shiftkey
<input type="button" value="click" onclick="if(event.crtlKey) alert('ctrl click');"/>

clientX,clientY发生事件时鼠标在客户区的坐标
screenX screenY发生事件时鼠标在屏幕上的坐标
offsetX，offsetY发生事件时鼠标相对于事件源的坐标
returnValue，如果将returnValue设置为false，就会取消默认事件的处理.如禁止表单的提交。禁止href的访问

srcElement获得事件源对象
keyCode发生时间时的按键值
button发生时间时鼠标按键。1为左键，2为右键，3为左右键同时按
<body onmousedown="if(event.button==2){alert('禁止复制')}">

screen对象，屏幕的信息
alert("分辨率: "+screen.width+"*"+screen.height);
if(screen.width<1024 || screen.height<768)
alert("分辨率太低");

不同的分辨率，显示不同的网页。用if判断

clipboardData对象，对粘贴板的操作。
clearData("Text") 清空粘帖板
getData("Text")读取粘贴板的值，返回值为粘贴板中的内容
setData("Text",val)设置粘贴板中的值

当复制的时候body的oncopy方法被触发，直接return false 就是禁止复制<body oncopy="alert('禁止复制');return false;">
很多元素也有oncopy，onpaste事件

history操作历史记录
window.history.back()
window.history.forward()
window.history.go(-1)
window.history.go(1)
<a href="javascript:window.history.back()">后退</a>

getElementById
根据元素的id获得对象。不建议直接通过id操作元素，而是通过getElementById
getElementByName，根据元素的name获得对象。由于页面中元素的name可以重复，所以返回值是对象数组
getElementByTagName获得指定标签名称的元素数组。比如getElementByTagName("p")可以获得所有的<p>的标签

可以调用document.createElement方法来创建具有指定标签的DOM对象。然后通过调用某个元素的appendChild方法将新创建的元素添加到相应的元素下
function showit(){
var divMain=document.getElementById("divMain");
var btn=document.createElement("input");
btn.type="button";
btn.value="动态";
divMain.appendChild(btn);
}
<div id="divMain"></div>
<input type="button" value="ok" onclick="showit()"/>

innerText,innerHTML
几乎所有DOM元素都有innerText,innerHTML属性，
分别是元素标签内内容的文本表示形式和HTML源代码。可读可写
<a id="link1" href="http://www.baidu.com">baidu</a>
<input type="button" value="inner"
onclick="alert(document.getElementById('link1').innerText);
alert(document.getElementById('link1').innerHTML)">

使用innerHTML来代替createElement
<html>
<head>
<title></title>
<script type="text/javascript">
function createlink(){
var divMain=document.getElementById("divMain");
divMain.innerHTML="<a href='http://www.baidu.com'>百度</a>";
}
</script>
</head>
<body onload="createlink()">
<div id="divMain"></div>
</body>
</html>

事件冒泡如果A嵌套在B中，那么A被点击不仅A 的onclick事件会被触发，B的onclick也会被触发。触发的顺序是由内而外
this。除了可以使用event.srcElement在事件响应函数中，this也表示发生事件的控件

修改元素的样式不是设置class属性，而是className属性。

单独修改样式的属性使用 "style属性名"
注意在css中属性名在js操作的时候属性名可能是不一样的
主要集中在那些属性名中含有-的属性。因
为js中-是不能做属性，类名的。
所以css中背景颜色是background-color
而js中是style.background.
font-size ----style.fontSize;margin-top----style.marginTop

<input type="button" value="AAA" onclick="this.style.color='red'"/>

层的操作
元素的position样式值
static无定位，显示在默认位置
absolute绝对定位
fixed相对于窗口的固定定位，位置不会随着浏览器的滚动而变化
relative相对元素默认位置的定位。
如果要通过代码修改元素的坐标一般使用absolute，然后修改top，left的样式

浏览器navigator对象
appName浏览器名称
appVersion版本
brosewerLanguage浏览器语言
为使开发出来的js脚本程序可以兼容不同的web浏览器，，就需要在脚本中检测版本
<html>
<head>
<title></title>
<script language="javascript">
var appName=navigator.appName;
var version=parseFloat(navigator.appVersion);
if((appName=="Netscape" || appName=="Microsoft Internet Explorer")&& (version>=4)){
alert("你的浏览器"+appName+version.toString()+"符合本系统要求");
}else{
alert("你的浏览器"+appName+version.toString()+"不符合本系统要求");
}
</script>
</head>
<body>
</body>
</html>