DOM知识结构

原创 2018年04月16日 22:29:46

一、编程接口

 

可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问。

所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。

方法是您能够执行的动作(比如添加或修改元素)。

属性是您能够获取或设置的值(比如节点的名称或内容)。

 

二、节点类型:

1. 文档类节点

2. 元素类节点

3. 属性类节点

4. 文本类节点

5. 注释节点

 

三、节点要素:

1nodeType返回节点的类型。nodeType 是只读的。

比较重要的节点类型有:

元素类型NodeType

元素1

属性2

文本3

注释8

文档9

 

2nodeName是只读的

元素节点的 nodeName 与标签名相同

属性节点的 nodeName 与属性名相同

文本节点的 nodeName 始终是 #text

文档节点的 nodeName 始终是 #document

注释:nodeName 始终包含 HTML 元素的大写字母标签名。

 

3nodeValue属性规定节点的值。

元素节点的 nodeValue undefined null

文本节点的 nodeValue 是文本本身

属性节点的 nodeValue 是属性值

 

四、元素之间的关系:

1. parentNode

2. childNodes

3. nextSibling

4. previousSibling

5. firstChild

6. lastChild

 

五、操作DOM

添加/删除/修改/获取 Document类型

添加/删除/修改/获取 Element类型

添加/删除/修改/获取 CSS 样式

添加/删除/修改/获取 Text类型

添加/删除/修改/获取 HTML 属性

改变事件(处理程序)

 

1添加/删除/修改/获取 Document类型

1)文档的子节点

Htmldocument.documentElement;

Body:document.body;

 

2)文档信息

Titledocument.title;

URL:document.URL;

Domain:document.domain;

 

3)特殊集合

文档中所有的<form>元素:document.forms;

文档中所有的<img>元素:document.images;

文档中所有带href特性的<a>元素:document.links;

 

2添加/删除/修改/获取 Element类型

1) 获取 HTML 元素

ü getElementById()

ü getElementsByName()

ü getElementsByTagName():返回带有指定标签名的所有元素

ü getElementsByClassName()Internet Explorer 5,6,7,8 中无效。

 

document.getElementById("main").getElementsByTagName("p");

返回包含文档中所有 <p> 元素的列表,并且这些 <p> 元素应该是 id="main" 的元素的后代(子、孙等等)

 

2) 创建HTML 元素

createElement()创建元素节点。

<div id="div1">

<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("div1");

element.appendChild(para);

</script>

 

3) 添加HTML元素:

appendChild() :将新元素作为父元素的最后一个子元素进行添加。

insertBefore()

<div id="div1">

<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("div1");

var child=document.getElementById("p1");

element.insertBefore(para,child);

</script>

 

4) 删除已有的 HTML 元素:

removeChild(child):必须清楚该元素的父元素

<div id="div1">

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

<script>

var parent=document.getElementById("div1");

var child=document.getElementById("p1");

parent.removeChild(child);

</script>

 

提示:能否在不引用父元素的情况下删除某个元素?

很抱歉。DOM 需要了解您需要删除的元素,以及它的父元素。

这里提供一个常用的解决方法:找到您需要删除的子元素,然后使用 parentNode 属性来查找其父元素:

var child=document.getElementById("p1");

child.parentNode.removeChild(child);

 

5) 替换 HTML 元素:

parent.replaceChild(替换后的,替换前的)

<div id="div1">

<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 parent=document.getElementById("div1");

var child=document.getElementById("p1");

parent.replaceChild(para,child);

</script>

 

3添加/删除/修改/获取 Element 类型的属性

ü attributes

ü 直接将属性名当做元素对象的属性访问(但class属性不起作用,需改用className

 

1)创建HTML属性:createAttribute():创建新的 Attr 节点。

createAttribute(name)

 

抛出:如果 name 参数中含有不合法的字符,该方法将抛出代码为 INVALID_CHARACTER_ERR DOMException 异常。

 

2)获取HTML属性:getAttribute() :返回指定属性名的属性值

element.getAttribute(attributename)

 

3)设置/修改HTML属性:setAttribute():添加指定的属性,并为其赋指定的值。

element.setAttribute(attributename,attributevalue)

注释:Internet Explorer 8 以及更早的版本不支持此方法。

 

4) 删除HTML属性:removeAttribute(style)(彻底删除)

 

4添加/删除/修改/获取 CSS 样式

 

