一、DOM节点的操作

1.增加：

　　(1). document.creatElement('标签名');创建元素节点

　　(2). document.creatTextNode('文本内容')；创建文本节点

　　(3). document.creatComment('注释内容');　　创建注释节点

　　(4). document.DocumentFragment();添加文本碎片

2.插入

　　(1). dom.appendChild('domName'); 向Dom添加子节点

　　　　document.body.append('domName');向body下添加子节点

　　(2). Parent.insertBefore(a, b);/*insert a before b*/

3.删除

　　(1). Parent.removeChild('子节点标签名');剪切子节点，并返回

4.替换

　　(1). Parent.replaceChild(new, origin);用new 来替换orign，且orign返回

二、Element的一些属性

　　1. dom.innerHTML  返回dom的内容，返回类型为字符串，可读可写本

  1. for(var i = 0; i < 3; i++){
  2.     div.innerHTML += '<span>i</span>';
  3. }

　　2.dom.innerText(火狐不兼容)/dom.textContent(老版本IE不好用)，  注意：影响操作赋值语句，会影响标签，修改覆盖

三、Element的一些方法

　　1.dom.setAttribute('特证名', '修改后内容')；设置特征（包括自定义的）；

　　 div.setAttribute('id', 'demo');

　　2.dom.getAttribute('特证名')；获取特征值

　　注意：ＪＳ改变样式，以改变class为优先选择

利用上述一、二、三的内容可以动态的向html文档添加内容

四、日期对象 Date（）

　　1.计算机纪元时间：1970.1.1

五、计时器

　　1、setInterval(执行函数，间隔时间)；每间隔设定时间，执行一次要求的函数

　　

  1. var i = 0;
  2.     window.setInterval(function(){
  3.     i++;
  4.     console.log(i);
  5.     console.log(this);// => window,++
  6. },1000 );

　　特点：(1).耗性能，执行时间有误差不准，（因为放入执行队列后不一定执行）

　　　　   (2).setInterval()存在返回值　　

　　　　　(3). 函数参数部分传入字符串(函数体)也可执行

  1. setInterval('i++;console.log(i)',1000);

　　2.clearInterval(setInterval的返回值); 停止setInterval函数的执行

  1. 　　　　　var i = 0;
  2.         var timer = window.setInterval(function(){
  3.             i++;
  4.             console.log(i);
  5.             if(i == 10){
  6.                 clearInterval(timer);
  7.             }
  8.         },1000 );// => 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
    　　　　　　setInterval()返回值为该方法第几次定义的数字；

　　3.setTimeout(function(){},time);//间隔time后执行该函数一次

　　4.learTimeout()；终止setTimeout

六、DOM基本操作

　　1.查看滚动条的滚动距离

　　　　（1）window.pageXOffset/pageYOffset
　　　　　　　　　横轴和竖轴
　　　　　　IE8及IE8以下不兼容
　　　　（2）a. document.body.scrollTop/document.body.scrollLeft
　　　　　　b. document.documentElement.scrollTop/document.documentElement.scrollLeft;
　　　　　　任何一个浏览器a和b两种方法必有一个不能用，无值，所以：两种方法求和即可解决这种问题
　　　　（3）封装结局兼容和第二个问题

  1. 　　　　　　function getScrollOffset() {
  2.                 if(window.pageXOffset) {
  3.                     return {
  4.                         w: window.pageXOffset,
  5.                         h: window.pageYOffset
  6.                     }
  7.                 }
  8.                 var dis = {
  9.                     w: document.body.scrollLeft + document.documentElement.scrollLeft,
  10.                     h：document.body.scrollTop + document.documentElement.scrollTop;
  11.                 }
  12.             }

　　

　　2.　（1）window.innerWidth/window.innerHight,可视区域宽高，IE8及IE8以下不兼容
　　　　（2）标准模式下：document.documentElement.clientWidth/document.documentElement.clientHeight
　　　　 (3)怪异模式下：document.body.clientWidth/document.body.clientHeight
　　　　　　（怪异模式下，老版本语法规则兼容，方法：将上方<!DOCTYPE html>去掉）
　　　　　　　document.compatMode 在控制台查看是否为怪异模式,返回'BackCompat',则为怪异模式，返回'CSS1Compat',则为非怪异模式
　　　　(4)可视区封装域宽高，解决兼容和不同模式下问题

　

  1. 　　　　　　function setViewportOffset() {
  2.                  if(window.innerWidth){
  3.                      return {
  4.                          w: window.innerWidth,
  5.                          h: window.innerHeight
  6.                      }
  7.                  }
  8.                  if(document.compatMode == 'BackCompat'){
  9.                      return{
  10.                          w: document.body.clientWidth,
  11.                          h: document.body.clientHeight
  12.                      }
  13.                  }else {
  14.                      return {
  15.                          w: document.documentElement.clientwidth,
  16.                          h: ocument.documentElement.clientHeight
  17.                      }
  18.                  }
  19.              }

　　

　　3.查看元素尺寸
　　　　（1）elementNode.getBoundingClientRect();
　　　　　　返回的left和top，为左上角坐标，right和bottom为右下角坐标，相对浏览器；
　　　　　　height和width在老版本并未实现
　　　　　　返回结果为一个对象且非实时
　　　　（2）封装，解决老版本不兼容问题

  1. 　　　　Element.prototype.getElementOffset = function(){
  2.                 var objData = this.getBoundingClientRect();
  3.                 if(objData.width) {
  4.                     return {
  5.                         w: objData.width,
  6.                         h: objData.height
  7.                     }
  8.                 }else{
  9.                     return {
  10.                         w: objData.right - objData.left,
  11.                         h: objData.top - objData.bottom
  12.                     }
  13.                 }
  14.             }

　　　　

