window 主要用于操作浏览器对象；而 DOM 是文档对象模型，主要用于操作网页的 html 文档。其操作必须等待 html 文档加载完毕才可以获取
document
常用方法
-
getElementById()：通过 id 获取对应的标签。参数为 id 属性值。
-
getElementsByTagName()：返回指定标签构成的一个数组。
window.onload=function(){ var li = document.getElementsByTagName('li') // 返回所有的 li 标签 for(var x = 0;x<li.length;x++){ log(li[x].innerHTML) } }如果参数为 * ，表示要查询所有的标签。
-
getElementsByName()：通过 name 属性获取相应的标签，返回的是这些标签构成的数组。
-
createElement()：创建一个元素节点，参数为标签名；
-
createTextNode()：创建一个文本节点，参数为文本节点的文本内容。
window.onload=function(){ var div = document.getElementById('test') var p = document.createElement('p') var textNode = document.createTextNode('from js 创建的文本') div.appendChild(p) p.appendChild(textNode) }在 div 节点下添加 p 节点，同时为 p 节点下添加一个文本节点
-
documentElement 属性与 body 属性：前者返回 <html> 标签，后才返回 <body> 标签。
-
title：获取 title 标签的内容。
常用属性、方法
这些属性都是 getElementById() 返回的对象的属性，也即是下面的元素节点的属性
| 属性名 | 含义 | 类型 |
|---|---|---|
| innerHTML | 标签的文本内容 | 属性 |
| tagName，nodeName | 以大写形式返回标签名 | 属性 |
| className | class 的属性值 | 属性 |
| style | 以一个对象形式返回 style 的属性值 | 属性 |
| id | id 的属性值 | 属性 |
| title | title 的属性值 | 属性 |
| 属性名 | 对应属性的值 | 属性 |
| getAttribute() | 获取指定属性的值，可用于获取自定义的属性 | 方法 |
| setAttribute() | 为属性赋值，参数领奖为：属性名，属性值 | 方法 |
| removeAttribute() | 移除属性值 | 方法 |
-
除了上述的几个属性名外，还可以直接使用属性名获取相应的属性值。如使用 .href 就可以获取 href 的属性值。
-
获取自定义属性时，使用 getAttribute() 方法；获取系统属性时，直接使用属性名
-
这些属性可以被赋值，赋值之后界面显示的内容就会改变。
function log(arg){
console.log(arg)
}
window.onload=function(){
var e = document.getElementById('a')
log(e.innerHTML)
log(e.tagName)
log(e.id)
log(e.title)
log(e.className)
log(e.style)
e.innerHTML = 'from js 的文本信息' // 为属性重新赋值，界面显示的内容就会变化
log(e.getAttribute('bbb'))
}
node 相关
DOM 将节点分为三大类：元素节点，属性节点，文本节点。
-
元素节点：每一个HTML标签都是一个元素节点。 属性节点：元素节点的属性，如 id 、class 、name 等。 文本节点：元素节点或属性节点中的文本内容。
-
通过 getElementById 等方法获取的是元素节点。
//<div id = 'test'>这是内容<em>重要</em> 的内容</div> window.onload=function(){ var li = document.getElementById('test') for(var x = 0;x<li.childNodes.length;x++){ // 会循环 3 次 var child = li.childNodes[x]; log(child.nodeName+","+child.nodeType+","+child.nodeValue) } }注释的部分是该方法要操作的 html 内容。
通过 getElementById 获取的是 div 元素节点，其下有三个子节点：两个文本节点，一个元素节点（即 em 标签对应的元素节点）。
-
innerHTML 属性只能用于元素节点，文本节点无法使用
-
可以为 innerHTML 属性赋值 html 代码，而且浏览器会识别。但如果对 nodeValue 赋值 html 代码，浏览器会当纯文本展示
常用属性
-
nodeName：节点名。
-
如果节点为元素节点、属性节点，则返回的是标签名和属性名
-
如果节点为文本节点，返回的是固定字符串 #text
-
-
nodeType：节点类型。元素节点为 1，属性节点为 2，文本节点为 3。
-
nodeValue：节点的值
-
如果为元素节点，该值为 null
-
如果为属性节点，该值为对应属性的值
-
如果为文本节点，该值为文本内容。
-
-
childNodes：当前节点的所有子节点，以数组形式返回。
-
firstChild，lastChild：获取第一个和最后一个子节点。
-
parentNode，用于获取父节点
-
previousSibling，nextSibling：分别用于获取同级的前一个节点与后一个节点。
-
attributes：用于获取当前节点的所有属性节点，也可以获取到自定义的属性。
// <div id = 'test' bbb='aaaa'>这是内容<em>重要</em> 的内容</div> window.onload=function(){ var li = document.getElementById('test') for(var x = 0;x<li.attributes.length;x++){ // 会输出两次，包括自定义的 bbb 属性 var attr = li.attributes[x]; log(attr.nodeName+"="+attr.nodeValue) } }如果想直接获取某个属性的属性值，可以通过 ['属性名'] 形式获取指定的属性节点
log(li.attributes['bbb'].nodeValue)
常用方法
-
appendChild()：将参数添加到当前节点的子节点的末尾
-
insertBefore()：在指定的节点前添加新节点。第一个参数为要插入的节点，第二个节点为定位节点。
div.parentNode.insertBefore(p,div)该方法会在 div 节点前插入 p 节点。
-
replaceNode()：替换节点。第一个参数为替换的节点，第二个参数为被替换的节点。
-
cloneNode()：复制节点。参数为 true 表示将该节点及其子节点一起复制；参数为 false ，表示只复制当前节点，不复制其子节点。注意：无论为 true,false，属性会一起复制。
-
removeChild()：移除指定的节点。
-
scrollIntoView()：滚动窗口，使调用的节点可见。
node 与 document
document 本身也是一个 node 节点。它的 childNodes 第一个元素为 <html> 节点。
var c = document.childNodes[1].attributes;
for(var x = 0;x<c.length;x++){
log(c[x].nodeName+","+c[x].nodeValue)
}
网友评论