1添加/删除/修改/获取内联style

nodeName.style.fontWeight:

注意:通过nodeName.style返回的数据类型是Object

 

2添加/删除/修改/获取class属性:

nodeName.className="class1";

 

<style>

.hide{display:none;}

</style>

<button type="button" id="hide">Hide the text</button>

<div id="target">text</div>

<script>

document.getElementById("hide").onclick=function(){

   document.getElementById("target").className="hide";

};

</script>

 

3)以元素属性的方式添加/修改/获取样式:

获取:nodeName.getAttribute(style)(返回的数据类型是string;

添加/修改:nodeName.setAttribute(style,attributevalue);

nodeName.setAttribute(class,attributevalue);

 

<style>

.hide{display:none;}

</style>

<button type="button" id="hide">Hide the text</button>

<div id="target">text</div>

<script>

document.getElementById("hide").onclick=function(){

   document.getElementById("target").setAttribute("class","hide");

};

</script>

 

删除:removeAttribute(style)(彻底删除)

 

5添加/删除/修改/获取HTML文本

 

1) 添加/修改/获取HTML文本:innerHTML属性:对于获取或修改 HTML 元素的内容很有用

 

2) 创建HTML文本createTextNode()

 

3) 添加HTML文本:appendChild()

 

4) 删除HTML文本:removeChild()

 

六、说明:

document对象给定的就是当前所访问的文档

document.documentElement表示html标签

获取body的快捷方式:document.body

获取表单元素的快捷方式:document.forms[0].elements[0]

标签属性:.tagName;

 

hasChildNodes()

hasAttributes()

 

 

远程注册表访问

        远程注册表访问  注册表访问控件(Registry Access控件)是一个用VC编写的Server Component,它封装了对注册表的所有操作,通常用来扩展VB或其它编程工具的注...
  • coolstar
  • coolstar
  • 2001-11-19 14:38:00
  • 5302

程序员的知识结构

在过去5年中,我面试了数百名IT工程师,我认为很值得把我的面试IT工程师的经验同大家分享。这能够: ●帮助人们为他们的下一个面试准备 ●帮助IT工程师找到合适的工作。 ●帮助IT工程师创造更好的环境...
  • greenapple_shan
  • greenapple_shan
  • 2014-01-12 14:54:11
  • 820

T型知识结构

传统的知识结构,即仅有某一专业知识的结构。这是惟一的知识结构,或称线性结构。这种知识结构已远远不能适应形势对管理者的要求。新型的人才知识结构通常可分为三角形、宝塔形、衣架型、T型、H型、X型等。前三个...
  • u014805066
  • u014805066
  • 2017-03-21 09:09:54
  • 734

软件工程师必须掌握的知识结构

软件工程师必须掌握的知识结构       软件工程师必须掌握以下知识结构,给那些准备从事软件工程师的人一些指导。 1.编程开发工具. 至少熟练掌握两到三种开发工具的使用, 这是程序员的立身之本....
  • top_worker
  • top_worker
  • 2015-04-15 18:17:36
  • 1114

Android知识结构树

声明:转载的,一图流 上图:
  • bruce_sky
  • bruce_sky
  • 2016-07-16 16:25:30
  • 638

产品经理知识结构

  • 2013年08月23日 10:51
  • 202KB
  • 下载

c++知识结构(c++ primer)

  • themagickeyjianan
  • themagickeyjianan
  • 2016-10-21 23:05:52
  • 250

Android 开发知识结构图

Android 开发知识结构图
  • llp1992
  • llp1992
  • 2015-02-16 16:56:24
  • 5038

操作系统知识结构图

本学期学了操作系统,复习之后整理了相关知识结构图,顿时有茅塞顿开的感觉。在此献上我的整理以飨各位,有不足之处还望斧正/共同探讨 1. 概览2. 结构图下载2.1 文件说明:上面的截图只是冰山一角,每个...
  • young_Emily
  • young_Emily
  • 2017-12-20 13:31:40
  • 163

一个5年软件开发工作经验的程序员的知识结构体系图

这个本人花半天时间整理归纳出来的关于本人从事软件开发工作过程中涉及到的知识体系思维导图。 ...
  • Luckeryin
  • Luckeryin
  • 2011-01-21 17:04:00
  • 5472
收藏助手
不良信息举报
您举报文章:DOM知识结构
举报原因:
原因补充:

(最多只允许输入30个字)