DOM

Document

element

element.accessKey 设置或返回元素的快捷键。键盘敲击alt+r打开链接

<body onload="accesskey()">
  <a id="runoob" href="//www.runoob.com/">菜鸟教程</a>
</body>

function accesskey(){
  document.getElementById('runoob').accessKey="r"
}

element.appendChild() 向元素添加新的子节点，作为最后一个子节点。

<ul id="myList"></ul>

function myFunction()
{
 var node=document.createElement("li");
 var textnode=document.createTextNode("Water");
 node.appendChild(textnode);
 document.getElementById("myList").appendChild(node);
}

//结果
<ul><li>Water</li></ul>

element.attributes属性返回指定节点的属性集合

document.getElementsByTagName("BUTTON")[0].attributes;
document.getElementsByTagName("BUTTON")[0].attributes.length

element.childNodes 返回元素子节点的 NodeList。

document.body.childNodes;    //返回body的子节点

element.className 设置或返回元素的 class 属性。

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

element.clientHeight 返回元素的可见高度。
element.clientWidth 返回元素的可见宽度。
element.cloneNode() 克隆元素。
element.compareDocumentPosition() 比较两个元素的文档位置。返回值：

没有关系，两个节点不属于同一个文档
第一节点（P1）位于第二个节点后（P2）
第一节点（P1）定位在第二节点（P2）前
第一节点（P1）位于第二节点内（P2）
第二节点（P2）位于第一节点内（P1）
没有关系，或是两个节点是同一元素的两个属性。

var p1=document.getElementById("p1").lastChild;
var p2=document.getElementById("p2").lastChild;
var x=document.getElementById("demo");
x.innerHTML=p1.compareDocumentPosition(p2);

element.contentEditable 属性设置或返回元素内容是否可编辑

document.getElementById("myP").contentEditable = true;   //p元素可编辑

element.dir 设置或返回元素的文本方向。
element.firstChild 返回元素的首个子。

document.firstChild.nodeName;   //html

element.getAttribute() 返回元素节点的指定属性值。

获得链接的 target 属性：
document.getElementsByTagName("a")[0].getAttribute("target");

element.getAttributeNode() 返回指定的属性节点。

x.innerHTML=a.getAttributeNode("target").value;

element.getElementsByTagName() 返回拥有指定标签名的所有子元素的集合。
element.getFeature() 返回实现了指定特性的 API 的某个对象。
element.getUserData() 返回关联元素上键的对象。
element.hasAttribute() 如果元素拥有指定属性，则返回true，否则返回 false。
element.hasAttributes() 如果元素拥有属性，则返回 true，否则返回 false。

document.getElementsByTagName("BUTTON")[0].hasAttribute("onclick");

element.hasChildNodes() 如果元素拥有子节点，则返回 true，否则 false。
element.id 设置或返回元素的 id。
element.innerHTML 设置或返回元素的内容。
element.insertBefore() 在指定的已有的子节点之前插入新节点。

var newItem=document.createElement("li")     //创建节点
var textnode=document.createTextNode("Water")   //创文本
newItem.appendChild(textnode)     //li节点追加文本节点

var list=document.getElementById("myList")
list.insertBefore(newItem,list.childNodes[0]);

element.isContentEditable 查看是否可编辑。

  var x = document.getElementById("myP").isContentEditable;

element.isDefaultNamespace() 如果指定的 namespaceURI 是默认的，则返回 true，否则返回 false。

node.isDefaultNamespace(namespaceURI)

element.isEqualNode() 检查两个元素是否相等。

item1.isEqualNode(item2);    //true  or false

element.isSameNode() 检查两个元素是否是相同的节点。

item1.isSameNode(item2);   //true  or false

element.isSupported() 如果元素支持指定特性，则返回 true。

var item=document.getElementsByTagName("BUTTON")[0];
item.isSupported("Core","2.0");

element.lang 设置或返回元素的语言代码。
element.lastChild 返回元素的最后一个子元素。
element.namespaceURI 返回元素的 namespace URI。
element.nextSibling 返回位于相同节点树层级的下一个节点。

<ul id="myList"><li id="item1">Coffee</li><li id="item2">Tea</li></ul>
document.getElementById("item1").nextSibling.id;    //item2

element.nodeName 返回元素的名称。

document.body.nodeName;    //BODY

element.nodeType 返回元素的节点类型。
element.nodeValue 设置或返回元素值。
element.normalize() 合并元素中相邻的文本节点，并移除空的文本节点。
element.offsetHeight 返回元素的高度。
element.offsetWidth 返回元素的宽度。
element.offsetLeft 返回元素的水平偏移位置。
element.offsetParent 返回元素的偏移容器。
element.offsetTop 返回元素的垂直偏移位置。
element.ownerDocument 返回元素的根元素（文档对象）。
element.parentNode 返回元素的父节点。
element.previousSibling 返回位于相同节点树层级的前一个元素。
element.removeAttribute() 从元素中移除指定属性。
element.removeAttributeNode() 移除指定的属性节点，并返回被移除的节点。
element.removeChild() 从元素中移除子节点。

list.removeChild(list.childNodes[0]);

element.replaceChild() 替换元素中的子节点。

document.getElementById("myList").replaceChild(newnode,oldnode)

element.scrollHeight 返回元素的整体高度。
element.scrollLeft 返回元素左边缘与视图之间的距离。
element.scrollTop 返回元素上边缘与视图之间的距离。
element.scrollWidth 返回元素的整体宽度。
element.setAttribute() 把指定属性设置或更改为指定值。

document.getElementsByTagName("INPUT")[0].setAttribute("type","button");

element.setAttributeNode() 设置或更改指定属性节点。

var atr=document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementsByTagName("H1")[0].setAttributeNode(atr);

element.setUserData() 把对象关联到元素上的键。
element.style 设置或返回元素的 style 属性。
element.tabIndex 设置或返回元素的 tab 键控制次序。

 <p><a id="1" href="http://www.w3schools.com">1</a></p>
 <p><a id="2" href="http://www.w3schools.com">2</a></p>
 <p><a id="3" href="http://www.w3schools.com">3</a></p>

 document.getElementById('1').tabIndex="3"
 document.getElementById('2').tabIndex="2"
 document.getElementById('3').tabIndex="1"

element.tagName 返回元素的标签名。
element.textContent 设置或返回节点及其后代的文本内容。
element.title 设置或返回元素的 title 属性。
element.toString() 把元素转换为字符串。
nodelist.item() 返回 NodeList 中位于指定下标的节点。

var x=document.getElementById("demo");  
x.innerHTML=document.body.childNodes.item(0).nodeName;

nodelist.length 返回 NodeList 中的节点数。

Document

Document 对象方法

方法	描述
close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById()	返回对拥有指定 id 的第一个对象的引用。
getElementsByName()	返回带有指定名称的对象集合。
getElementsByTagName()	返回带有指定标签名的对象集合。
open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write()	向文档写 HTML 表达式或 JavaScript 代码。
writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

JS自用学习笔记（三）

DOM

Document

element

Document

Document 对象方法