DOM技术简介之一_什么是DOM

一、DOM是什么

   DOM 就是Document Object Model,文档对象模型。
1. Document:
     网页文档---》文档对象
2.  Object: 
     JavaScript语言里的对象可以分为三种类型:
   (1)用户定义对象(user-defined object): 由程序员自行创建的对象
   (2)内建对象(native object): 内建在JavaScrip语言里的对象
   (3)宿主对象(host object): 由浏览器提供的对象
3.  Model:
(1).为某种事物的表现形式。
(2).可用"节点树"描述DOM

二、节点是什么

例子: <p id = "id_reminder" class = "class_reminder" title="a gentle reminder">Don't forget to buy this sturff.</p>
1.元素节点:
DOM的原子是元素节点,如<p>...</p>
2.文本节点
在内容为王的互联网上,绝大多数内容都是由文本提供的。
如Don't forget to buy this sturff.
3.属性节点
属性节点用来对元素做出更具体的描述
title="a gentle reminder"即为一个属性节点

三、获取元素

1.通过元素id
document.getElementById(id); 返回一个对象
例如document.getElemntById("id_reminder");
2.通过标签名字TagName
document.getElementsByTagName("p"); 返回一个对象数组
3.通过类名字ClasName(HTML5支持)
  document.getElementsByClassName("class_reminder"); 返回一个对象数组

四.获取和设置属性

1.getAttribute
  object.getAttribute(attribute);
2.setAttribute
  object.setAttribute(attribute,value);


五.节点的属性

1.childNodes属性
在一棵节点树上,childNodes属性可以用来获取任何一个元素的所有子元素,
它是一个包含这个元素全部元素的数组
element.childNodes 返回的数组包含所有类型的节点,而不仅仅是元素节点
var body_element = document,getElemensByTagName("body")[0];
alert(body_element.childNodes);
2.nodeType属性
alert(body_element.nodeType);
①元素节点的nodeType属性值是1
②属性节点的nodeType属性值是2
③文本节点的nodeType属性值是3
3.nodeValule属性
  如果想改变一个文本节点的值,需使用此属性
4.firstChild和lastChild属性
node.firstChild 与 node.childNodes[0]等价
同理node.lastChild 与 node.childNodes[node.childNodes.length - 1]等价



原文地址:https://www.cnblogs.com/yeahwell/p/5226088.html