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 元素的属性,请使用这个语法:

document.getElementById(id).attribute=新属性值

例子调试链接:http://www.runoob.com/try/try.php?filename=trydhtml_dom_image

注:

  • 上面的 HTML 文档含有 id="image" 的 <img> 元素
  • 我们使用 HTML DOM 来获得 id="image" 的元素
  • JavaScript 更改此元素的属性(把 "smiley.gif" 改为 "landscape.jpg")
posted @ 2017-02-19 21:50  鸡鸣星  阅读(197)  评论(1编辑  收藏  举报