DOM

HTML DOM Document对象

DOM 是 Document Object Model（文档对象模型）的缩写。

1.document.body

返回文档的body元素

2.document.createAttribute()

创建一个属性节点

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

3.document.createElement()

创建元素节点

var btn=document.createElement("p");

4.document.createTextNode()

创建文本节点

var btn=document.createTextNode("Hello World");

5.document.getElementsByClassName()

返回文档中所有指定类名的元素集合，最为NodeList对象

var x = document.getElementsByClassName("example");

NodeList对象，可以通过节点列表中的节点索引号来访问列表中的节点（索引号从0开始）

可以使用NodeList对象的length属性来确定指定类名元素的个数。

获取包含example和color类名的所有元素

var x=document.getElementsByClassName("example color");

查看文档中有多少个样式 class=”example” 的元素

var x = document.getElementsByClassName("example").length;

6.document.getElementById()

返回对拥有指定id的第一个对象的引用

如果没有指定id的元素返回null，如果存在多个指定id元素则返回undefined

document.getElementById("demo");

7.document.getElementsByName()

返回带有指定名称的对象集合（指的是元素的name属性）

var x=document.getElementsByName("x");

8.document.getElementsByTagName()

返回带有指定标签名的对象集合

document.getElementsByTagName("p");

9.document.querySelector()

返回文档中匹配指定CSS选择器的一个元素。对于多个选择器，使用逗号隔开

//获取文档中id="demo"的第一个元素
document.querySelector("#demo");

//获取文档中第一个 <p> 元素
document.querySelector("p");

//获取文档中 class="example" 的第一个元素
document.querySelector(".example");

10.document.querySelectorAll()

document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表

11.document.write()

向文档写入HTML表达式或JavaScript代码

document.write("Hello World!");
document.write("<h1>Hello World!</h1><p>Have a nice day!</p>");//不会显示html标签

12.document.writeln()

等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

13.

HTML DOM 元素对象

1.element.appendChild()

为元素添加一个新的子元素

var node=document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);

2.element.childNodes

返回元素的子节点的数组

var c=document.body.childNodes;

3.element.firstChild

返回元素的第一个子节点

4.element.focus()

设置文档或元素获取焦点

document.getElementById("myAnchor").focus();

5.element.getAttribute(attributename)

返回指定元素的属性值

//获取链接的 target 属性值
document.getElementsByTagName("a")[0].getAttribute("target");

vare paras=document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++){
    alert(paras[i].getAttribute("title"));
}

6.element.getElementsByTagName()

返回指定标签名的所有子元素集合

var list=document.getElementsByTagName("ul")[0]

7.element.getElementsByClassName()

返回文档中所有指定类名的元素集合，作为 NodeList 对象。

var list = document.getElementsByClassName("example")[0];

8.element.innerHTML

设置或者返回元素的内容

document.getElementById('myAnchor').innerHTML="W3Cschool";

9.element.insertBefore()

将一个新元素插入到一个现有元素的前面

新元素：想要插入的元素（newElement）

目标元素：你想把这个新元素插入到哪个元素（targetElement）之前

父元素：目标元素的父元素（parentElement）

parentElement.insertBefore(newElement,targetElement)

var gallery=document.getElementById(“imagegallery”);

gallery.parentNode.insertBefore(placeholder,gallery);

10.element.lastChild

返回其最后一个子元素

document.getElementById("myList").lastChild;

11.element.nextSibling

返回某个元素之后紧跟的节点

document.getElementById("item1").nextSibling;

12.element.nodeName

返回元素的标记名（大写）

13.element.nodeType

元素节点 1

属性节点 2

文本节点 3

返回元素的节点类型

14.element.nodeValue

返回元素的节点值

document.getElementsByTagName("BUTTON")[0].childNodes[0].nodeValue;

15.element.parentNode

返回元素的父节点

document.getElementById("item1").parentNode;

16.element.previousSibling

返回某个元素紧接之前元素

17.element.querySelector()

返回匹配指定CSS选择器元素的第一个子元素

18.element.setAttribute()

设置或者改变指定属性并指定值

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

19.element.style

设置或返回元素的样式属性

20.element.attributes

返回一个元素的属性数组

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

21.element.cloneNode()

克隆某个元素

var node=document.getElementById("myList2").lastChild.cloneNode(true);
document.getElementById("myList1").appendChild(node);

cloneNode()方法可创建指定的节点的精确拷贝。

cloneNode()方法拷贝所有属性和值。

该方法将复制并返回调用它的节点的副本。如果传递给它的参数是true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。

22.element.getAttributeNode()

返回指定属性节点

var a=document.getElementsByTagName("a")[0];
var x=document.getElementById("demo");
x.innerHTML=a.getAttributeNode("target").value;

23.element.className

设置或返回元素的class属性

HTMLElementObject.className
HTMLElementObject.className=classname

24.element.setAttributeNode()

设置或者改变指定属性节点。

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

25.element.removeAttribute()

从元素中删除指定的属性

document.getElementsByTagName("H1")[0].removeAttribute("style");

26.element.removeAttributeNode()

删除指定属性节点并返回移除后的节点

var n=document.getElementsByTagName("INPUT")[0];
var a=n.getAttributeNode("type");
n.removeAttributeNode(a)

27.element.removeChild()

删除一个子元素

var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);

HTML DOM 属性对象

1.attr.name

返回属性名称

2.attr.value

设置或返回属性值

var h=document.getElementsByTagName("H1")[0];
h.getAttributeNode("style").value="color:green";

3.html-dom

document.getElementsByTagName(“form”)

相当于：document.froms

element.getAttribute(“src”)

相当于：element.src

placeholder.setAttribute(“src”,source)

相当于：placeholder.src=source