JavaScript中的DOM元素的相关知识点

---

前言

Javascript中的核心便是DOM元素的操作，BOM，事件event，下面我将我所整理的相关dom操作的笔记贴出来

一、DOM节点的种类

共分为元素节点，文本节点，属性节点

二、查找元素的方法

getElementById()	获取特定的ID元素的节点
getElementsByTagName()获取相同元素的节点列表
getElementsByName()	获取相同名称的节点列表
getAttribute()		获取特定元素节点属性的值
setAttribute()		设置特定元素节点属性的值
removeAttribute()	移除特定元素节点属性
innerHTML : 可以赋值，可以解析html标签，也可以打印文本内容方法

1.获取body元素

代码如下（示例）：

var body = document.getElementsByTagName('body')[0];

2.通过name属性获取元素

代码如下（示例）：

var box = document.getElementByName('test')[0];

---

三、层次节点属性

childNodes		获取当前元素节点的所有子节点
firstChild		获取当前元素节点的第一个子节点
lastChild		获取当前元素节点的最后一个子节点
ownerDocument	获取该节点的文档根节点
parentNode		获取当前节点的父节点
previousSibling	获取当前节点的前一个同级节点
nextSibling		获取当前节点的后一个同级节点
attributes		获取当前元素节点的所有属性节点集合

四、节点操作

write()			把任意字符串插入到文档中（覆盖了原先的DOM节点）
createElement()	创建一个元素节点
appendChild()	将新节点追加到子节点列表的末尾
createTextNode()创建一个文件节点
insertBefore()	将新节点插入在前面
repalceChild()	将新节点替换旧节点
cloneNode()		复制节点
removeChild()	移除节点	

五、当获取到的元素是空白节点时，需要先删除空白节点再去获取相应的节点

代码如下（示例）：

function removeWhiteNode(node) {
    for (var i = 0; i < node.childNodes.length; i++) {
    if (node.childNodes[i].nodeType === 3 &&      /^\s+$/.test(node.childNodes[i].nodeValue)) {
          node.childNodes[i].parentNode.removeChild(node.childNodes[i]);
        }
    }
    return node;
}

六、Document中有一些遗留的属性和对象合集

//属性
document.title	//获取和设置<title>标签的值
document.URL	//获取URL路径
document.domain	//获取域名，服务器端
document.referrer//获取上一个URL，服务器端
//对象集合
document.anchors	//获取文档中带有name属性的<a>元素集合
document.links	   //获取文档中带有href属性的<a>元素集合
document.applets   //获取文档中<applet>元素集合
document.forms     //获取文档中<form>元素集合
document.images   //获取文档中<img>元素集合
//element类型
元素名				类型
HTML				HTMLHtmlElement
DIV					HTMLDivElement
BODY				HTMLBodyElement
P					HTMLParamElement

七、DOM的一些拓展内容

拓展一：
浏览器的呈现模式分为怪异模式和标准模式****（也叫严格模式），怪异模式通常是为了维护一些比较老版本的浏览器而存在的技术，标准模式顾名思义则是按照W3C标准渲染页面操作的。
那么如何判断当前是哪个模式下的呢？
document对象添加一个名为compatMode属性，返回CSS1Compats 标准模式
返回BackCompat是怪异模式
拓展二：
滚动
DOM提供了一些滚动页面的方法
document.getElementById(‘box’),scrollIntoView();//设置指定可见
children属性
可以过滤掉一些空白节点，得到有效子节点数
contains()方法
判断一个节点是不是另一节点的后代，可以使用contains()方法
var box = document.getElementById(‘box’);
alert(box.contains(box.firstChild))