js html DOM
Posted 万事开头难
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js html DOM相关的知识，希望对你有一定的参考价值。
innerhtml是以字符串形式返回该节点的所有子节点及其值。
通过 id 查找 HTML 元素
在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜鸟教程(runoob.com)</title> 6 </head> 7 <body> 8 9 <p id="intro">你好世界!</p> 10 <p>该实例展示了 <b>getElementById</b> 方法!</p> 11 <script> 12 x=document.getElementById("intro");//表示调用document的getElementById方法返回ID为intro的对象 13 document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>");//通过doucument把文档的内容输出 14 </script> 15 16 </body> 17 </html>
//getElementById是HTML对象的一个方法，用来获取指定ID的对象
通过标签名查找 HTML 元素
本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：
1 <body> 2 3 <p>你好世界!</p> 4 <div id="main"> 5 <p> DOM 是非常有用的。</p> 6 <p>该实例展示了 <b>getElementsByTagName</b> 方法</p> 7 </div> 8 <script> 9 var x=document.getElementById("main"); 10 var y=x.getElementsByTagName("p"); 11 document.write(‘id="main"元素中的第一个段落为：‘ + y[0].innerHTML); 12 </script> 13 14 </body>
通过类名找到 HTML 元素
1 <body> 2 3 <p class="intro">你好世界!</p> 4 <p>该实例展示了 <b>getElementsByClassName</b> 方法!</p> 5 <script> 6 x=document.getElementsByClassName("intro"); 7 document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>"); 8 </script> 9 10 </body>
改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=新的 HTML
本例改变了 <p>元素的内容：
1 <body> 2 3 ? 4 5 <p id="p1">Hello World!</p> 6 7 <script> 8 9 document.getElementById("p1").innerHTML="新文本!"; 10 11 </script> 12 13 <p>以上段落通过脚本修改文本。</p>
//在 javascript 中，document.write() 可用于直接向 HTML 输出流写内容。
改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=新属性值
本例改变了 <img> 元素的 src 属性：
1 <body> 2 3 <img id="image" src="smiley.gif" width="160" height="120"> 4 <script> 5 document.getElementById("image").src="landscape.jpg"; 6 </script> 7 <p>原图片为 smiley.gif,脚本将图片修改为 landscape.jpg</p>
JavaScript HTML DOM - 改变CSS
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
改变 HTML 样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=新样式
下面的例子会改变 <p> 元素的样式：
1 <body> 2 3 <p id="p1">Hello World!</p> 4 <p id="p2">Hello World!</p> 5 <script> 6 document.getElementById("p2").style.color="blue"; 7 document.getElementById("p2").style.fontFamily="Arial"; 8 document.getElementById("p2").style.fontSize="larger"; 9 </script> 10 <p>以上段落通过脚本修改。</p> 11 12 </body>
使用事件
HTML DOM 允许我们通过触发事件来执行代码。
1 <body> 2 3 <h1 id="id1">我的标题 1</h1> 4 <button type="button" onclick="document.getElementById(‘id1‘).style.color=‘red‘"> 5 点我!</button> 6 7 </body>
对事件做出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
onclick=JavaScript
1 <body> 2 <h1 onclick="this.innerHTML=‘Ooops!‘">点击文本!</h1> 3 </body>
以上是关于js html DOM的主要内容，如果未能解决你的问题，请参考以下文章