JS DOM

来源：互联网发布：安徽快三遗漏数据查询编辑：程序博客网时间：2024/05/22 10:33

JS DOM

通过HTML Dom ,可访问JavaScriptHTML 文档所有元素

HTML DOM(文档对象模型)

当网页被加载时，浏览器会创建页面的文档对象模型（document object Model）

HTML DOM 模型被构造成为对象的树，我们能够通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML

1. JavaScript能够改变页面中所有的HTML 元素

2. JavaScript能够改变页面中所有的HTML属性

3. JavaScript能够改变页面中所有的CSS 样式

4. JavaScript能够改变页面中所有的事件做出反应

查找HTML元素常用的三种方法

document.getElementById(‘xxx’);该方法返回对拥有指定 id 的第一个对象的引用。

getElementsByClassName(‘xxx’);该方法返回带有指定类名称的对象集合。

getElementsByTagName(‘div’);该方法可返回带有指定标签名的对象的集合。

解决Cannot set property 'innerHTML' of null的方法

网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免这种情况的发生，可以使用以下两种方式:

一. 将脚本代码放在网页的底端，这样在运行脚本代码的时候，可以确保要操作的对象已经加载完成。

引用内部js将script标签写下元素标签之后

比如<body>

</body>

二. 通过window.onload来执行外部脚本代码。

第一种方式感觉比较凌乱（其实推荐使用），往往我们需要将脚本代码放在一个更为合适的地方，那么window.onload方式就是一个良好的选择。window.onload是一个事件，当文档加载完成之后就会触发该事件，可以为此事件注册事件处理函数，并将要执行的脚本代码放在事件处理函数中，于是就可以避免获取不到对象的情况

window.onload=function(){

//执行的代码

}

延伸问题

怎样定义函数？

1. 直接定义函数

var x=2;

vary=3;

function f1(x,y){

return x+y;

}

2.使用Function构造函数

var f2=new Function("x","y","returnx+y;");

3.使用函数直接量

var f3=function(x,y){

return x+y;

}

改变HTML 属性

document.getElementById(id).attribute=newvalue;

attribute指的是属性比如图片的src属性

改变HTML 样式

document.getElementById(id).style.property=new style;

document.getElementById(id).style.width=”800px”;

property指的是样式属性如color

1. 点击事件

例如点击一个button按钮将一个id为title的字体改为红色

通过按钮点击事件设置对文本的显示和隐藏

提示可将元素的visibility设置为 hidden即为隐藏，设置为visible则为显示

我们在点击事件上执行函数

比如更改firstDiv的文本

functiondisplayText(){

document.getElementById("firstDiv").innerHTML="zs";

}

</script>

2. 通过按钮点击事件设置p标签显示当前时间方法Date();

3.onload 和 onunload 事件

onload和 onunload 事件会在用户进入或离开页面时被触发。

onload事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload和 onunload 事件可用于处理 cookie。

在body标签上面添加onload属性

2. onchange事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数小写转大写。

<inputtype="text" id="upperText " onchange="upperCase()">

提示：文本.value=文本.value.toUpperCase();

3. onmouseOver()鼠标移上去和onmouseOut（鼠标移下来）事件

例子：

function mOver(){

document.getElementById("first").innerHTML=”thanks”

}

把鼠标移动上去

</div>

写出当鼠标移下来之后输出 nothanks并且背景颜色为红色

4. onmousedown,onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

阅读全文

0 0