DOM（二）

最新推荐文章于 2024-03-28 23:55:28 发布

BabyMelvin

最新推荐文章于 2024-03-28 23:55:28 发布

阅读量219

点赞数

1.HTML DOM - 元素

添加、删除和替换 HTML 元素。创建新的 HTML 元素 - createElement()如需向<p>元素添加文本，您首先必须创建文本节点。这段代码创建文本节点：var node=document.createTextNode("这是一个新段落。");

insertBefore()添加元素方式，前加入。appendChild()方法，将新元素作为父元素的最后一个子元素进行添加。

1.1 删除已有的 HTML 元素

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

<div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

1.2替换 HTML 元素

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

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
var para=document.createElement("p");
var node=document.createTextNode("这是一个新的段落。");
para.appendChild(node);
parent.replaceChild(para,child);
</script>

2.HTML DOM - 事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应。HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时

在本例中，当用户点击时，会改变<h1>元素的内容：

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
<h1 onclick="changetext(this)">点击文本!</h1>

2.1 HTML 事件属性

如需向 HTML 元素分配事件，您可以使用事件属性。

<button onclick="displayDate()">点我</button>

<script>
function displayDate()
{
    document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>

2.2使用 HTML DOM 来分配事件

HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件：

<script>
document.getElementById("myBtn").onClick=function(){displayDate()}

function displayDate(){
    document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

2.3 onload 和 onunload 事件

当用户进入或离开页面时，会触发onload和onunload事件。onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。onload和 onunload 事件可用于处理 cookies。

<body onload="checkCookies()">

2.4 onchange 事件

onchange 事件常用于输入字段的验证。下面的例子展示了如何使用 onchange。当用户改变输入字段的内容时，将调用 upperCase() 函数.

3.HTML DOM 导航

通过 HTML DOM，您能够使用节点关系在节点树中导航。
getElementsByTagName()方法返回节点列表。节点列表是一个节点数组。您能够使用三个节点属性：parentNode、firstChild 以及lastChild，在文档结构中进行导航。

请看下面的 HTML 片段：

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

<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>

DOM 根节点
这里有两个特殊的属性，可以访问全部文档：

document.documentElement - 全部文档
document.body- 文档的主体

<script>
//显示body元素中的所有src文件
alert(document.body.innerHTML);
</script>

3.1 childNodes 和 nodeValue

除了 innerHTML 属性，您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。下面的代码获取 id=”intro” 的 <p>元素的值：

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

<script>
txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>

BabyMelvin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM（二）

1.HTML DOM - 元素添加、删除和替换 HTML 元素。创建新的 HTML 元素 - createElement()如需向&lt;p&gt;元素添加文本，您首先必须创建文本节点。这段代码创建文本节点：var node=document.createTextNode("这是一个新段落。");insertBefore()添加元素方式，前加入。appendChild()方法，将新元素作为...
复制链接

扫一扫