javascript总结31 :DOM概述

1 JavaScript 三个组成部分

核心(ECMAScript)欧洲计算机制造商协会 描述了JS的语法和基本对象。

文档对象模型(DOM) 处理网页内容的方法和接口

浏览器对象模型(BOM) 与浏览器交互的方法和接口

2 DOM (文档对象模型)

DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。

目的其实就是为了能让js操作html元素而制定的一个规范。

3 DOM 树

4 节点(Node)

由结构图中我们可以看到,整个文档就是一个文档节点。

而每一个HMTL标签都是一个元素节点。

标签中的文字则是文字节点。

标签的属性是属性节点。

一切都是节点……

 5 获取节点

-操作节点,必须首先找到该元素。有三种方法来做这件事:

通过 id 找到 HTML 元素 document.getElementById("demo");

通过标签名找到 HTML 元素 document.getElementsByTagName("div")

通过类名找到 HTML 元素 document.getElementsByClassName("a");

通过类名查找 HTML 元素在 IE 5,6,7,8 中无效

6 DOM 访问关系

 DOM的节点并不是孤立的,因此可以通过DOM节点之间的相对关系对它们进行访问.

父兄访问节点方法:

父节点 parentNode

兄弟节点 nextSibling nextElementSibling previousSibling previousElementSibling

子节点 firstChild firstElementChild lastChild lastElementChild

所有子节点 childNodes children

代码实例:

 1.box1是box的父节点
   var box2 = document.getElementsByClassName("box2")[0];
   var box2 = document.getElementById("box2")
   console.log(box2.parentNode);

   //2.nextElementSibling下一个兄弟节点
   console.log(box2.nextElementSibling);

   //firstElementChild第一个子节点
   console.log(box2.parentNode.firstElementChild);

   //所有子节点
   console.log(box2.parentNode.childNodes);
   console.log(box2.parentNode.children);

 

posted @ 2018-04-26 15:07  前端邢晋宇  阅读(119)  评论(0编辑  收藏  举报