JavaScript文档对象模型DOM

前言:

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML

一、JavaScript 能够改变页面中的所有 HTML 元素

1、通过 id 找到 HTML 元素

找见HTML某个特定的标签,并做修改


    
我是谁

你好牛牛!

该实例展示了 getElementById 方法!

2、通过标签名查找 HTML 元素

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为:' + y[0].innerHTML);


查找 id=“main” 的元素,然后查找 id=“main” 元素中的第一个

元素:

//第一种写法
var x = document.getElementById("main");
var y = x.getElementsByTagName("p")[0];


//找出HTML中所有的p标签,并且把第一个标签内容换掉
var y = document.getElementsByTagName("p");
y[0].innerHTML = "勇敢牛牛,不怕困难"




3、通过类名找到 HTML 元素


    

你好牛牛!

该实例展示了 getElementsByClassName 方法!

修改此类标签的元素内容:


    

你好牛牛!

该实例展示了 getElementsByClassName 方法!

4、JavaScript 能够改变页面中的所有 HTML 属性

如需改变 HTML 元素的属性,请使用这个语法:

document.getElementById(id).attribute=新属性值



原图片为 smiley.gif,脚本将图片修改为 landscape.jpg

5、JavaScript 能够改变页面中的所有 CSS 样式

JavaScript HTML DOM - 改变CSS

如需改变 HTML 元素的样式,请使用这个语法:

document.getElementById(id).style.property=新样式




 
 title


 

Hello World!

Hello World!

以上段落通过脚本修改。

6、JavaScript 能够对页面中的所有事件做出反应

HTML DOM 来分配事件:

意思就是:当我干某件事的时候,触发一个怎样的功能








 

点击按钮执行 displayDate() 函数。

如下:

JavaScript文档对象模型DOM_第1张图片

onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。







 
Mouse Over Me

JavaScript文档对象模型DOM_第2张图片

到此这篇关于JavaScript文档对象模型DOM的文章就介绍到这了,更多相关JavaScript文档对象模型内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的