js学习之HTML DOM的访问和修改

lijie_insist

浏览: 88480 次
性别:

最近访客更多访客>>

hotfiremsn

源崇1

zean7s

yyy1394

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

js学习

JavaScript

HTML DOM访问
坚持接着把w3chool上的实例学完,最近因为上班有点小忙都没按时的学习了

访问 HTML 元素（节点）

访问 HTML 元素等同于访问节点

您能够以不同的方式来访问 HTML 元素：

    ·通过使用 getElementById() 方法
    ·通过使用 getElementsByTagName() 方法
    ·通过使用 getElementsByClassName() 方法

getElementById()通过ID查找HTML元素

获取 id="intro" 的元素：

document.getElementById("intro");

getElementsByTagName()通过标签查找所有HTML元素

getElementsByTagName() 返回带有指定标签名的所有元素

document.getElementsByTagName("p");

getElementByClassName()查找相同类名的所有HTML元素

document.getElementByClassName("intro");范围类名为intro的所有元素列

ps:getElementByClassNameInternet Explorer 5,6,7,8 中无效

HTML DOM - 修改

修改 HTML DOM 意味着许多不同的方面：

    ·改变 HTML 内容
    ·改变 CSS 样式
    ·改变 HTML 属性
    ·创建新的 HTML 元素
    ·删除已有的 HTML 元素
    ·改变事件（处理程序）

创建 HTML 内容

改变元素内容的最简答的方法是使用 innerHTML 属性。

下面的例子改变一个 <p> 元素的 HTML 内容：

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>

改变 HTML 样式

通过 HTML DOM，您能够访问 HTML 元素的样式对象。

下面的例子改变一个段落的 HTML 样式：

<html>

<body>
<p id="p2">Hello world!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

</body>
</html>

创建新的 HTML 元素

如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。

<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("d1");
element.appendChild(para);
</script>

使用事件

HTML DOM 允许您在事件发生时执行代码。

当 HTML 元素”有事情发生“时，浏览器就会生成事件：

    ·在元素上点击
    ·加载页面
    ·改变输入字段
下面两个例子在按钮被点击时改变 <body> 元素的背景色：

<html>
<body>

<input type="button" onclick="document.body.style.backgroundColor='lavender';"
value="Change background color" />

</body>
</html>

创建新的 HTML 元素 - appendChild()
如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。

创建了一个新的 <p> 元素：

var para=document.createElement("p");

如需向 <p> 元素添加文本，您首先必须创建文本节点。这段代码创建文本节点：

var node=document.createTextNode("This is a new paragraph.");

然后必须向 <p> 元素追加文本节点：

para.appendChild(node);

最后，必须向已有元素追加这个新元素。这段代码查找到一个已有的元素：

var element=document.getElementById("div1");

这段代码向这个已存在的元素追加新元素：

element.appendChild(para);

创建新的 HTML 元素 - insertBefore()

上一个例子中的 appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加。

如果不希望如此，您可以使用 insertBefore() 方法：

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>

删除已有的 HTML 元素

如需删除 HTML 元素，您必须清楚该元素的父元素：

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

ps:能否在不引用父元素的情况下删除某个元素？

很抱歉。DOM 需要了解您需要删除的元素，以及它的父元素。

这里提供一个常用的解决方法：找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

替换 HTML 元素

如需替换 HTML DOM 中的元素，请使用 replaceChild() 方法：

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);
</script>

分享到：

js学习之HTML DOM事件和导航 | js学习之字符串中英文判断

2014-12-15 15:22
浏览 413
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论