常规DOM操作

访问和修改DOM元素
修改DOM元素的样式,造成重绘和重排版
通过DOM事件处理用户响应

DOM--文档对象模型
一 访问DOM元素和插入删除DOM元素:

//高版本浏览器(IE7以下包括IE7)获取元素   可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素,对于多个选择器,使用逗号隔开;
obj.querySelectorAll('css选择器');//获取一组
obj.querySelector('css选择器');获取一个(一类的第一个)

通过ID获取:

<div id="box"></div>
var oDiv = document.getElementById('box');//获取的是一个元素

通过标签名获取: document.getElementsByTagName('标签名')

<div></div>
<div></div>
var aDiv = document.getElementsByTagName('div');//获取的是一组元素

通过类名获取(存在兼容问题IE低版本不兼容):

<div class="box"></div>
<p class="box"></p>
var oBox = document.getElementsByClassName('box');//同样获取的是一组元素;
//类名获取元素兼容写法:
function getByClass(obj,value){
    if(obj.getElementsByClassName){    //高级浏览器支持getElementsByClassName;
        return obj.getElementsByClassName(value);
    }else{                                      //兼容低版本IE;
        var arr = [];
        var aElt = obj.getElementsByTagName('*');
        for(var i=0; i<aElt.length; i++){
            var arr1 = aElt[i].className.split(' ');
            if(findInArray(arr1,value)){
                arr.push(aElt[i]);
            }
        }
        return arr;
    }
}
//上面获取元素可以写成:
getByClass(document,'box');

通过name获取:

<input type="text" name="username" />
<input type="text" name="username" />
var aTxt = document.getElementsByName('username');//获取一组元素

获取子节点:

obj.children;//获取一组元素;所以的子元素;
obj.childNodes;//获取一组元素;所有的子元素(包括文本元素,注释...)
需要使用nodeType属性过滤一下标签元素值为1;文本元素值为3;注释为8

获取父节点

//结构上的父级
obj.parentNode;//获取一个元素
//定位上的父级
obj.offsetParent;//获取一个元素

获取前一个兄弟节点:

obj.previousSibling;//获取一个元素;高版本浏览器会获取文本元素;低版本(IE8-)不会
//兼容写法:
oPrev = obj.previousElementSibling || obj.previousSibling;

获取下一个兄弟节点:

obj.nextSibling;
//兼容写法
oNext  =  obj.nextElementSibling || obj.nextSibling;

获取首节点(同样需兼容):

oFirst = obj.fristElementChild || obj.firstChild;
//另一种获取方式:
oFirst = obj.children[0];//这中写法要确保他有子元素,没有的话会报错;

获取尾节点(兼容):

oLast = obj.lastElementChild || obj.lastChild;
//另一种获取方式:
oLast = obj.children[obj.children.length-1];//同样需要确保有子元素;

创建DOM元素:

 document.createElement('标签名');

添加DOM元素:

//在后面添加子元素
obj.appendChild(obj对象);
//在前面添加:
obj.insertBefore(插入子元素对象,那个子对象之前);

删除DOM元素:

//在父级内删除一个子元素;
oParent.removeChild(obj);

获取滚动条滚动距离:

//横向滚动距离
scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
//纵向滚动距离
scrollTop = document.documentElement.scrollTop || document.body.scrollTop

获取可视区宽高

//获取可视去宽度
clientWidth = document.documentElement.clientWidth;
//获取可视去高度
clientHeight = document.documentElement.clientHeight;

获取物体的宽度高度:

//宽度
obj.offsetWidth;
//高度
obj.offsetHeight

获取物体距离相对定位父级的top和left

//left
obj.offsetLeft;
//top
obj.offstTop

获取样式:

//IE支持通过obj.currentStyle['样式名']获取;高版本支持通过getComputedStyle(obj,false)['样式名']获取,需要兼容一下下;
function getStyle(obj,name){
    return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj,false)[name];
}

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,806评论 1 91
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 2,761评论 0 44
  • 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西...
    微醺岁月阅读 3,751评论 2 62
  • DOM操作可分为3个方面:DOM Core(核心)、HTML DOM和CSS DOM(1)DOM Core不属于J...
    寒桥阅读 349评论 0 1
  • 今天是朵嘉浓三周岁生日,是我和小朵度过的第一个生日。我加入朵嘉浓有些晚。但是我通过冰姐的微信关注了一年多,同时也自...
    朵嘉浓玲美阅读 454评论 0 0
  • 门外传来朗朗书声,我趴在桌子上,慵懒的听着!一转眼,半个月过去了!从刚开始的种种不适应,到现在的按时按点干相应...
    Mirror_米若阅读 58评论 0 3
  • 曾经的我感觉你遥不可及 我是那么狂傲那么爱吹虚 曾梦想做黑帮老大打天下 我的故事太多都是污点 但因你的十架✟舍命救...
    瑞宝Peter阅读 159评论 0 2
  • 最怀念小时候漫山遍野地去掀蝎子的快乐时光。 为什么叫“掀蝎子”呢?因为蝎子生活在石头下的缝隙里,要想捉...
    娴静如水阅读 1,228评论 4 6