JavaScript 2 DOM

来源：互联网发布：蝴蝶战法指标公式源码编辑：程序博客网时间：2024/05/18 03:14

JavaScript 2 DOM

注：在下文中，汉字代表变量，英文单词时关键字。如 document.getElementById(参数)

1.DOM（document object model）文档对象模型

HTML DOM 定义了所有 HTML元素的对象和属性，以及访问它们的方法。

2.节点（node）

根据 W3C 的 HTML DOM 标准，HTML文档中的所有内容都是节点：

整个文档是一个文档节点

每个 HTML 元素是元素节点

HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点

注释是注释节点

······

通过 HTML DOM，树中的所有节点均可通过JavaScript进行访问。所有HTML元素（节点）均可被修改，也可以创建或删除节点。

3.节点类型（任何节点必居其一），可通过查询节点的nodeType属性得知。

元素节点　　

Node.ELEMENT_NODE(1)

属性节点　　

Node.ATTRIBUTE_NODE(2)

文本节点　　

Node.TEXT_NODE(3)

CDATA节点

Node.CDATA_SECTION_NODE(4)

实体引用名称节点　　

Node.ENTRY_REFERENCE_NODE(5)

实体名称节点　　

Node.ENTITY_NODE(6)

处理指令节点　　

Node.PROCESSING_INSTRUCTION_NODE(7)

注释节点　

Node.COMMENT_NODE(8)

文档节点　

Node.DOCUMENT_NODE(9)

文档类型节点　　

Node.DOCUMENT_TYPE_NODE(10)

文档片段节点　　

Node.DOCUMENT_FRAGMENT_NODE(11)

DTD声明节点

Node.NOTATION_NODE(12)

例如：

if（节点.nodeType == 1）{···}

注：最好不写成“节点.nodeType == Node.ELEMENT_NODE”，在IE中不支持。

4.节点nodeName和nodeValue属性

常用节点

元素

属性

文本

注释

nodeName节点名

标签名

属性名

#text

#comment

nodeValue节点值

null

具体属性值

具体文本

注释内容

例如：

if（节点.tagName.toLowerCase() ==“div”）{}

注1：访问元素的标签名，可以使用nodeType，也可以使用tagName（为了清晰起见）。

注2：因为在HTML中，tagName结果是大写；在XHL(有时包括XHTML)，结果与源代码保持一致，为了适用于任何文档，用toLowerCase()方法转换为小写。

5.节点的通用属性与方法

①通用属性

子节点.parentNode

指向其父节点

父节点.childNodes

指向其子节点数组

子节点.ownerDocument

指向其文档节点，通常是document

子节点.priviousSibing（sib亲戚）

指向其上一个同胞节点

子节点.nextSibing

指向其下一个同胞节点

父节点.firstChild

指向其第一个子节点

父节点.lastChild

指向其最后一个子节点

每个节点都有一个childNodes属性，里面保持着Noselist对象，是一组有序子节点。

使用方法：

var x = 父节点.childNodes[0]; //x=第一个子节点

var x = 父节点.childNodes.item(0); //x=第一个子节点

var y = 父节点.childNodes.length; //y=子节点数目

②通用方法

格式

描述

返回值

父节点.appendChild(新子节点)

把新子节点加到父下子节点的末尾

新子节点

父节点.insertChild(新子节点，旧子节点)

把新子节点加到父下旧子节点之前

新子节点

父节点.replaceChild(新子节点，旧子节点)

用新子节点替换掉旧子节点

？？？

父节点.removeChild(旧子节点)

移除旧子节点

旧子节点

6.document类型节点

①JavaScript通过document类型表示文档，代表整个HTML页面。

其子节点可能是DocumentType（最多一个），Element（最多一个），ProcessingInstruction或Comment。

②常用属性和方法：

var x = document.documentElement;

x = html节点

var x = document.body;

x = body节点

var x = document.getElementById(“aBC”)

ID名必须严格匹配，包括大小写

var x = document.getElementByTagName(“p”)

返回一个类数组集合

③一些特殊的属性：

var x = document.anchors;

x = 所有带name属性的<a>元素

var x = document.links;

x = 所有带href属性的<a>元素

var x = document.forms;

与document.getElementByTagName(“forms”)结果相同

x = 所有的<forms>元素

var x = document.images;

与document.getElementByTagName(“img”)结果相同

x = 所有的<img>元素

7.Element类型节点

①访问元素

document.getElementById() //是document对象特有函数，只能是document.

节点.getElementsByTagName() //节点可以是document，也可是其他。返回对象数组。

节点.getElementsByClassName() //同上，是HTML5 DOM新增的，可能不适用于老浏览器

注1：ID名必须严格匹配，包括大小写

注2：getElementsByTagName()和getElementsByClassName()允许使用通配符”*”，表示全部

例如1：

var x = document.getElementById(“abc”);

var y = x.getElementByTagName(“li”); //在x元素里搜寻li元素

