文档对象模型DOM

最新推荐文章于 2021-06-05 13:03:24 发布

shizhan1881

最新推荐文章于 2021-06-05 13:03:24 发布

阅读量616

点赞数

分类专栏： javascript 文章标签：文档 html xhtml table div border

本文链接：https://blog.csdn.net/linshizhan/article/details/7717210

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

     DOM    节点树
document--根节点html(dom节点、dom对象、Element)
   ---子节点1 head
   ----子节点2 body

Document Object Model 文档对象模型
1.DOM是HTML与XML的应用编程接口(API)，DOM
将整个页面映射为一个由层次节点组成的文件.
有1级、2级、3级共三个级别
2.DOM的核心是提供了一套访问结构化文档
数据的API，其核心是节点的遍历访问及相关
操作。

3.在开发XML DOM的过程中，W3C发布了一个
针对HTML的DOM,即XHTML(符合XML格式的
HTML)。引入了HTMLDocument及HTMLElement
等类作为DOM的基本实现。每一个HTML元素
HTML拥有一个对应的HTMLElement类型，比如
HTMLDivElement代表<div>.除了一部分类增加
一些成员以外，大多数类提供的属性和方法都是
由HTMLElement提供。

document 就是一个HTML文档在内存中对应的对象
属性

window.onload = function(){
//所有的dom节点都支持这些属性
    //获得文档的根节点，相当于html文档里面的<html>标签
    var root = document.documentElement;
    var div = document.getElementById("test");//div加载完才能使用
    //Dom的属性 1.nodeName
    //alert(root.nodeName + ":" + div.nodeName);
//2.nodeValue获得节点中的文本值
    alert(root.nodeValue + ":" + div.firstChild.nodeValue);
//3.nodeType有三种,代表1、标签、2、属性、3、文本
    alert(root.nodeType + ":" + div.firstChild.nodeType+":"+div.getAttributeNode("id").nodeType);
   //4.firstChild得到第一个子节点
    //5.lastChild得到最后一个子节点
//6.childNodes所有子节点
//7.previousSibling前一个节点
//8.nextSibling 后一个节点
//9.ownerDocument 获得该节点所属的文档对象
//10.attributes 代表一个节点的属性对象

}
---------------------
<div id="test">123</div>
*dom节点有三种
1. div为标签节点
2. id为attribute节点 id="test" 也是一个dom对象
3. 123为文本节点

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

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

dom节点的增删改查
1.增加
//在第二个div后面加入一个新的div
//创建一个新节点
var newNode = document.createElement("DIV");
var textNode = document.createTextNode("This is a new Node");//这里的文本值以后是从数据库查出来的,然后渲染到页面上
newNode.appendChild(textNode);

var body = document.body;//root.lastChild;
var thirdDiv = document.getElementById("third");
body.insertBefore(newNode,thirdDiv);
2.删除
//删除第二个节点

var secondDiv = document.getElementById("second");
secondDiv.parentNode.removeChild(secondDiv);//所有的节点都有一个parentNode得到父节点
3.修改
replaceChild(oldNode,newNode)
4.查询
getElementById 获得指定id的dom节点
getElementsByName 获得指定名称的节点集合
getElementsByTagName 获得指定标签的节点集合
(得到所有的div节点、a节点)

例:得到页面的所有元素
var oAllElements = document.getElementsByTagName("*");
或者
var oAllElements = document.all;//针对IE6

document方法
createElement(tagName):创建标签节点
createTextNode(s):创建文本节点
appendChild(node) 往当前节点上添加子节点

当我们直接往document的元素上添加节点时，每
执行依据添加都会造成页面刷新，从而影响性能，
此时可以考虑使用html片段的方式，也就是使用
createDocumentFragment()来优化,只渲染一次文档

*得到、设置dom节点的属性
Core DOM
<img src="mypicture.jpg" border="0"/>
dom节点.getAttribute("src");
dom节点.setAttribute("src","mypicture2.jpg");

xhtml dom还提供了便利的访问形式
dom节点.src
dom节点.src="mypicture2.jpg";

访问class要用className
<div class="header"></div>
oDiv.className="footer";

使用DOM来动态创建表格
即用document.createElement("");
document.createTextNode("");
一步一步创建

访问表格数据

vat table = document.getElementById("table");
var cell4 = table.tBodies[0].rows[1].cells[1];
alert(cell4.innerHTML);

重点1：使用xhtml DOM创建表格

总结：表里添行，行里添列，列里添内容
table.deleteRow(1);//删除第二行
table.insertRow(1);//插入新行到第二行

var table = document.createElement("table");
table.border="1";
table.width="100%";
//新建一行
table.insertRow(0);
table.rows[0].insertCell(0);
table.rows[0].cells[0].appendChild(
document.createTextNode("Cell1,1");
);
table.rows[0].insertCell(1);
table.rows[0].cells[1].appendChild(
document.createTextNode("Cell1,2");
);

table.insertRow(1);
table.rows[1].insertCell(0);
table.rows[1].cells[0].appendChild(
document.createTextNode("Cell2,1");
);
table.rows[1].insertCell(1);
table.rows[1].cells[1].appendChild(
document.createTextNode("Cell1,2");
);

document.body.appendChild(table);

重点2：操作样式
所有的dom对象都有style属性,style为只读的

//js操作样式
var div1 = document.getElementById("test");
div.style.backgroundColor="red";//样式表-号去掉，后面字母变大写

查看属性样式

console.dir(document.body.style);

隐藏节点
dom对象.style.display="none";

shizhan1881

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文档对象模型DOM

DOM 节点树 document--根节点html(dom节点、dom对象、Element) ---子节点1 head ----子节点2 bodyDocument Object Model 文档对象模型1.DOM是HTML与XML的应用编程接口(API)，DOM将整个页面映射为一个由层次节点组成的文件.有1级、2级、3级共三个级别2.DOM的核心是提
复制链接

扫一扫

专栏目录