DOM,Document Object Model文档对象模型

来源：互联网发布：googlo play 软件下载编辑：程序博客网时间：2024/06/05 07:17

简介

DOM,Document Object Model文档对象模型。
DOM是操作HTML和XML的一组API，可以实现动态改变页面的功能。
DOM节点树：每个HTML或XML文档被浏览器加载后都会在内存中生成一个DOM树。如图：

div p h1以前叫标签，现在叫dom对象、dom节点、dom元素，每个标签都是HTMLElement这个类的对象，形如HTMLXxxElement,如div是HTMLDivElement.

## 节点的三种类型 ##1）标签节点 div2）属性节点 id=”div1”3）文本节点我是div1如：

<div id = "div1">我是div1</div>

DOM编程（CRUD增删改查）

//补充
console.dir(body);
body下有个childNodes 查看子节点

方法(在父节点调用) 返回值说明
hasChildNodes() Boolean 当前节点是否有子节点
appendChild(node) Node 往当前节点上添加子节点
removeChild(node) Node 删除子节点
replaceChild(newNode,oldNode) 同上替换子节点
insertBefore(newNode,refNode) 同上在指定节点的前面插入新节点

document方法
createElement(tagName):创建标签节点
createTextNode(s):创建文本节点

补充:

Node 需要克隆的节点.cloneNode(boolean deep) 复制当前节点.
当deep为true时，不仅复制该节点也复制它的所有后代节点.
当deep为false时,只复制当前节点。

一、增
需求：在div1后面增加一个div5节点
二、删
需求：删除div1
三、改
需求：把div1改成一个文本框
示例代码：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>DOM编程（CRUD）</title>        <script type="text/javascript">            function add () {                //需求：在div1后面增加一个div5节点                //1.创建标签节点div5                var div5 = document.createElement("div");                div5.id="div5";                //2.创建文本节点                var div5TextNode = document.createTextNode("我是div5");                //3.父节点div5增加子节点（文本结点）                div5.appendChild(div5TextNode);                //4.获得div2节点                var div2 = document.getElementById("div2");                //4.插入同级节点,只能插入到div2前面，不能插入到div1后面                div2.parentNode.insertBefore(div5,div2);            }            function remove () {                //需求：删除div1                //1.获得div5                var div1 = document.getElementById("div1");                //2.获得父节点                if(div1!=null){                    div1.parentNode.removeChild(div1);                }else{                    alert('不存在div1节点');                }            }            function update () {                //需求：把div1改成一个文本框                //<input type="text" name="username" id="username" value="请输入用户名：" />                //1.创建一个input对象                var username = document.createElement("input");                username.type="text";                username.name="username";                username.id="username";                username.value="请输入用户名：";                //2.替换                var div1 = document.getElementById("div1");                div1.parentNode.replaceChild(username,div1);            }        </script>    </head>    <body>        <div id="div1">            我是div1        </div>        <div id="div2">            我是div2        </div>        <div id="div3">            我是div3        </div>        <div id="div4">            我是div4        </div>        <input type="button" name="btn1" id="btn1" value="在div1后增加1个div5" onclick="add();"/>        <input type="button" name="btn2" id="btn2" value="删除div1" onclick="remove();"/>        <input type="button" name="btn3" id="btn3" value="替换div1为文本框" onclick="update();"/>        <input type="button" name="btn4" id="btn4" value="刷新" onclick="location.reload(true);"/>    </body></html>

这里写图片描述

阅读全文

0 0