使用HTML DOM,您可以访问JavaScript HTML文档的所有元素。HTML(文档对象模型)加载网页时,浏览器将创建该网页的文档对象模型。HTML DOM模型被构建为对象树:。
通过可编程对象模型,JavaScript获得了足够的能力来创建动态HTML。
JavaScript可以改变页面中的所有HTML元素。JavaScript可以改变页面中的所有HTML属性。JavaScript可以改变页面中的所有CSS样式。JavaScript可以响应页面中的所有事件,并找到HTML元素。一般来说,通过JavaScript,你需要操作HTML元素。为此,您必须首先找到元素。有三种方法可以做到:
按id查找HTML元素按标签名查找HTML元素按类名查找HTML元素按id查找HTML元素在DOM中查找HTML元素最简单的方法就是使用元素的id。本示例查找id='intro': instance的元素。
var x=document . getelementbyid(' intro ');如果找到了元素,方法会将元素作为对象返回(在x中)。如果找不到元素,x将包含null。通过标记名查找HTML元素本示例查找id='main '的元素,然后查找id='main '元素中的所有p元素:实例。
var x=document . getelementbyid(' main ');var y=x . getelementsbytagname(' p ');在本例中,getElementsByClassName函数用于查找class='intro ':实例的元素。
var x=document . getelementsbyclassname(' intro ');
更改HTMLHTML DOM允许JavaScript更改HTML元素的内容。更改HTML输出流JavaScript可以创建动态HTML内容:今天的日期是:WED 2015年10月21日14:4:25 GMT 0800(中国标准时间)。在JavaScript中,document.write()可用于将内容直接写入HTML输出流。例子
!DOCTYPE html html bodyscriptdocument . write(Date());/script/body/htmllamp,加载文档后不要使用document.write()。这将覆盖文档。
更改HTML内容时使用innerHTML属性,这是修改HTML内容最简单的方法。要更改HTML元素的内容,请使用以下语法:document.getelementbyid (id)。innerhtml=newhtmlThis本示例更改p:元素实例的内容。
htmlbodyp id='p1'Hello World!/pscript document . GetElementByID(' P1 ')。innerHTML=“新文本!”;/script/body/html本示例更改h1元素:instance的内容。
!DOCTYPE html html body h1 id=' Header ' old Header/h1 script var元素=document . getelementbyid(' Header ');element.innerHTML=' New Header/脚本/正文/html
示例说明:
上面的HTML文档包含id为“header”的h1元素。我们使用HTML DOM来获取id='header '的元素。JavaScript会更改这个元素(innerHTML)的内容,并更改HTML属性。如果需要更改HTML元素的属性,请使用以下语法:
Document.getelementbyid (id)。属性=新值本示例更改img元素:实例的src属性。
!DOCTYPE html htmlbodyimg id=' image ' src=' http 3360 smiley . gif ' script document . getelementbyid(' image ')。src=' http : landscape . jpg ';/script/body/html示例说明:
上面的HTML文档包含id为“image”的img元素。我们使用HTML DOM来获取id='image '的元素。JavaScript更改此元素的属性(将“smiley.gif”更改为“landscape.jpg”)。