Javascript -- DOM

来源：互联网发布：centos wget命令不存在编辑：程序博客网时间：2024/04/30 17:41

BOM是代表浏览器本身的各种特性的对象，这些特性包括浏览器的按钮，URL地址栏，标题栏以及页面的部分对象。而DOM模型仅处理浏览器窗口中的内容即web页面。DOM将一个web页面的所有元素表示为一棵以层次结构组织的节点树，并提供了通用的属性集和方法集来访问或操作该节点。
在DOM中，只须在代表页面的文档树中导航到相应的节点或属性，就能访问或修改相应的元素对象和属性。它是一种独立与浏览器的文档编程模型，提供了一组与浏览器无关的属性，方法和对象的集合，以供Js访问和操纵文档的内容。

XML主要功能是用来创建用户自定义的标记语言，与HTML类似；另一方面的用途是表示和描述数据。因为我们平常的数据库存储无法使用单独的项来保存数据之间的关系和结构信息。XML则可以使用标记语言的元素结构来表示任何类型的数据，并且数据之间的关系和结构将通过标记语言的元素结构来体现，因而数据的结构信息将永远不会丢失。
DTD: document type definition.文档类型定义

完全线性的符号引用方式来访问页面的元素的属性和方法：document.forms[0].elements[1].value = "button1";
根节点包含了XML文档声明，文档类型定义(DTD)和根元素在HTML文档中根元素总是<html>元素

DOM提供了一组具体的对象，属性和方法的集合，以供Js访问文档的树结构，或者在文档树中进行导航。

查找元素

getElementById(id)      //根据id找到想应的元素，区分大小写，HTML中最好不要id跟name相同的情况,因为id在一个页面中都是唯一的，所以我们每次取到一个对象的引用。getElementsByTagName()  //单从字面就可以理解，它是返回相应标签(tag)对象的引用，很明显它那将是一个集合

既然你返回一个集合，那么如何得到单个控件的引用呢？

var images = document.getElementByTagName("img"); var myimage = images.namedItem("myimage");   //这个是返回的集合的方法，即可以再深入取特定name的值var myimage = images.item(2);var myimage = images["myimage"];             //与上面形式等价，其实内部是上面的形式实现的。

上面的namedItem方式，只能是取出来一个，但是如果你想取出所有叫myimage的对象的话，下面document的方法
getElementByName() //同样返回返回一个HTMLCollection注意与ById的区别。

document.anchors 文档中所有带name特性的<a>元素
document.links 文档中所有带href特性的<a>元素
document.forms 等价于document.getElementByTagName("form")
document.images 等价于document.getElementByTagName("img")
document.getElementById()方法返回一个指定的节点，然后再从该节点导航到其他节点。
document.documentElement 指向<html>

下面是node对象的属性
first.Child
last.Child
previousSibling 返回同级子节点中的前一个兄弟节点。
nextSibling
ownerDocument
parentNode
nodeName
nodeType
nodeValue 以纯文本返回当前节点的值

我们可以通过document的属性和node对象的属性遍历整个html,htmlElement= document.documentElement; headElement=htmlElement.firstChild; bodyElement=headElement.nextSibling.....

Node对象的方法
修改HTML文档的结构。
appendChild(newNode) 新节点插入末尾，并且返回新插入节点的引用
cloneNode(bool) 返回当前节点副本，bool为True,复制当前及子节点
hasChildNodes() 如果有子节点，返回true
insertBefore(newNode, referenceNode) 返回一个对新插入节点的引用
removeChild(node) 返回一个对所删节点的引用
replaceChild(newChild,oldChild) 返回一个被替换节点的引用

document对象的方法：添加文档中的元素，这些方法都是用户创建控件，然后再搭配上面node对象方法来改变HTML的结构。
createElement(Tag) 根据标签名创建一个新元素，返回一个新建对象的引用
createTextNode(text) 用text指定的文本创建一个文本节点，并返回新建节点的引用
createAttribute(name) name指定新建的属性名，它是针对一个节点而言的。返回被更新节点的引用

易错点：

理解node对象的方法，必须调用了node对象的方法绑定到body上面才能体现在页面上var newText = document.createTextNode("my heading");var newElem = document.createElement("h1");newElem.appendChild(newText);document.body.appendChild(newElem);                //必须不能缺少

element对象的方法
getAttribute(attributeName) 返回参数指定属性的值
setAttribute(attributeName,value)
removeAttribute(attributeName) 移除参数指定属性的值，并将其恢复为默认值

Text类型
文本节点由Text类型表示，包含可以照字面解释的纯文本内容，nodeType = 3
nodeValue属性或data属性访问Text节点中包含的文本
appendData(text) 将text添加到节点末尾
deleteData(offset,count) 从offset指定位置开始删除count个字符
insertData(offset,text) 在offset指定位置插入text
replaceData(offset, count, text) 用text替换从offset指定位置开始到offset+count为止处的文本
splitText(offset) 从offset指定位置将当前文本节点分为两个文本节点
substringData(offset, count) 提取从offset 指定位置到offset+count为止处的字符串

同样文本节点也是必须被绑定到文档树中，否则我们在浏览器里也看不到新的节点

var textNode = document.createTextNode("Hello world!");  element.appendChild(textNode);  document.body.appendChild(element);

分割文本节点

var newNode = element.firstChild.splitText(5);  alert(element.firstChild.nodeValue);            // "hello"  alert(newNode.nodeValue);                       // "world"  alert(element.childNodes.length);               // 2

创建table   //create table  var table = document.createElement("table");  table.border =1;  table.width = "100%";  //create tbody  var tbody = document.createElement("tbody");  table.appendChild(tbody);  //create first line  tbody.insertRow(0);  tbody.rows[0].insertCell(0);  tbody.rows[0].cells[0].appendChild(document.createTextNode("cell 1.1"));  tbody.rows[0].insertCell(1);  tbody.rows[0].cells[1].appendChild(document.createTextNode("cell 2.1"));   //create second line  tbody.insertRow(1);  tbody.rows[1].insertCell(0);  tbody.rows[1].cells[0].appendChild(document.createTextNode("cell 1.2"));  tbody.rows[1].insertCell(1);  tbody.rows[1].cells[1].appendChild(document.createTextNode("cell 2.2"));  //add table to body  document.body.appendChild(table);

总结：我们之所以要搞出来一个node对象，element对象，其实他们是互通的，node对象其实也可以认为是element对象，根据你所要实现的结果而定，node是把每个控件都看成一个整体，是为了结构上的处理。而当你把它看成一个element的时候，你就可以对其attribute进行控制。