零起点HTML5+CSS3+JavaScript+jQuery前端开发案例式教程PPT课件（共14章）09JavaScript获取元素.pptVIP

7.2.3.1 DOM对象常用属性：元素内容 示例：获取div元素及内容，设置div元素的内容为span style=color:red;中国加油！！！/span。 !DOCTYPE html html head script type=text/javascript window.onload = function(){ //获取jy对象 var jy= document.getElementById(jy); jy.innerHTML=span style=color:red;中国加油！！！/span; } /script /head body div id=jy武汉加油/div /body /html 运行效果 代码 7.2.3.2 DOM对象常用属性：元素行内样式的某个样式 获取DOM元素行内样式的某个样式 格式: DOM元素名.style.某个样式 示例：重设置div元素的行内样式：文字颜色、宽度、高度、字大小。 !DOCTYPE html html head script type=text/javascript window.onload = function() { //获取id名为ys的元素 var ys = document.getElementById(ys); // 重新设置ys元素的行内样式的某个样式 ys.style.color = green; ys.style.width = 200px; ys.style.height = 200px; //行内样式中的样式名中有-时，要使用驼峰命名法 ys.style.fontSize = 30px; } /script /head body div id=ys style=color: red;font-size: 20px; width: 100px;height:100px; 贵阳欢迎您！ /div /body /html 运行效果 代码 * * 7.2 JavaScript获取元素 7.2.1 BOM和DOM概述 BOM DOM BOM（Browser Object Model）浏览器对象模型。 BOM对象包括： window对象、history历史记录对象、location网址对象、document文档对象。 DOM结构就像树一样，从文档根(document)，逐步分支展开。每一个元素，都可以看作是树的一个分支节点。每一个元素（节点）之间都存在着如下的一些关系：根结点、父结点、子结点、兄弟结点。 7.2.2 获取DOM对象 方法 说明 返回值 document. getElementById(“id名”) 通过id获取DOM对象 1个元素 document.getElementsByClassName(类名) 通过name获取DOM对象 元素集合 document.getElementsByName(name名) 通过类名获取DOM对象 元素集合 document.getElementsByTagName(标签名) 通过标签获取DOM对象 元素集合 JavaScript如果要操作DOM对象，就必须先要获取DOM对象。获取DOM对象有以下4种常用方法 7.2.2 获取DOM对象 示例：获取类名为gz的元素集合，用循环语句给每个元素加行内样式：文字颜色为红色。 script type=text/javascript window.onload = function() { //获取类名为gz的元素集合，用循环语句给每个元素加行内样式 var gz = document.getElementsByClassName(gz); for(var i = 0; i = gz.length; i++) { gz[i].style.color = red; } } /script /head body div class=gz花溪牛肉粉/div div class=gz花江狗肉/div div class=gz米豆腐/div div class=gz丝娃娃/div div class=gz宫保鸡丁/div /body 运行效果 部分代