HTML DOM结构和操作

2018年2月1日20:54:21 发表评论 17

DOM是什么?有什么样的作用?DOM是文档对象模型(Document Object Model),是W3C组织制定的可拓展的标准编辑接口,我们在写页面时,可以通过JS操作页面上的元素,进行添加、移动、修改、删除等方法,这些都是DOM。大家务必要理解DOM结构和操作。

DOM结构

我们首先来看一下W3C DOM的标准,一共分为3个,依次是核心DOM、XML DOM、和HTML DOM。这3个部分很明显,一个是针对任何结构化文档的标准模型,另外两个一个是XML文档模型,一个是HTML文档模型。

在HTML中,所有的内容都是节点,包括HTML元素和属性,就连注释也是注释节点。

我们一起来看下这DOM树图片,图片中的所有节点均可通过JS访问,也可以做任何操作。

HTML DOM结构和操作

节点和节点之间也有和人一样的描述关系,有父(parent)、子(child)、同胞(sibling)等,同级的节点一般叫做兄弟或者姐妹,看下面这张图中,最顶端的节点叫根(root),每个节点都有父节点,每个节点可以拥有无数的子节点。

HTML DOM结构和操作

DOM操作

在外行人看来我们前端无非就是改页面,写css,写js,如果你自己意识到你不是在改HTML而是在操作DOM的时候,你就有很大的进步了,DOM是浏览器为JS提供的一套接口,通过这些接口我们可以很容易的操作页面。

1. DOM创建

创建DOM可以是一个标签,一个文本甚至一个属性,DOM节点有一个nodetype属性可用来表示当前元素的类型,元素(Element)/属性(Attribute)/文本(Text),我们创建DOM是使用的document.createElementdocument.createTextNode方法

  1. var el1 = document.createElement('div');
  2. var el2 = document.createElement('input');
  3. var node = document.createTextNode('hello world!');

2. DOM查询

DOM查询结果返回的是DOM节点或者DOM节点的列表,下面是提供的方法:

  1. // 返回当前文档中第一个类名为 "myclass" 的元素
  2. var el = document.querySelector(".myclass");
  3. // 返回一个文档中所有的class为"note"或者 "alert"的div元素
  4. var els = document.querySelectorAll("div.note, div.alert");
  5. // 获取元素
  6. var el = document.getElementById('xxx');
  7. var els = document.getElementsByClassName('highlight');
  8. var els = document.getElementsByTagName('td');
  9. // 获取父元素、父节点
  10. var parent = ele.parentElement;
  11. var parent = ele.parentNode;
  12. // 获取子节点,子节点可以是任何一种节点,可以通过nodeType来判断
  13. var nodes = ele.children;
  14. // 查询子元素
  15. var els = ele.getElementsByTagName('td');
  16. var els = ele.getElementsByClassName('highlight');
  17. // 当前元素的第一个/最后一个子元素节点
  18. var el = ele.firstElementChild;
  19. var el = ele.lastElementChild;
  20. // 下一个/上一个兄弟元素节点
  21. var el = ele.nextElementSibling;
  22. var el = ele.previousElementSibling;

3. DOM修改和操作属性

下面是添加、删除、替换、插入DOM的一些方法和属性的操作:

  1. // 添加、删除子元素
  2. ele.appendChild(el);
  3. ele.removeChild(el);
  4. // 替换子元素
  5. ele.replaceChild(el1, el2);
  6. // 插入子元素
  7. parentElement.insertBefore(newElement, referenceElement);
  8. // 获取一个{name, value}的数组
  9. var attrs = el.attributes;
  10. // 获取、设置属性
  11. var c = el.getAttribute('class');
  12. el.setAttribute('class', 'highlight');
  13. // 判断、移除属性
  14. el.hasAttribute('class');
  15. el.removeAttribute('class');
  16. // 是否有属性设置
  17. el.hasAttributes();

DOM操作是前端每天都在做的事,毋庸置疑理解DOM是非常重要的,这样的话在日常工作中就能避免掉入DOM的坑。

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: