网站首页 > 教程分享正文

JavaScript DOM元素（js中dom节点常用属性）

henian88 2024-10-12 03:48:11 教程分享 2 ℃ 0 评论

1.1 创建节点

DOM中提供了两种创建节点的方法，一种是创建文本节点，另一种是创建元素节点。下面分别进行介绍。

创建文本节点

使用document对象提供的createTextNode()方法可以创建文本节点。

通常情况下，纯文本是不能直接添加到元素里面的，一般都要生成文本节点才能附加到元素中。

例如，要创建一个包括文字"我是文本节点"的文本节点，可以使用下面的代码：

var child=document.createTextNode("我是文本节点");

创建元素节点

使用document对象提供的createElement()方法可以创建元素节点。元素节点可以包含子节点，而且子节点不仅可以是文本节点，还可以是元素节点。

例如，要创建一个段落节点，可以使用下面的代码：

var child=document.createElement("p"); //创建一个段落节点

1.2 插入节点

Node对象提供了两个插入节点的方法，分别是insertBefore()和appendChild()。下面分别进行介绍。

insertBefore()定义

insertBefore() 方法的作用是：在现有的子节点前插入一个新的子节点

insertBefore用法

target.insertBefore(newChild,existingChild)

newChild作为target的子节点插入到existingChild节点之前,existingChild为可选项参数，当为null时其效果与appendChild一样

insertBefore例子

var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,oTest.childNodes[0]);

在特点节点后插入节点

DOM本身没有提供insertAfter()方法

function insertAfter(newElement, targetElement){
    var oParent = targetElement.parentNode; //首先找到目标元素的父元素
    if(oParent.lastChild == targetElement) //如果目标元素已经是最后一个子元素了
    oParent.appendChild(newElement); //则直接用appendChild()加到子元素列表的最后
    else //否则用insertBefore()插入到目标元素的下一个兄弟元素之前
    oParent.insertBefore(newElement,targetElement.nextSibling);
}

使用实例:

<html>
<head>
<title>insertAfter()方法</title>
<script language="javascript">
function insertAfter(newElement, targetElement){
    var oParent = targetElement.parentNode; //首先找到目标元素的父元素
    if(oParent.lastChild == targetElement) //如果目标元素已经是最后一个子元素了
    oParent.appendChild(newElement); //则直接用appendChild()加到子元素列表的最后
    else //否则用insertBefore()插入到目标元素的下一个兄弟元素之前
    oParent.insertBefore(newElement,targetElement.nextSibling);
}
function insertP(){
    var oOldP = document.getElementById("myTarget");
    var oNewP = document.createElement("p"); //新建节点
    var oText = document.createTextNode("这是一个感人肺腑的故事");
    oNewP.appendChild(oText);
    insertAfter(oNewP,oOldP); //插入节点
}
</script>
</head>
<body onload="insertP()">
<p id="myTarget">插入到这行文字之后</p>
<p>也就是插入到这行文字之前，但这行没有id，也可能不存在</p>
</body>
</html>

appendChild()方法

用于在当前节点的子节点的末尾处插入节点, 如果要插入节点已经存在, 则将其删除, 其语法格式如下：

target.appendChild(newnode)

如需向 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>

实例:

综合使用appendChild()和insertBefore()创建元素

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var oUl=document.getElementById('ul1');
    var oTxt=document.getElementById('txt1');

    oBtn.onclick=function ()
    {
    var oLi=document.createElement('li');
    var aLi=document.getElementsByTagName('li');

    oLi.innerHTML=oTxt.value;

    //父级.appendChild(子节点);
    //oUl.appendChild(oLi);
    if(aLi.length>0) //如果aLi对象是空元素,采用insertBefore()方法程序会报错,因此需要作出判断
    {
    oUl.insertBefore(oLi, aLi[0]);
    }else
    {
    oUl.appendChild(oLi);
    }
    };
};
</script>
</head>
<body>
<input id="txt1" type="text"/>
<input id="btn1" type="button" value="创建li"/>
<ul id="ul1">
</ul>
</body>
</html>

1.3 删除已有的 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>

1.4 替换 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>

1.5 复制 HTML 元素

node.cloneNode(deep)

cloneNode()方法创建节点的拷贝, 并返回该副本。

cloneNode()方法克隆所有属性以及它们的值。如果您需要克隆所有后代(如文本节点), 请把deep参数设置true, 否则设置为false, 默认值false。

<h2>节点赋值</h2>
<ul>
<li addr='德国'>奔驰</li>
<li addr='德国' id='horse'>宝马</li>
<li addr='德国'>奥迪</li>
</ul>
<ul>
<li addr='美国'>福特</li>
<li addr='美国'>林肯</li>
<li addr='美国'>雪佛兰</li>
</ul>
<input type="button" value="复制" onclick="f1()" />
<script>
//节点复制
function f1(){
//获得页面已有节点
var horse = document.getElementById('horse');
var fu_horse = horse.cloneNode(true);//复制一个"宝马"节点【深层】
var fu_horse = horse.cloneNode(false);//复制一个"宝马"节点【浅层】
//节点追加
var ull_USA = document.getElementsByTagName('ul')[1];
ull_USA.appendChild(fu_horse);
}
</script>

appendChild()和insertBefore()区别

1、appendChild和insertBefore是做对节点的方法来使用的，而insertAfter只是自定义的一个函数

2、insertBefore相对于appendChild来说，比较灵活可以将新的节点插入到目标节点子节点数组中的任一位置。

3、使用appendChild和insertBefore来插入新的节点前提是，其兄弟节点必须有共同的父节点

上一篇：零基础:什么是文档对象模型DOM?获取和删除节点的方法有哪些?
下一篇： HTML DOM 元素对象（html中的对象）

网站首页 > 教程分享正文

JavaScript DOM元素（js中dom节点常用属性）

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎你发表评论:

网站首页 > 教程分享 正文

JavaScript DOM元素（js中dom节点常用属性）

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎 你 发表评论:

网站首页 > 教程分享正文

取消回复欢迎你发表评论: