JS(Dom操作)

一、获取html对象

1.1:获取的元素包括他里面的所有属性

1、通过id获取html元素：var Id=document.getElementById("div1");
2、通过类名获取html元素var ClassName=document.getElementsByClassName("Ul");
3、通过标签名获取html元素var tag=document.getElementsByTagName("li");
4、通过name获取（不是每个标签都有name）var name=document.getElementsByName("name");

获取样子：

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

二、dom的属性

2.1节点：

文档中所有节点之间都存在着这样或那样的关系。节点间的各种关系可以用传统的家族关系来描述，相对于把文档树比喻成家谱。

2.2直接子元素节点

var Id=document.getElementById("div1");
	//获取Id的子节点集合带有文本节点的
	console.log(Id.childNodes);//直接子元素包括文本节点
	console.log(Id.children);//直接是子元素没有文本节点

2.3文档父节点:parentNode 文档树中的父节点

• parentNode 属性可返回某节点的父节点。
• 如果指定的节点没有父节点则返回 null 。

var Id=document.getElementById("div1");
	console.log(Id.parentNode);

2.4获取文档同一个节点:目前我试过不能获取的都是underfined
firstChild,lastChild,nextSibling,previousSibling都会将空格或者换行当做节点处理，但是有代替属性所以为了准确地找到相应的元素，会用

parentNode.firstElementChild,:获取的是父元素里面的第一个
parentNode.lastElementChild,获取的是父元素里面的最后一个
firstElementChild仅仅是在标准浏览器下有效，在非标准的浏览器下是没有定义的。在标准浏览器下仅仅返回第一个元素类型的子节点，如果没有返回null。

    if(ClassName1.firstElementChild == undefined)
    {//检测是否为标准浏览器
					return ClassName1.firstChild;
					alert();
					//不是标准浏览器，用firstChild返回第一个元素子节点，可能为null
				}else{
					return ClassName1.firstElementChild;//是标准浏览器，用firstElementChild返回第一个元素子节点，可能为null
				alert("kkk");
				}

tag1[3].previousElementSibling;同级它前面的·
tag1[3].nextElementSibling;同级它后面的

兼容的写法，这是JavaScript自带的属性。
但坏消息是IE6,7,8不兼容这些属性。IE9以上和火狐谷歌支持。

2.5

• nodeName:获取对象名字
• nodeValue：获取对象value值
• nodeType：返回数字根据数字判断是元素还是注释还是文本节点
• element.className 设置或返回元素的 class 属性。
• element.innerHTML 设置或返回元素的内容。
  更多的查看连接js更多的其他属性

三、方法

通常都会增删填换

element.appendChild(newListItem)	向元素里面添加新的子节点，最后面添加一个。
element.removeAttribute()	从元素中移除指定属性。
element.removeAttributeNode()	移除指定的属性节点，并返回被移除的节点。
element.removeChild()	从元素中移除子节点。
element.replaceChild()	替换元素中的子节点。
element.getAttribute()	返回元素节点的指定属性值。
element.setAttribute()	把指定属性设置或更改为指定值。
element.setAttributeNode()	设置或更改指定属性节点。

3.1 一般这些操作都是父子之间的操作

• appendChild()用于向childNodes列表的末尾添加一个节点。更新节点后，appendChild()返回新增的节点。
  下面的parentNode代表父节点，newNode代表新节点，returnedNode代表appendChild返回的节点

var returnedNode = parentNode.appendChild(newNode);
console.log( returnedNode == newNode )  //true
console.log( returnedNode == parent.lastChild)  //true

如果传入到appendChild()中的newNode原本已经是文档的一部分了，结果会将该节点从原来的位置转移到新位置。因为任何DOM节点不能同时出现在文档的多个位置上
例子如下：parentNode中的firstChild将会转移为lastChild

//假设parentNode有多个子节点
var returnedNode = parentNode.appendChild(parentNode.firstChild);
console.log( returnedNode == parentNode.lastChild )     //true
console.log( returnedNode == parentNode.firstChild )    //false

• insertBefore()接受2个参数，要插入的节点和作为参考的节点。。更新节点后，insertBefore()返回新插入的节点。两个参数都是必填，不过第二个参数可以为null。如果第二个参数是null，则insertBefore()实现的效果与appendChild()相同。

//插入后成为最后一个节点
var returnedNode = parentNode.insertBefore(newNode,null);
console.log( returnedNode ==  parentNode.lastChild );   //true

//插入后成为第一个节点
var returnedNode = parentNode.insertBefore(newNode,parentNode.firstChild);
console.log( returnedNode ==  parentNode.firstChild );  //true

//插入到最后一个节点前面
var returnedNode = parentNode.insertBefore(newNode,parentNode.lastChild);
console.log( returnedNode ==  parentNode.childNodes[parentNode.childNodes.length-2]);   //true
或者
console.log( returnedNode ==  parentNode.childNodes.item(parentNode.childNodes.length-2));  //true

• replaceChild()接受两个参数：要插入的节点和要替换的节点。并返回要替换的节点。
  //替换第一个节点var returnedNode = parentNode.replaceChild(newNode,parentNode.firstChild);
• removeChild()接受一个参数：要移除的节点。并返回移除的节点。
  //移除第一个节点var returnedNode = parentNode.removeChild(parentNode.firstChild);