javascript-----DOM文档对象模型

1.DOM分类

DOM:文档对象模型，提供了添加、移动、该变、或移除的结构文档的方法和属性

DOM Core：锁定一批标签，看成dom对象，进行业务分析
HTML DOM ：把标签和属性看成是一个DOM，即HTML 文档对象
CSS DOM ：style.cssText
　　　　　　style.属性名：

2. HTML文档中的每个成分都是一个节点

1〉整个文档时一个文档节点

2〉每个HTML是一个元素节点

3〉每个HTML中的文本是一个文本节点

3. 获取当前节点的子节点集合childNodes，写的时候有空格的话会影响结果，所以应该先获取节点信息，然后判断节点类型（nodeType），1：element 元素节点；2：attr 属性节点； 3：#text 文本节点；

例：

window.οnlοad=function(){// 能力检测  查看浏览器内核引擎内有没有某个属性var str=document.getElementById("box");//能力检测var  str1=str.childNodes;for ( var i=0;i<str1.length;i++) {if (str1[i].nodeType==1) {alert(str1[i].innerHTML);}}};

4.　创建和插入节点　

1〉A(父级对象).appendChild(dom);

2〉 insertBefore(A,B) 表示将A插入到B对象之前

例：

window.οnlοad=function(){ 　　　　　　　　　　//动态的构建一个divvar str=document.createElement("div");str.innerHTML="我是div";var bo=document.getElementById("mine");var myul=document.getElementById("box");bo.insertBefore(str,myul);var ss=document.getElementById("first");ss.style.background="red";};

5.替换和删除节点
replaceChild()

　例：

  window.οnlοad=function(){   //等待所有的html标签，img。css。js加载完毕后执行//删除节点 ，A.removeChild(子元素对象)/*    var dom=document.getElementById("first");var box=document.getElementById("box");box.removeChild(dom); *///替换节点};function myreplace(){var myfirst=document.getElementById("first");var dom=document.createElement("li");dom.innerText="打游戏";var box=document.getElementById("box");box.replaceChild(dom,myfirst);}

6.操作节点样式

1〉dom.style.属性名="属性值";规则：碰到有-的，去掉-，后面的第一个字母变成大写；

2〉一次设置n个样式：dom.style.cssText="属性名1:属性值1;属性名2:属性值2";

例：

  var dom=document.getElementById("first");/* dom.style.属性名="属性值";　　　　　　　　　　 dom.style.backgroundColor="pink";dom.style.fontSize="30px"; */dom.style.cssText="background-color:pink;font-size:30px;";};

7. 1〉offsetLeft：类似于css中的margin-left；返回他与父级边框之间的距离，但是父级元素必须有相对定位，否则返回的是本身与浏览器边框之间的距离；

例：

     window.οnlοad=function(){var small=document.getElementById("small");var left=small.offsetLeft;alert(left);};

　2〉scrollTop：返回匹配元素的滚动条的垂直位置

例：

window.οnscrοll=function(){var height=document.documentElement.scrollTop||document.body.scrollTop;document.title=height;var bigBox=document.getElementById("big");bigBox.style.cssText="margin-top:"+height+"px";};

8.dom.className="class属性值"; 规则：配合样式表使用

例：

  window.οnlοad=function(){   //等待所有的html标签，img。css。js加载完毕后执行};function addStyle(){var dom=document.getElementById("first");dom.className="mystyle";}

转载于:https://www.cnblogs.com/cn-930621/p/7056537.html

javascript-----DOM文档对象模型相关推荐

BOM 浏览器对象模型和DOM 文档对象模型
浏览器对象模型BOM 1. 浏览器对象模型介绍 BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的.可 ...
DOM 文档对象模型
DOM 文档对象模型 1. Web API 的概念 api:应用程序接口.是基于编程语言构建的结构,使开发人员更容易地创建复杂的功能 Web API:是 Web 的应用程序编程接口,浏览器 API 可 ...
前端（五）DOM 文档对象模型
注:变量声明尽量用const,const语义化更好,发现变量需要修改(修改值,而非地址)时再改为let(可以重新赋值),var很少用.简单数据类型.(值经常改变时用let) 下面假装我们javascr ...
APl DOM文档对象模型
文章目录一.DOM简介 1.什么是DOM 2.DOM 树二.获取元素的方法 1.根据ID获取 2.根据标签名获取 3.通过 HTML5 新增的方法获取(注意兼容) 4.获取特殊元素(body,ht ...
web前端学习day_03:JavaScript:如何使用/ 语法/ 方法/ NaN/ js对象分类/ BOM浏览器相关/ 事件/ DOM文档对象模型
JavaScript 给页面添加动态效果 JavaScript是一门编程语言,和Java没有关系,为了蹭热度. 语言特点: 属于脚本语言,不需要编译直接解析执行. 基于面向对象属于弱类型语言, 强类 ...
文档对象模型DOM（获取元素节点、设置节点属性）
练习题: 制作一个表格,显示班级的学生信息. 要求: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点 ...
dom文档对象手册_DOM总结
一.DOM是一棵树,树上有Node,Node分为 Document.Element(元素)和 Text(文本),以及其他不重要的. 二.浏览器原生提供document节点,代表整个文档, 文档的第一层 ...
java dom遍历_JavaScript DOM文档遍历实战
在介绍了<JavaScript DOM修改文档树方法实例>与<JavaScript DOM实战:创建和克隆元素>,本文将介绍JavaScript DOM文档遍历的详细知识,我们 ...
javaScript文档对象模型DOM
文档对象模型DOM 文档对象模型(document object model) 有一个表格,点击添加按钮添加事件 DOM中的属性和方法的理解 DOM中属性的操作: 属性映射表文档对象模型(docum ...

javascript-----DOM文档对象模型

javascript-----DOM文档对象模型相关推荐

最新文章

热门文章