JS 中DOM操作基础

DOM

DOM即 Document Object Model 是 W3C (万维网联盟)的标准

DOM定义访问 HTML 和 XML 的标准 : W3C文档对象模型(DOM)是中立于平台和语言的接口, 它允许程序 和脚本 动态的访问和更新文档的内容,结构和样式

W3C Dom 标准被分为 3 个不同的部分: 1.核心DOM -针对任何结构化文档的标准模型 2.XML DOM -针对XML文档的标准模型 3.HTML DOM - 针对HTML文档的标准模型

其中在HTML DOM 中 ,所有事物都是节点 , DOM 是被视为节点数的HTML.

1.整个文档是一个文档节点 2.每个HTML元素是元素节点 3.HTML元素内的文本是文本节点 4.每个HTML属性是属性节点 5.注释是注释节点

HTML DOM将HTML文档视作树结构 , 这种结构被称之为节点树, 通过HTML DOM,树中的所有节点均可通过 JavaScript 进行访问 , 所有HTML节点(元素)均可被修改,也可以创建或删除节点.

一些常用的HTML DOM 方法:

1.getElementById(id)-获取带有指定id的节点(元素) 2.appendChid(node)-插入新的子节点(元素) 3.removeChild(node)-删除子节点(元素)

一些常用的HTML DOM属性: 1.innerHTML-节点(元素)的文本值 2.parentNode-节点(元素)的父节点 3.childNodes-节点(元素)的子节点 4..attributes-节点(元素)的属性节点

DOM操作

创建元素

var newDiv = document.createElement("div");

设置类名 newDiv.className = "item";

设置ID

newDiv.id = "first";

设置背景色 newDiv.style.background = "red";

添加 元素box 进body中

先获取要添加的元素

var body = document.getElementsByTagName("body")[0];

var box = document.getElementsByClassName("box")[0];

body.appendChild(newDiv);//body中现有两个内容 , 一个是newDiv 一个是box

//现在的情况是把newDiv的内容插到box后面

要想把div中的内容插入到box的前面 则如下: body.insertBefore(newDiv , box);

删除元素 body.removeChild(box);//删除box标签 box.remove();

DOM属性

节点 : 标签 文本 注释 声明(doctype)

可以通过如下方法获取元素下单所有节点: console.log(box.childNodes); 获取标签类型的子节点 , 得到的节点是一个标签 console.log(box.cheildren[0]);

尺寸 位置 console.log(newDiv.offsetWidth);//打印宽度 包含边框 console.log(newDiv.clientWidth);//不含边框也不含滚动条(可视区域) console.log(newDiv.scrollHeight);//也是元素垂直 / 水平滚动了的距离, 或者是元素卷帘卷走的视觉看不到的部分

overflow 处理超出部分 visible默认可见

overflow:scroll; //出现滚动条

位置 相对于定位父级的一个位置 console.log(newDiv.offsetTop); console.log(newDiv.offsetLeft);

子元素滚动上去的一段距离, 除了scrollTop外,以上元素都是只读 console.log(newDiv.scrollTop)

定时器

一次性定时器 , 只能使用一次

写法1: var time = setTimeout(function(){ console.log("一次性定时器"); },1000);

写法2: function f1(){ console.log("一次性定时器"); } setTimeout(f1,1000);

清除一次性定时器 clearTimeout(time);

循环计时器, 每隔一段时间,就会执行一次函数

写法1: var timer = setInterval(funtion(){ console.log("循环计时器"); })

var timer = setInterval(f2 , 1000);

清除循环定时器 clearInterval(timer);

DOM是HTML文档结构 其实就是为了能JS操作html元素而制定的一个规范, dom的根本就是document对象,该对象有很多属性和放法 例如 创建节点 复制节点 移除节点 修改属性等 DOM对象的出现是为了方便javascript 操作HTML标签而已 , DOM全面为Document Object Model (文档对象模型), 也是基于HTML 文档出来的 , 提供给Javascript用来动态(比如点击事件)修改文档的状态, 所以操作DOM就是在操作HTML文档对象(每一个标签)

CSS就是将HTML文档样式而已,而javascript能把HTML和CSS相结合 , 也就是以前所说的DHTML(动态HTML)

DOM就是将XML (或者HTML)内的节点定义成基本统一的对象数据可以提供程序语言 (如 javascript) 控制的技术规范

可以使用javascript语言来操作DOM以改变网页,为了改变网页,你必须告诉Javascript操作哪一个节点,这就是操作DOM

操作DOM可以让你更改网页的交互方式.所有网页的交互都依赖这种DOM技术,即使不用Javascript,也可以使用其他语言来操作DOM

DOM是一棵树,数值和树叶都做了编号 , 你告诉一个脚本 一个函数去寻找那一个枝干的哪一个叶子,对这个这个叶子要做什么改变

当你在知乎的搜索栏输入数据时,Javascript 捕获到了你的输入 ,对服务器使用异步查询 , 动态显示搜索结果.

当你向下滑动时 , Javascript 捕获到了你滑动的距离,根据距离的大小来判断是否改变, DOM, 进而让顶部的导航栏跟随浏览器窗口滚动,免得你回头去找.

当你点击修改按钮时, javascript , 捕获到了这个按钮的鼠标点击事件,反馈了一个可编辑的答案给你

Javascript 不能够真正改变DOM 他仅仅是改变呈现的内容,当你刷新的时候就会发现呈现的内容消失了.

但是你可以把这些改变用请求的方式传递给后端语言接口 , 由后端语言 PHP Python Java Node 等 来进行后续的操作 , 他们接到你的请求之后就去修改服务器数据,这样改变就生效了刷新后不会消失 了

但是用户的交互 比如弹窗 滑过变色等等根本没必要让服务器也跟着搀和 原因是 交互只是暂时的 用完了还要变成默认的 不需要保存到服务器 只要保证交互的时候有反馈就可以了.

HTML 表达静态结构 (网页的基本元素 每个元素的基本功能 元素的基本功能可以产生什么意义,这个意义能产生什么样的内容)

CSS 呈现层次美化 (元素的基本及特殊属性 元素的形状,状态,元素的布局)

Javascript 负责动态交互(操作 DOM使用 AJAX 进行异步刷新 , 与服务器交互) 该链接介绍的还不算错. https://www.zhihu.com/question/34219998/answer/58211568

DOM是Javascript操作网页的接口 , 全称叫 文档对象模型 (Document Object Model) 他的作用是将网页转化为一个javascript对象, 从而用Javascript脚本进行各种操作(比如增删元素等)

浏览器会根据DOM模型, 将结构文档化 (比如 HTML 或者 XML等 ) 解析成一系列的节点, 再由这些节点解析成树状结构(Dom Tree), 所有的节点和最终的树状结构都有规范的对外接口 , 所以DOM可以理解成网页的编程接口. DOM有标准的国际标准, 我们目前使用的是DOM3

严格的来说 DOM 不属于 Javascript 但是DOM操作是Javascript最常见的任务 而Javascript 最常见的任务 最常见的DOM操作语言.