例如2：//适用于新老浏览器的函数方法，node搜寻范围，theclassname要找的类名

function getElementsByClassName(node，theclassname){  if(node.getElementsByClassName){    //使用现有方法    return node.getElementsByClassName(theclassname);  }  else{    var results = new Array();    var elems = node.getElementByTagName(“*”);  //得到全部标签    for ( var i=0;i<elems.length;i++){      //当元素的类名(className)与要找的类名(theclassname)匹配时      if(elems[i].className.indexOf(theclassname)!=-1){        resulus[results.length] = elems[i];   //随着赋值操作，resules.length不断增加      }    }    return resules;  }}

②查询，设置，移除属性

属性是元素所特有的，属性的操作对象只能是元素

元素.getAttribute(“属性名”) //返回属性值

元素.setAttribute(“属性名”,”属性值”)

元素.removeAttribute(“属性名”) //删除属性及属性值。

注1：setAttribute()，若属性不存在，创建该属性并设置值；若属性存在，替换属性值。

注2：removeAttribute()，IE6及以前版本不支持

例如：

var div=document.getElementById(“myDiv”);

div.getAttribute(“class”) //”bd”

div.className //”bd”

div.setAttribute(“id” , “abc”) //id属性名改为abc

div.id=”abc”; //id属性名改为abc

问题？？？

可以用div.className查询，div.id=”abc”设置，getAttribute和setAttribute没什么用？？？

解释：

DOM操作分为3个方面，即DOM Core（核心），HTML_DOM和CSS_DOM。

DOM Core的方法：

document.getElementsByTagName("form");

元素.getAttributes("src");

HTML_DOM的方法：

document.form;

元素.src;

CSS_DOM的方法：

元素.style.color="red";

③元素的attributes属性

格式：元素.attributes

返回：元素的属性集合

使用：//在历数元素属性时常用

var elem=document.getElementById(“header”);

for(var i=0;i<elem.attributes.length;i++){

xxx = elem.attributes[i];

}

拥有以下方法：

getNamedItem(name)

返回名为name的节点

removeNamedItem(name)

移除名为name的节点

setNamedItem(name)

添加名为name得到节点

item(pos)

返回位于数字pos位置处的节点

范例：

var div=document.getElementById(“myDiv”);

var x = div.attributes.getNamedItem(“id”).nodeValue; //x = “myDiv”

var x = div.attributes[“id”].nodeValue; //x = “myDiv”

var x = div.getAttribute(“id”) //x = “myDiv”

var x = div.id; //x =“myDiv”

div.attributes.getNamedItem(“id”).nodeValue = “someOhterId”; //id=“someOhterId”

div.attributes[“id”].nodeValue = “someOhterId”; //id =“someOhterId”

div.getAttribute(“id”) = “someOhterId”; //id =“someOhterId”

div.id = “someOhterId”; //id = “someOhterId”

④创建元素

document.createElement(“标签名”)

⑤元素的子节点

在不同浏览器中，子节点的数目可能不同。例如：

</ul>

在IE中，ul包括3个子节点，3个li。

在其他浏览器中，ul包括7个子节点，3个li，4个文本（有一个空白符）

所以在操作前，通常检查nodeType属性。

if（元素.childNodes[i].nodeType == 1）

8.Text类型节点

① 创建文本节点

document.createTextNode(“文本内容”)

9.向 HTML DOM添加新元素。

首先必须创建该元素（元素节点），然后把它追加到已有的元素上。

实例：

<div id="d1">  <p id="p1">This is a paragraph.</p>  <p id="p2">This is another paragraph.</p></div> <script>  var para=document.createElement("p");  var node=document.createTextNode("This is new.");  para.appendChild(node);   var element=document.getElementById("d1");  element.appendChild(para);</script>

10.innerHTML属性，可以向HTML中写入/读取内容。

范例一，读取：

<p id=”p1”>This is <em>my</em> content.</p>

</div>

var x = document.getElementById(“textdiv”);

alert(x.innerHTML);

结果显示：

<p id=”p1”>This is <em>my</em> content.</p>

解释：

innerHTML属性无细节可言，要想获得细节，需要使用DOM方法和属性。

范例二，写入： //适用于将大段HTML内容插入网页

document.getElementById(“textdiv”).innerHTML=”<p id=”p1”>This is <b>my</b> content.</p>”;

document.getElementById(“p1”).innerHTML= ”Hello World!”;

注：使用这个技术无法区分“插入一段HTML内容”和“替换一段HTML内容”。

11.改变样式，格式：

document.getElementById(id).style.property=新样式

范例：

<body>  <p id="p2">Hello world!</p>  <script>    document.getElementById("p2").style.color="blue";  </script></body>

12.事件

HTML 事件的例子：

当用户点击鼠标时：onclick事件

当用户进入或离开页面时：onload 和 onunload 事件

当鼠标移动到/离开元素时：onmouseover和onmouseout

当输入字段被改变时：onchange 事件

0 0