AJAX入门---DOM操作HTML
2014-08-05 14:39
465 查看
一边学习AJAX一边坐着总结加深印象,上次写的是如何简单的使用XMLHttpRequest对象,今天写的是DOM(文档对象模型(Document Object Model))操作HTML,希望我的博客对大家的学习能够起到帮助作用。
view plaincopyprint?
//添加节点
var index = 0;
function appendnode() {
//找到body对应节点
var htmlNode = document.documentElement;
var bodyNode = htmlNode.lastChild;
//新建节点
var divNode = document.createElement("div");
var textNode = document.createTextNode("我是一个新加入的节点" +index++);
//建立节点之间的关系
divNode.appendChild(textNode);
bodyNode.appendChild(divNode);
}
view plaincopyprint?
//插入节点
function insertnode() {
var removenode = document.getElementById("remove");
var firstdivnode = removenode.nextSibling;
while (firstdivnode) {
if (firstdivnode&& firstdivnode.nodeName == "DIV") {
var newnode =document.createElement("div");
var textnode =document.createTextNode("我是一个新加入的节点" + index++);
newnode.appendChild(textnode);
document.documentElement.childNodes[2].insertBefore(newnode,firstdivnode);
break;
}
firstdivnode =firstdivnode.nextSibling;
}
}
view plaincopyprint?
function removenode() {
//1.找到body
//2.找到需要被移除的那个div
//3.调用remove方法移除节点
var bodynode = document.getElementById("remove").parentNode;
var removenode = document.getElementById("remove");
var firstdivnode = removenode.nextSibling;
while (firstdivnode) {
if (firstdivnode&& firstdivnode.nodeName == "DIV") {
bodynode.removeChild(firstdivnode);
break;
}
firstdivnode = firstdivnode.nextSibling;
}
}
一.什么是DOM
文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说,这是表示和处理一个HTML或XML文档的常用方法。二.简单的操作HTML
今天的例子实现前我们先需要了解DOM的常用节点和常用API,例子中通过动态的向HTML中添加元素节点达到学习的目的。最终效果
添加节点实现
[plain]view plaincopyprint?
//添加节点
var index = 0;
function appendnode() {
//找到body对应节点
var htmlNode = document.documentElement;
var bodyNode = htmlNode.lastChild;
//新建节点
var divNode = document.createElement("div");
var textNode = document.createTextNode("我是一个新加入的节点" +index++);
//建立节点之间的关系
divNode.appendChild(textNode);
bodyNode.appendChild(divNode);
}
//添加节点 var index = 0; function appendnode() { //找到body对应节点 var htmlNode = document.documentElement; var bodyNode = htmlNode.lastChild; //新建节点 var divNode = document.createElement("div"); var textNode = document.createTextNode("我是一个新加入的节点" +index++); //建立节点之间的关系 divNode.appendChild(textNode); bodyNode.appendChild(divNode); }
插入节点实现
[plain]view plaincopyprint?
//插入节点
function insertnode() {
var removenode = document.getElementById("remove");
var firstdivnode = removenode.nextSibling;
while (firstdivnode) {
if (firstdivnode&& firstdivnode.nodeName == "DIV") {
var newnode =document.createElement("div");
var textnode =document.createTextNode("我是一个新加入的节点" + index++);
newnode.appendChild(textnode);
document.documentElement.childNodes[2].insertBefore(newnode,firstdivnode);
break;
}
firstdivnode =firstdivnode.nextSibling;
}
}
//插入节点 function insertnode() { var removenode = document.getElementById("remove"); var firstdivnode = removenode.nextSibling; while (firstdivnode) { if (firstdivnode&& firstdivnode.nodeName == "DIV") { var newnode =document.createElement("div"); var textnode =document.createTextNode("我是一个新加入的节点" + index++); newnode.appendChild(textnode); document.documentElement.childNodes[2].insertBefore(newnode,firstdivnode); break; } firstdivnode =firstdivnode.nextSibling; } }
移除节点实现
[plain]view plaincopyprint?
function removenode() {
//1.找到body
//2.找到需要被移除的那个div
//3.调用remove方法移除节点
var bodynode = document.getElementById("remove").parentNode;
var removenode = document.getElementById("remove");
var firstdivnode = removenode.nextSibling;
while (firstdivnode) {
if (firstdivnode&& firstdivnode.nodeName == "DIV") {
bodynode.removeChild(firstdivnode);
break;
}
firstdivnode = firstdivnode.nextSibling;
}
}
相关文章推荐
- AJAX入门---DOM操作HTML
- AJAX技术入门 第三节 DOM基础和DOM操作HTML
- AJAX入门---DOM操作HTML
- AJAX入门---DOM操作HTML
- DOM操作HTML实现AJAX的及时性
- 【Ajax】DOM基础及DOM操作HTML
- ajax——dom对xml和html的操作
- ajax——dom对xml和html的操作
- DOM操作HTML实现AJAX的及时性
- Ajax操作Dom的基础--节点的添加
- Javascript里使用Dom操作Xml-asp.net入门笔记(十一)http://dev.csdn.net/article/78/78093.shtm
- DOM操作HTML
- Silverlight 访问和操作 DOM(HtmlPage 类, HtmlDocument)
- Java的XML文件操作之DOM入门篇 (3)
- Java的XML文件操作之DOM入门篇 (1)
- Java的XML文件操作之 DOM & SAX 入门 篇
- ajax学习笔记-Dom入门1
- jQuery入门(10):Ajax(利用WebService调用用户控件生成HTML)
- 使用DOM操作HTML文档
- DOM方法操作HTML属性