JavaScript基于师操作实现查找、修改超文本标记语言元素的内容及属性的方法

本文实例讲述了Java脚本语言基于师操作实现查找、修改超文本标记语言元素的内容及属性的方法。分享给大家供大家参考，具体如下：

当网页被加载时，浏览器会创建页面的文档对象模型（文档对象模型).HTML DOM模型被构造为对象的树。

通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的超文本标记语言。例如：改变超文本标记语言元素，改变超文本标记语言属性，改变半铸钢钢性铸铁(铸造半钢)样式，事件响应。

效果图：

代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/meta http-equiv=' Content-Language ' Content=' zh-cn '/title JavaScript HTML DOM/title head style type=' text/CSS ' body { background-color : # eeee }/style/head dy dy H3(一)通过编号查找超文本标记语言元素/h3 p id='hw'Hello world！/p脚本x=文档。getelementbyid(' HW ')；document.write('pid='hw ')的段落的文本是：' x . inner html '/p ')；/script按钮onclick=' setCurrentTime()'将id='hw '的文字改为当前时间/按钮脚本函数setcurrent time(){ x=document。getelementbyid(' HW ')；x.innerHTML=Date() } /script h3(二)通过标签名查找超文本标记语言元素/H3分区id=' mainDiv ' p这是一个巴拉圭./p p这是另一个段落/p pYes .你说得对！这也是巴拉圭./p /div脚本xx=文档。getelementbyid(' mainDiv ')；标签内容=xx。getelementsbytagname(' p ')；document.write('p使用爪哇岛描述语言查找编号为维护部门下的p标签的内容/p ')；for(I=0；i ){ var tag=tagContents[i] if(tag！=null){文档。写入(' p '标记。innerhtml '/p ')} else { document。写入(' p共有我条内容/p ')中断；} }/脚本h3(三)修改超文本标记语言的属性/H3 img id=' BOL ' src=' images/eg _ bulb off。gif ' width=' 70px ' height=' 120 px '/Pb按钮onclick=' changeSrc()'改变图片资源/button/p脚本函数更改RC(){ x=文档。getelementbyid(' BOL ')；if(x . src。匹配('如灯泡关闭。gif '){ x . src=' images/eg _ bulb on。gif ' } else { x . src=' images/eg _ bulb off。gif ' }/脚本H3(四)修改半铸钢钢性铸铁(铸造半钢)样式/h3 p span id='para_1 '这是一个测试段落跨度按钮onclick=' changeTextColor()'改变文字颜色/button /p p span id='para_2 '这是另一个段落。按钮onclick=' changeTextFont()'改变字体/button /p p span id='para_3 '这里是你好，世界./span按钮onclick=' changeTextSize()'改变字号/button/p p button onclick='更改可见性()'显示/隐藏/button span id='para_4 '示例文字/span /p脚本函数changettextcolor(){ ele _ 1=document。getelementbyid(' para _ 1 ')；ele _ 1。风格。颜色='红色'；} function changetxtfont(){ ele _ 2=document。getelementbyid(' para _ 2 ')；第二单元。风格。字体系列=' Arial} function changettextsize(){ ele _ 3=document。getelementbyid(' para _ 3 ')；ele _ 3。风格。font size=' bigger}文档。getelementbyid(' para _ 4 ')。风格。可见性='可见性'函数更改可见性(){ ele _ 4=文档。getelementbyid(' para _ 4 ')；if(ele _ 4。风格。能见度。匹配('可见){ ele _ 4。风格。可见性='隐藏' } else { ele _ 4。风格。可见性='可见性' } }/脚本/正文/html更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript事件相关操作与技巧大全》 、 《JavaScript操作DOM技巧总结》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。