By

文章目录
  1. 1. DOM

    DOM基础的学习笔记。

DOM

  1. Node类型DOM1级定义了一个Node接口，JS中的所有节点类型都继承自Node类型，所以所有的节点类型都共享着相同的属性与方法。
    都有的属性（只读）：

    nodeType
    nodeName& nodeValue: 这两个值取决于节点的类型。对于元素 nodeName:元素的标签名，nodeValue:null.
    childNodes :保存着NodeList对象。
    parentNode
    previousSibling:childNodes 列表中的第一个节点的previousSibling为null
    nextSibling:childNodes 列表中的最后一个节点的nextSibling为null
    firstChild:childNodes 列表中的第一个节点
    lastChild:childNodes 列表中的最后一个节点
    ownerDocument:整个文档的整个节点
    hasChildNodes()

    操作节点：

    appendChild(): 向childNodes列表的末尾添加一个节点，返回新增的节点
    insertBefore():
    replaceChild()
    removeChild()
    cloneNode:用于创建调用这个方法的节点的一个完全相同的副本 深复制&浅复制
    normalize():

  2. Document类型nodeType:9

  3. Element类型
    nodeType：1
    nodeName 和 tagName都是元素标签名，获得标签名在用于相关操作时最好转换成大写或者小写。
    nodeValue 值为null
    操作特性(属性)的方法：

    getAttribute()
    setAttribute()
    removeAttribute()

    Element类型中含有attributes属性。attributes属性中包含一个NamedNodeMap，是动态的集合。此对象拥有的方法：

    getNamedItem(name)
    removeNamedItem(name)
    setNamedItem(node)
    item(pos)

    attributes 属性中包含一系列节点，每个节点的nodeName就是特性(属性)的名称，nodeValue是特性的值

  4. text类型
    nodeType：3
    nodeName:”#text”
    nodeValue : 节点所包含的文本。访问节点中的文本可以通过 nodeValue 或者data属性。
    操作节点中的文本的方法：

    appendData(text)
    deleteData(offset,count)
    insertData(offset,text)
    replaceData(offset,count,text)
    splitText(offset)
    substringData(offset,count)
    document.createTextNode(text)创建新文本节点

  5. Attr类型
    nodeType：2
    nodeName:特性的名称
    nodeValue:特性的值
    Attr 对象3个属性： name,value 和 specified

  6. DOM 操作内容

    innerHTML属性用来获取和设置HTML内容。语法：元素节点.innerHTML 或者 元素节点.innerHTML = ‘HTML字符串’;
    innerText|textContent属性用来获取和设置文本内容。fireFox使用textContent来获取和设置（注意兼容性）。语法：元素节点.innerText 或者 元素节点.innerText = ‘HTML字符串’;

  7. 操作位置与大小

    clientWidth属性用来获取元素的实际宽度，该值受滚动条和内边距影响，外边距和border不会影响。语法：element.clientWidth;
    clientHeight属性用来获取元素的实际高度，该值受滚动条和内边距影响，外边距和border不会影响。语法：element.clientHeight;
    offsetWidth属性用来获取元素的实际宽度，该值受边框和内边距影响，外边距和滚动条不会影响。语法：element.offsetWidth;
    offsetHeight属性用来获取元素的实际高度，该值受边框和内边距影响，外边距和滚动条不会影响。语法：element.offsetHeight;
    offsetTop和offsetLeft属性用来获取元素相对于父级的位置。该值受外边距影响。语法：element.offsetTop || element.offsetLeft;
    scrollTop和scrollLeft属性用来获取滚动条被隐藏的区域大小，也可设置定位到该区域（比如返回顶部）。语法：element.scrollTop || element.scrollLeft || element.scrollTop = 0;

  8. DOM操作样式

    style属性用来获取和设置元素的行内样式。语法：element.style;style属性只能获取和设置行内样式，对于如font-size这种样式属性，应该去掉 - 并且将 - 后面的第一个字母大写，驼峰法来获取和设置 如：element.style.fontSize , element.style.backgroundColor
    getComputedStyle全局方法用来获取计算后的样式，第一个参数是元素节点，第二个参数是类型，如:hover,:active等伪类，默认情况下传 null ,某些IE版本使用currentStyle属性来获取 box.currentStyle。语法：window.getComputedStyle(元素，类型)
    className属性用来获取和设置元素的样式名称。语法：element.className
    自定义的 addClass() | hasClass() | removeClass() 方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    //元素是否含有某样式
        function hasClass(element,className){
        	return !!element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'));
        }
        //向元素添加新样式
        function addClass(element,className){
        	 if(hasClass(element,className) == false){
        	  	element.className += ' '+className;
        	  }
         }
        //移除元素的指定样式
        function removeClass(element,className){
        	var currentClass = element.className;
        	 if(hasClass(element,className)){
        	     currentClass = currentClass.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),' ');
                    //去除空格
        	    currentClass = currentClass.replace(/(^\s*)|(\s*$)/g,'');
        	    element.className = currentClass;
        	}
        }

  9. 常用到的简洁快速的document属性和方法

    document.title 用来获取文档标题
    document.domain 用来获取当前域名
    document.URL 用来获取当前url路径
    document.forms 获取表单集合
    document.images 获取图片集合
    document.body 获取body元素节点
    document.compatMode 识别文档模式

  10. 动态脚本: 在页面加载时不存在，但将来中的某一时刻通过修改DOM动态添加的脚本。方法：插入外部文件和直接插入js代码
    动态样式: 在页面加载时不存在的样式，在页面加载完成后动态加载到页面中。

  11. 操作表格 有一堆方法可以直接操作表格
  12. NodeList 每当文档结构发生变化时，都会得到更新。
文章目录
  1. 1. DOM