JS中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 newp = document.createelement(“p”);设置类名 newp.classname = “item”;设置id

newp.id = “first”;设置背景色 newp.style.background = “red”;添加元素box 进body中

先获取要添加的元素

var body = document.getelementsbytagname(“body”)[0];var box = document.getelementsbyclassname(“box”)[0];body.appendchild(newp);//body中现有两个内容 , 一个是newp 一个是box//现在的情况是把newp的内容插到box后面

要想把p中的内容插入到box的前面则如下: body.insertbefore(newp , box);删除元素 body.removechild(box);//删除box标签 box.remove();dom属性

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

可以通过如下方法获取元素下单所有节点: console.log(box.childnodes); 获取标签类型的子节点 , 得到的节点是一个标签 console.log(box.cheildren[0]);尺寸位置 console.log(newp.offsetwidth);//打印宽度包含边框 console.log(newp.clientwidth);//不含边框也不含滚动条(可视区域) console.log(newp.scrollheight);//也是元素垂直 / 水平滚动了的距离, 或者是元素卷帘卷走的视觉看不到的部分overflow 处理超出部分 visible默认可见overflow:scroll; //出现滚动条位置相对于定位父级的一个位置 console.log(newp.offsettop); console.log(newp.offsetleft);子元素滚动上去的一段距离, 除了scrolltop外,以上元素都是只读 console.log(newp.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/58211568dom是javascript操作网页的接口 , 全称叫文档对象模型 (document object model) 他的作用是将网页转化为一个javascript对象, 从而用javascript脚本进行各种操作(比如增删元素等)

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

严格的来说 dom 不属于 javascript 但是dom操作是javascript最常见的任务而javascript 最常见的任务最常见的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 newp = document.createElement(“p”);设置类名 newp.className = “item”;设置ID

newp.id = “first”;设置背景色 newp.style.background = “red”;添加元素box 进body中

先获取要添加的元素

var body = document.getElementsByTagName(“body”)[0];var box = document.getElementsByClassName(“box”)[0];body.appendChild(newp);//body中现有两个内容 , 一个是newp 一个是box//现在的情况是把newp的内容插到box后面

要想把p中的内容插入到box的前面则如下: body.insertBefore(newp , box);删除元素 body.removeChild(box);//删除box标签 box.remove();DOM属性

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

可以通过如下方法获取元素下单所有节点: console.log(box.childNodes); 获取标签类型的子节点 , 得到的节点是一个标签 console.log(box.cheildren[0]);尺寸位置 console.log(newp.offsetWidth);//打印宽度包含边框 console.log(newp.clientWidth);//不含边框也不含滚动条(可视区域) console.log(newp.scrollHeight);//也是元素垂直 / 水平滚动了的距离, 或者是元素卷帘卷走的视觉看不到的部分overflow 处理超出部分 visible默认可见overflow:scroll; //出现滚动条位置相对于定位父级的一个位置 console.log(newp.offsetTop); console.log(newp.offsetLeft);子元素滚动上去的一段距离, 除了scrollTop外,以上元素都是只读 console.log(newp.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/58211568DOM是Javascript操作网页的接口 , 全称叫文档对象模型 (Document Object Model) 他的作用是将网页转化为一个javascript对象, 从而用Javascript脚本进行各种操作(比如增删元素等)

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

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