　　　　（3）elementNode.offsetWidth/offsetHeight/offsetLeft/offsetTop/,查看该元素宽高
　　　　　　dom.offsetLeft/offsetTop 对于无定位父级的元素，返回相对整个文档的坐标，对于有定位父级的元素，返回相对于最近定位父级元素的坐标
　　　　　　offsetParent 返回最近的定位的父级，body调用返回null
　　　（4）封装获得返回元素右下角相对于浏览器原点的坐标

　

  1. 　　　　Element.prototype.getScrollOffset = function () {
  2.                 if(!this.offsetParent){
  3.                     return{
  4.                         w: this.offsetWidth,
  5.                         h: this.offsetHeigth
  6.                     }
  7.                 }
  8.                 var width = this.offsetWidth,
  9.                     height = this.offsetHeight,
  10.                     tar = this;
  11.                 while(tar.offsetParent != null){
  12.                     tar = tar.offsetParent;
  13.                     width += this.offsetWidth;
  14.                     height += this.offsetHeight;
  15.                 }
  16.                 return {
  17.                     w:  width + tar.offsetWidth,
  18.                     h: height + tar.offsetHeight
  19.                 }
  20.             }

　　

　　4.让滚动条滚动
　　　　1.scrollTo(x,y);滚动到x，y的距离，每次都相对于浏览器原点
　　　　2.scroll（x，y）;和 1方法同
　　　　3.scrollBy();滚动到x，y的位置，每次都相对于当前滚动条的位置，之前数据累加

 

JS之DOM（二）的更多相关文章

  1. 继续JS之DOM对象二

    前面在JS之DOM中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement('a');添加节点:ele ...

  2. JS之DOM对象二

    前面在JS之DOM中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement('a');添加节点:ele ...

  3. 前端之JavaScript：JS之DOM对象二

    继续JS之DOM对象二 前面在JS之DOM中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement(' ...

  4. 【JavaScript实用技巧（二）】Js操作DOM（由问题引发的文章改版，新人大佬都可）

    [JavaScript实用技巧(二)]Js操作DOM(由问题引发的文章改版,新人大佬都可!) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人 ...

  5. python学习笔记十三 JS，Dom（进阶篇）

    JS介绍 JavaScript 是属于网络的脚本语言!JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用:JavaScript 是因特网上最流 ...

  6. 【高德地图API】从零开始学高德JS API（二）地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

    原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...

  7. 原生js操作DOM基础-笔记

    原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...

  8. js的dom对象（带实例超详细全解）

    js的dom对象(带实例超详细全解) 一.总结 一句话总结: 1.DOM中的方法区分大小写么? 解答:区分 2.DOM中元素和节点的关系式什么? 解答:元素就是标签,节点中有元素节点,也是标签,节点中 ...

  9. js的dom测试及实例代码

    js的dom测试及实例代码 一.总结 一句话总结: 1.需要记得 创建 标签和创建文本节点都是document的活:document.createTextNode("Rockets的姚明&q ...

  10. js的dom操作（整理）（转）

    js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...

随机推荐

  1. Oracle连乘聚合函数 MUL

    Oracle提供了求和(SUM),平均值(AVG)等聚合函数,但没有提供连乘的聚合函数. 比如有一个表如下: ID NUM 1 4 2 2 3 2 如果要求NUM列的连乘数,即求: 4*2*2 ,目前 ...

  2. git的初步使用

    1.在GitHub上建立项目登录GitHub后,你可以在右边靠中那里找到一个按钮“New Repository”,点击过后,填入项目名称.说明和网址过后就可以创建了,然后会出现一个提示页面,记下类似g ...

  3. [小技巧]让C#的空值处理变得更优雅

    参考 http://www.codeproject.com/Articles/739772/Dynamically-Check-Nested-Values-for-IsNull-Values?msg= ...

  4. UIAlertControl swift

    let alertController = UIAlertController(title: "开始!", message: "游戏就要开始,你准备好了吗?", ...

  5. Java把内存划分为4个部分 1. 代码区 1、栈区 3、堆区 4、静态区域

    1.栈区(stacksegment)—由编译器自动分配释放,存放函数的参数值,局部变量的值等,具体方法执行结束之后,系统自动释放JVM内存资源 2.堆区(heapsegment)—一般由程序员分配释放 ...

  6. Vue2.0的通用组件

    饿了么基于Vue2.0的通用组件开发之路(分享会记录)   Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库. ...

  7. java笔试题(1)

    char型变量中能不能存贮一个中文汉字? char型变量是用来存储Unicode编码的字符的,unicode编码字符集中包含了汉字,所以,char型变量中当然可以存储汉字啦.不过,如果某个特殊的汉字没 ...

  8. JavaScript 异常

    转载自:http://www.cnblogs.com/aqbyygyyga/archive/2011/10/29/2228824.html(排版格式修改了一下) 一.错误处理的重要性 以前,javas ...

  9. 使用XmlInclude解决WebService调用时无法识别子类的异常

    一.定义抽象类及子类,WebMethod实际返回子类参数 //使用XmlInclude解决WebService调用时无法识别子类的异常 [System.Xml.Serialization.XmlInc ...

  10. Matlab实现网络拓补图

    顶点号 顶点号 权值 1 2 400 1 3 450 2 4 300 2 8 230 2 9 140 3 4 600 4 5 210 4 19 310 5 6 230 5 7 200 6 7 320 ...