JavaScript的window对象对应着浏览器窗口本身，因此这个对象的属性和方法统称为BOM（浏览器对象模型），如window.open(),window.location等。

JavaScript的document对象是指文档对象模型，主要是处理网页内容。DOM（Document Object Model）即文档对象模型，是针对 HTML 和 XML 文档的 API 。字母D指document（文档），字母O指object（对象），字母指Model（模型）。DOM 描绘了一个层次化的节点树。节点表示一个连接点，文档是由节点构成的集合，DOM的节点主要分为三类：元素节点、文本节点（不是文本内容）、属性节点。

获取节点的名称和类型

• nodeName属性用来获取节点的名称，文本节点返回#text,元素节点返回标签名称（此时等价于tagName）。语法：目标节点.nodeName
• nodeType属性用来获取节点的类型，元素节点：1，属性节点：2，文本节点：3。语法：目标节点.nodeType
• nodeValue属性用来获取和设置节点的值。元素节点返回 null 。语法：目标节点.nodeValue

获取元素节点的方式

• document.getElementById 通过ID查找，返回唯一元素节点
• document.getElementsByName 通过表单元素name属性查找，返回元素节点数组
• document.getElementsByTagName 通过标签名称查找，返回元素节点数组

以下三种方法属于HTML5 DOM，并非所有浏览器支持（如某些低版本IE就不支持），属于高级方法

• document.getElementsByClassName 通过class属性的类名查找，返回元素节点数组
• document.querySelector 通过selector条件获取元素节点，只返回符合条件的第一个元素节点
• document.querySelectorAll 通过selector条件获取元素节点，返回所有符合条件的元素节点数组，多条件使用逗号分隔，表示要查找的元素必须符合所有逗号分隔的条件，如果一个元素只符合逗号分隔的条件中的一个，则不会被返回

小结： getElementById和querySelector只返回一个元素节点，而getElementsByName、getElementsByTagName、getElementsByClassName、querySelectorAll返回的是元素节点(类)数组

节点指针

• childNodes属性用来获取元素节点的子节点，返回节点数组。语法：父节点.childNodes;
• children属性可以用来获取忽略了空白节点的有效节点（在某些浏览器上，空白符或换行符也是一个文本节点）。语法：父节点.children;
• firstChild属性可以用来获取元素的第一个子节点，等价于 childNodes[0]。语法：父节点.firstChild;
• lastChild属性可以用来获取元素的最后一个子节点，等价于 childNodes[childNodes.length-1]。语法：父节点.lastChild;
• previousSibling属性用来获取目标节点的前一个兄弟节点。语法：目标节点.previousSibling;
• nextSibling属性用来获取目标节点的后一个兄弟节点。语法：目标节点.nextSibling;
• parentNode属性用来获取已知节点的父节点。语法：子节点.parentNode;
• ownerDocument属性用来当前节点所在文档的根节点，等价于document。语法：目标节点.ownerDocument;

节点的操作

• createElement方法用来创建元素节点。语法：document.createElement('元素标签名称');
• createAttribute方法用来创建属性节点。语法：document.createAttribute('属性名称');
• createTextNode方法用来创建文本节点。语法：document.createTextNode('文本内容');
• appendChild方法用来在目标节点的子节点的末尾添加一个子节点（可以是createElement创建的元素节点，也可以是createTextNode创建的文本节点）。语法：parent.appendChild(要插入的节点);
• insertBefore方法用来在目标元素的前面插入一个新元素节点，此时的指针在目标元素的父级上。语法：parent.insertBefore(newElement,targetElement);
• DOM中没有insertAfter这个方法，但是可以通过以下方法来模拟insertAfter;

/*
 * newElement : 要插入的新元素
 * targetElement : 目标元素     
 */
function insertAfter(newElement,targetElement){
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement){
        /*
         如果目标元素是parent的最后一个子元素，则把新元素追加到parent元素上，
         也就是在parent的子元素的末尾位置添加新元素 
        */
        parent.appendChild(newElement);
    }else{
        /*
          否则，就把新元素添加到目标元素和目标元素的下一个兄弟元素之间    
        */
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

• replaceChild方法用来替换一个元素节点，此时的指针在目标元素的父级上。语法：parent.replaceChild(replaceElement,targetElement);
• cloneChild方法用来克隆一个元素节点，传递一个布尔参数，参数为true时表示复制当前节点及其所有子节点，参数为false时表示支付至当前节点。语法：目标元素.cloneChild(true|false);
• removeChild方法用来删除一个指定节点。语法：removeChild(要删除的节点);
• getAttribute方法用来获取一个属性的值。语法：目标元素.getAttribute(元素属性名称);
• setAttribute方法用来设置一个属性的值，没有该属性则创建。语法：目标元素.setAttribute(元素属性名称,属性值);
• removeAttribute方法用来删除一个属性节点。语法：目标元素.removeAttribute(要删除的属性名称);

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() 方法

//元素是否含有某样式
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;
    }
}

OM操作位置和大小

• 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;

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

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

-- EOF --

本文标题：JavaScript学习笔记之Dom知识点总结

本文链接：https://smohan.net/blog/vhikuj

本站使用「 署名-非商业性使用 4.0 国际 (CC BY-NC 4.0) 」创作共享协议，转载或使用请署名并注明出处。 相关说明 »