removeChild,replaceChild,insertBefore,innerText,innerHTML,outerText,outerHTML学习
今天学习一下javascript，对节点操作进行代码练习，我以前看过，就是很简单的看看，没有认真的学习，今天是认真的学习了一下。
removeChild移除节点内容
replaceChild替代节点内容
insertBefore在某个节点前插入一个节点
innerText,innerHTML,outerText,outerHTML这些以前就比较熟悉了！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
function deleteHelloWorld(){
var helloworld=(document.body.getElementsByTagName("p"))[0];
document.body.removeChild(helloworld);
}
function deleteFirstLine(){
var firstLine=document.getElementById("myHeader");
document.body.removeChild(firstLine);
}
function replaceMessage(){
var newFirstLine=document.createElement("p");
var newFirstLineText=document.createTextNode("New First Line!");
newFirstLine.appendChild(newFirstLineText);
var oldNode=document.getElementById("myHeader");
oldNode.parentNode.replaceChild(newFirstLine,oldNode);
}
function insertBeforeMessage(){
var insertBefore=document.createElement("p");
var insertBeforeText=document.createTextNode("a text");
insertBefore.appendChild(insertBeforeText);
var oldNode=document.getElementById("myHeader");
oldNode.parentNode.insertBefore(insertBefore,oldNode);
}
function intertextStuff(){
var innerLine1=document.getElementById("innerLine1");
innerLine1.innerText="new text of innerLine1";
var innerLine2=document.getElementById("innerLine2");
innerLine2.innerHTML="<strong>New text of innerLine2</strong>";
//wrong: innerLine2.innerHTML="<h1>New text of innerLine2</h1>";
}
function outertextStuff(){
var outerLine1=document.getElementById("outerLine1");
outerLine1.outerText="new text of outerLine1";
var outerLine2=document.getElementById("outerLine2");
outerLine2.outerHTML="<h1>New text of outerLine2</h1>";
}
</script>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<h1 id="myHeader">First Line</h1>
<a href="javascript:deleteHelloWorld()"><big>delete "Hello World"</big></a>
<br>
<a href="javascript:deleteFirstLine()"><big>delete "First Line"</big></a>
<br>
<a href="javascript:replaceMessage()"><big>Replace "First Line" with "New First line"</big></a>
<br>
<a href="javascript:insertBeforeMessage()"><big>Insert "a text" before "First line"</big></a>
<script type="text/javascript">
var helloWorld=document.createElement("p");
var helloWorldText=document.createTextNode("Hello World");
helloWorld.appendChild(helloWorldText);
document.body.appendChild(helloWorld);
//var docBody=(document.getElementsByTagName("body"))[0]
//docBody.appendChild(helloWorld);
//insert a few nodes at a time
var oFragment=document.createDocumentFragment(); //创建文档片段对象
for(var i=0;i<10;i++){
var oP=document.createElement("p");
var oText=document.createTextNode(i);
oP.appendChild(oText);
oFragment.appendChild(oP);
}
document.body.appendChild(oFragment);
//how many properties are available?
var props=new Array();
for(var property in window.document){
props.push(property);
}
for(i=0;i<props.length;i++){
document.write(props[i]+"/");
if(i>0 && i%6==0){
document.write("<br>");
}
}
</script>
<br>
<p id="innerLine1">InnerLine1</p>
<p id="innerLine2">InnerLine2</p>
<h4 id="outerLine1">outerLine1</h4>
<h4 id="outerLine2">outerLine2</h4>
<a href="javascript:intertextStuff()"><big>InnerLine</big></a>
<a href="javascript:outertextStuff()"><big>OuterLine</big></a>
</BODY>
</HTML>
分享到：
相关推荐
//3、insertBefore:把创建的标签增加到容器中某一个标签的前面 // 容器.insertBefore(newEle,oldEle) 容器:oldEle.parentNode //4、replaceChild:用新的标签替换老的标签 // 容器.replaceChild(newEle,oldEle) ...
5. **DOM操作**：包括获取元素（getElementById、getElementsByTagName、getElementsByClassName等）、遍历节点（childNodes、children）、修改节点（appendChild、insertBefore、removeChild、replaceChild）以及...
本文实例总结了JavaScript节点及列表操作的方法。...removeChild() replaceChild() insertBefore() （3）查找 getElementsByTagName() //通过标签名称 getElementsByName() //通过元素的Name属性的值 g
他支持以下DOM2方法: appendChild, cloneNode, hasAttributes, hasChildNodes, insertBefore, normalize, removeChild, replaceChild. 也支持以下DOM2屬性: attributes, childNodes, firstChild, lastChild, local...
`.removeChild`可以删除指定的子节点，而`.replaceChild`可以替换已有的子节点。 此外，手册可能还会涉及事件处理。JavaScript通过`.addEventListener`来添加事件监听器，`.removeEventListener`移除监听器，而`....
3. **DOM操作**：获取节点后，我们可以进行各种操作，如创建新节点（`createElement()`）、插入节点（`appendChild()`, `insertBefore()`）、删除节点（`removeChild()`）和替换节点（`replaceChild()`）。...
- **`<element>.insertBefore(node1, node2)`**：将一个节点插入到另一个节点之前。 - **`<element>.removeAttribute(name)`**：移除元素的某个属性。 - **`<element>.removeChild(childNode)`**：移除元素的子节点...
JavaScript DOM 学习笔记 JavaScript DOM（Document Object Model）是 HTML 和 XML 文档的编程接口，它提供了一种访问和操作文档结构和内容的方式。DOM 将文档表示为一个树状结构，其中每个节点都代表文档中的一个...
使用 `insertBefore()` 方法可以将节点插入到目标节点的前面。例如，`node.insertBefore(_span, _p);` 将 `<span>` 节点插入到 `<p>` 节点的前面。 5. 复制节点 使用 `cloneNode()` 方法可以复制一个节点。例如，`...
- 方法：`appendChild()`、`cloneNode()`、`hasChildNodes()`、`insertBefore()`、`removeChild()`和`replaceChild()`，用于操作节点的添加、复制、检查子节点、插入、删除和替换。 5. **其他对象**： - `...
这个新创建的`<p>`元素并不会自动成为文档的一部分，直到使用`appendChild()`或`insertBefore()`等方法将其插入文档的某个节点下。而`createTextNode()`则用于创建包含特定文本的文本节点： ```javascript var ...
在"删除和替换节点 示例素材"中，可能会讲解如何使用`removeChild()`方法移除节点，以及使用`replaceChild()`方法替换一个节点。例如，如果你想要删除一个元素，可以先找到它，然后调用其父元素的`removeChild()`...
`replaceChild(newChild, oldChild)`用于替换子元素，`insertBefore(newChild, refChild)`则允许在特定子元素之前插入新的子元素。 属性如`getAttribute(name)`用于获取指定属性的值，`setAttribute(name, value)`...
- 使用`insertBefore`在某个现有子节点前插入新节点。 - 使用`replaceChild`替换现有子节点。 - **删除节点**： - 使用`removeChild`删除子节点。 - **禁止浏览器默认行为**： - 在JavaScript中阻止默认行为...
可以使用RemoveAll()或RemoveChild()方法删除XML文档中的节点，RemoveAll()方法可以删除所有子节点，而RemoveChild()方法可以删除指定的子节点。 更新节点 可以使用ReplaceChild()方法将新节点替换老节点，也可以...
- 增删改：`createElement`和`createTextNode`用于创建新的节点，`appendChild`、`insertBefore`、`replaceChild`和`removeChild`则用于在文档树中添加、插入、替换和删除节点，`setAttribute`用来设置或修改元素的...
- `Node`接口：是所有DOM节点的基类，包含通用的节点操作方法，如`appendChild()`、`removeChild()`、`replaceChild()`等。 - 属性访问：通过`.`操作符获取或修改元素的属性，例如`element.style.color`可以改变...
Node接口提供了所有节点通用的方法和属性，如nodeName、nodeValue、nodeType等，以及appendChild、removeChild、replaceChild、insertBefore等操作节点的方法。 2. 访问和操作节点 要访问文档中的特定节点，可以...
- `createElement`、`appendChild`、`insertBefore`、`removeChild`、`replaceChild`：用于创建、插入、删除和替换DOM节点。 4. **BOM操作**： - `window.open()`、`window.close()`：打开和关闭窗口。 - `...