js 操作html dom
author:冯永贤(Tony Feng,鸡鸣星),文章整合:internet
《HTML DOM》
一:js能够改变HTML DOM 里面的什么内容
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反
二:但js要对html的内容进行修改时,必须得找到该内容的标识,
那么这个标识是什么呢?
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
<1>通过 id 查找 HTML 元素
如:x=document.getElementById("id name");
调试链接:http://www.runoob.com/try/try.php?filename=try_dom_getelementbyid
<2>通过标签名查找 HTML 元素
如下代码:
<body>
<p>你好世界!</p>
<div id="main">
<p> DOM 是非常有用的。</p>
<p>该实例展示了 <b>getElementsByTagName</b> 方法</p>
</div>
<script>
var x=document.getElementById("main");(将id=“main”的标识值付给x)
var y=x.getElementsByTagName("p");(在x下面的p标签里)
document.write('id="main"元素中的第一个段落为:' + y[0].innerHTML);
</script>
</body>
<3>通过类名找到 HTML 元素
与通过id找html元素一样,把ById改为ByClassName即可
如:var x=document.getElementById("intro");
三:那么怎么操作呢?
- 如何改变 HTML 元素的内容 (innerHTML)
- 如何对 HTML DOM 事件对做出反应
- 如何添加或删除 HTML 元素
1.改变 HTML 输出流(document.write() 可用于直接向 HTML 输出流写内容。)
例子调试链接:http://www.runoob.com/try/try.php?filename=trydhtml_date
2.改变 HTML 内容(修改 HTML 内容的最简单的方法时使用 innerHTML 属性。)
例子调试链接:http://www.runoob.com/try/try.php?filename=tryjs_change_innerhtml
3.改变 HTML 属性(
如需改变 HTML 元素的属性,请使用这个语法:
)
例子调试链接:http://www.runoob.com/try/try.php?filename=trydhtml_dom_image
注:
- 上面的 HTML 文档含有 id="image" 的 <img> 元素
- 我们使用 HTML DOM 来获得 id="image" 的元素
- JavaScript 更改此元素的属性(把 "smiley.gif" 改为 "landscape.jpg")