DOM

DOM概念

DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。

这些对象又称为节点： 整个文档是一个文档节点（document）(document.documentElement:根节点HTML标签)

每个 HTML 标签是一个元素节点

包含在 HTML 元素中的文本是文本节点

每一个 HTML 属性是一个属性节点

注释属于注释节点

对象之间的关系叫做Node 层次

HTML标签是根（root）节点。节点之间都存在着父子（parent \child）、同胞（sibling）的关系

查询元素节点

        getElementById()   //获取特定 ID 元素的节点 
        getElementsByTagName()   //获取相同标签名的元素节点，返回数组，使用[0]来获取 
        getElementsByName()   //获取相同name属性的元素节点，不是所有标签都有name属性，某些低版本浏览器会有兼容性问题 
        getElementsByClassName()   //获取相同class属性的节点列表       IE8及以下不支持 

        parentNode                  父节点。 
        childNodes                  当前节点包含的所有子节点(文本和元素节点都有)。 
        firstChild                  当前节点的第一个子节点。 
        lastChild                   当前节点的最后一个子节点
        
        previousSibling         访问前一个同胞节点。 
        nextSibling         访问后一个同胞节点。 

注：列表中第一个节点的 previousSibling 属性值为 null ，

而列表中最后一个节点的 nextSibling 属性的值同样也为 null

节点的增删改

        document.creatElement(HTML标签名)                      //创建一个元素节点
        document.creatTextNode(文字)                              //创建一个文本节点
        
        node.removeChild(oldChild)                      //删除oldChild子节点
        node.replaceChild(newChild,oldChild)    //用newChild节点替换oldChild
        
        node.appendChild(newChild)                      //newChild将被添加到子列表的末端
        node.insertBefore(newChild,referenceNode)           // 将 newChild 节点插入到 referenceNode 之前

注：子节点中包含文本节点、注释节点和元素节点。

通过nodeType属性来判断节点类型，1代表元素节点，2代表属性节点，3代表文本节点

表格的增删改

表上的行、列集合

            tab.cells[index];   //取得行中的某一列

插入

            tab.insertRow(index);           //插入新行并返回新行，index为插入位置，不写插入到表末
            tab.insertCell(index);      //插入新列并返回新列，index为插入位置，不写插入到行末      

删除

            tab.deleteRow(index);
            tab.deleteCell(index);

window.onscroll事件

取得滚动条位置

    document.body.scrollTop         //谷歌(设为0页面回到顶部)
    document.documentElement.scrollTop  //标准

兼容写法

document.documentElement.scrollTop||document.body.scrollTop

页面可见区域高度

document.body.clientHeight (如果出现问题用document.documentElementclientHeight)

HTML元素上常用的属性和方法

   element.appendChild()        向元素添加新的子节点，作为最后一个子节点
   element.attributes           返回元素属性的NamedNodeMap
   element.childNodes           返回元素子节点的NodeList
   element.className            设置或返回元素的class属性
   element.clientHeight     返回元素的可见高度
   element.clientWidth      返回元素的可见宽度
   element.cloneNode            克隆元素
   element.firstChild           返回元素的首个子元素
   element.getElementsByTagNames    返回拥有指定标签名的所有子元素的集合

-------------------------------------------------------------------

- element.getAttribute()        获取元素拥有的自定义属性
- element.setAttributes()       设置元素自定义属性
- element.id                    设置或返回元素的id
- element.innerHTML         设置或返回元素的内容
- element.insertBefore()        在指定的已有的子节点之前加入新结点
- element.lastChild()           返回元素的最后一个子元素
- element.nextSibling           返回位于相同节点树层级的下一个节点
- element.nodeName          返回元素的名称
- element.nodeType          返回元素的节点类型
- element.nodeValue         设置或返回元素值
- element.offsetHeight      返回元素的高度
- element.offsetWidth           返回元素的宽度
- element.offsetLeft            返回元素的水平偏移位置
- element.offsetTop         返回元素的垂直偏移位置
- element.offsetParent      返回元素的偏移容器```

-------------------------------------------------------------------

- element.parentNode            返回元素的父节点
- element.previousSibling       返回位于相同节点树层级的前一个元素
- element.removeAttribute() 从元素中移除指定属性
- element.removeAttributeNode() 移除指定的属性节点，并返回被移除的节点
- element.removeChild()     从元素中移除子节点
- element.replaceChild()        替换元素中的子节点
- element.scrollHeight      返回元素的整体高度
- element.scrollWidth           返回元素的整体宽度
- element.scrollLeft            返回元素左边缘与视图之间的距离
- element.scrollTop         返回元素上边缘与视图之间的距离
- element.style             设置或返回元素的styles属性
- element.tagName               返回元素的标签名
- element.title             设置或返回元素的title属性
- element.toString()            把元素转换为字符串
- nodelist.length               返回NodeList中的节点数

访问节点的自定义属性

attributes

• getAttribute() 获取特定元素节点属性的值
• setAttribute() 设置特点元素节点属性的值
• removeAttribute() 移除特定元素节点属性
• node.setAttribute("属性名","值") 的方式设置常规属性和自定义属性
• node.getAttribute("属性名") 的方式访问常规属性和自定义属性

innerHTML，innerText，outerHTML的用法及区别

• innerHTML:
  从对象的起始位置到终止位置的全部内容，包括html标签

• innerText
  从起始位置到终止位置的内容，但它除去html标签

• outerHTML
  除了包含innerHTML的全部内容外，还包含对象标签本身

• 注明：innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText

获取style属性的值

1.   针对内联的写法（也就是说，把样式写在HTML标签里面）
` DOM对象.style.样式属性 `
2. 由于样式属性并没写在HTML标签里，所以，没法用style直接获取。        
    ①针对IE,使用currentStyle属性        
    ②针对其它主流浏览器，要使用window对象的getComputedStyle函数。
对于样式获取尽量使用currentStyle和getComputedStyle 兼容性问题，我们可以封装一个函数：

function getStyle(obj, attr) {        
    if (obj.currentStyle) {    //IE浏览器            
    return obj.currentStyle[attr];       
     } else {     //Chrome 和 Firefox浏览器            
     return getComputedStyle(obj,  false)[attr];        
     }    
}

或者

if(document.all) {   //是IE浏览器
    return obj.currentStyle[attr];    
    } else{        
     return getComputedStyle(obj,  false)[attr];    
     }

JavaScript获取屏幕大小的常用方法列举

1. 网页可见区域宽/高

document.body.clientWidth || document.documentElement.clientWidth
document.body.clientheight || document.documentElement.clientHeight

1. 网页正文全文宽/高

document.body.scrollWidth
document.body.scrollHeight(可见+不可见)

同样适用于DIV

element.scrollHeight        元素的整体高度
element.scrollWidth     元素的整体宽度

1. 元素可见区域宽(包括边框)

element.offsetWidth 通过计算得到的某个元素的高(元素必须出现在页面上)
element.offsetHeight    通过计算得到的某个元素的宽(元素必须出现在页面上)

1. 定位父级

• element.Parent 返回元素的偏移容器(最近的有定位的父元素)
  定位父级offsetParent的定义是： 与当前元素最近的经过定位(position不等于static)的父级元素.

1. 元素距离父元素的顶部(左侧)的距离

• element.offsetLeft 返回元素的水平偏移位置(基于最近的有定位的父元素，如果没有，就是body)
• element.offsetTop 返回元素的垂直偏移位置(基于最近的有定位的父元素，如果没有，就是body)

1. 网页被卷去的左

• document.body.scrollLeft

网页被卷去的上

• document.body.scrollTop

兼容性写法

• document.documentElement.scrollTop 获取当前页面的滚动条纵坐标位置

1. 页面距离屏幕的左边距

• window.scrollLeft

页面距离屏幕的上边距

• window.scrollTop

1. 屏幕分辨率的宽

• window.screen.width

屏幕分辨率的高

• window.screen.height

event事件

常见DOM0事件

• onchange 域的内容被改变
• ondbclick 鼠标双击
• onfocus 元素获取焦点
• onblur 元素失去焦点
• onkeydown 键盘上某个按键被按下
• onkeyup 键盘上某个按键被松开
• onkeypress 键盘上某个按键被按下并松开
• onmousedown 鼠标被按下
• onmouseup 鼠标被松开
• onmouseover 鼠标移到某元素之上
• onmouseout 鼠标从某元素移开
• onmousemove 鼠标被移动
• onreset 重置按钮被点击，引发Form重置事件
• onresize 窗口(body)或框架被重新调整大小
• onsubmit 确认/提交 按钮被点击，引发Form提交事件
• onload (body)用户退出(刷新)页面

注：所有DOM0事件都有"on"作为开头