1、创建新节点
createDocumentFragment( ) //创建一个 DOM 片段
createElement( ) //创建一个具体的元素
createTextnode( ) //创建一个文本节点
2、添加、移除、替换、插入
appendChild( )
removeChild( )
replaceChild( )
insertBefore( ) //并没有 insertAfter()
3、查找
getElementsByTagName( ) //通过标签名称
getElementsByName( ) //通过元素的 Name 属性的值(IE 容错能力较强，会得到一个数组，其中包括 id 等于 name 值的)
getElementById( ) //通过元素 Id，唯一性
##1.访问/获取节点document.getElementById(id)//返回对拥有指定id的第一个对象进行访问
document.getElementsByName(name)//返回带有指定名称的节点集合 注意拼写:Elements
document.getElementsByTagName(tagname)//返回带有指定标签名的对象集合 注意拼写：Elements
document.getElementsByClassName(classname) //返回带有指定class名称的对象集合 注意拼写：Elements
##2.创建节点/属性
document.createElement(eName)//创建一个节点
document.createAttribute(attrName)//对某个节点创建属性
document.createTextNode(text) //创建文本节点
##3.添加节点
document.insertBefore(newNode,referenceNode) //在某个节点前插入节点
parentNode.appendChild(newNode)//给某个节点添加子节点
##4.复制节点
cloneNode(true | false)//复制某个节点 参数：是否复制原节点的所有属性
##5.删除节点
parentNode.removeChild(node)//删除某个节点的子节点 node是要删除的节点
注意：为了保证兼容性，要判断元素节点的节点类型(nodeType)，若nodeType==1，再执行删除 *** 作。通过这个方法，就可以在 IE和 Mozilla 完成正确的 *** 作。
nodeType属性可返回节点的类型.最重要的节点类型是：
元素类型节点类型
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9
##6.修改文本节点
方法作用
appendData(data)将data加到文本节点后面
deleteData(start,length)将从start处删除length个字符
insertData(start,data)在start处插入字符,start的开始值是0
replaceData(start,length,data)在start处用data替换length个字符
splitData(offset)在offset处分割文本节点
substringData(start,length)从start处提取length个字符
##7.属性 *** 作
getAttribute(name)//通过属性名称获取某个节点属性的值
setAttribute(name,value) //修改某个节点属性的值
removeAttribute(name) //删除某个属性
##8.查找节点
parentObj.firstChild//如果节点为已知节点的第一个子节点就可以使用这个方法。此方法可以递归进行使用 parentObj.firstChild.firstChild.....
parentObj.lastChild//获得一个节点的最后一个节点，与firstChild一样也可以进行递归使用 parentObj.lastChild.lastChild.....
parentObj.childNodes //获得节点的所有子节点，然后通过循环和索引找到目标节点
##9.获取相邻的节点
curtNode.previousSibling //获取已知节点的相邻的上一个节点
curtNode.nextSlbling // 获取已知节点的下一个节点
##10.获取父节点
childNode.parentNode//得到已知节点的父节点
##11.替换节点
replace(newNode,oldNode)
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。
<code>
<html>
<head>
<title>DOM 教程</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
</code>
上面的 HTML 中：
html节点没有父节点；它是根节点
head 和 <body>的父节点是 <html>节点
文本节点 "Hello world!" 的父节点是 p节点
html 节点拥有两个子节点：<head>和 <body>
head节点拥有一个子节点：<title>节点
title 节点也拥有一个子节点：文本节点 "DOM 教程"
head 元素是 <html>元素的首个子节点
body 元素是 <html>元素的最后一个子节点
p 元素是 <body>元素的最后一个子节点
方法是我们可以在节点（HTML 元素）上执行的动作。
一些常用的 HTML DOM 方法：
一些常用的 HTML DOM 属性：
属性是节点（HTML 元素）的值，您能够获取或设置。
获取或替换HTML元素的值
规定节点的名称
规定节点的值
返回节点的类型，nodeType是只读的
访问 HTML DOM - 查找 HTML 元素。
访问 HTML 元素等同于访问节点
返回带有指定ID的元素
<code>
document.getElementByld("intro")
</code>
返回带有指定标签名的所有元素
<code>
x = document.getElementByTagName("p")
document.write(x[0].innerHTML)
</code>
查找带有相同类名的所有HTML元素
<code>document.getElementsByClassName("intro")</code>
修改 HTML = 改变元素、属性、样式和事件。
改变元素内容的最简答的方法是使用 innerHTML 属性。
<code>
document.getElementById("p1").innerHTML="New text!"
</code>
访问 HTML 元素的样式对象
<code>
document.getElementById("p2").style.color="blue"
document.getElementById("p2").style.fontFamily="Arial"
document.getElementById("p2").style.fontSize="larger"
</code>
如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。
<code>
var para=document.createElement("p")
var node=document.createTextNode("This is new.")
para.appendChild(node)
var element=document.getElementById("div1")
element.appendChild(para)
</code>
当 HTML 元素”有事情发生“时，浏览器就会生成事件：
添加、删除和替换 HTML 元素。
如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。
<code>
var para=document.createElement("p") //创建文本节点
var node=document.createTextNode("This is new.") //向 p 元素追加文本节点
para.appendChild(node)//向已有元素追加这个新元素
</code>
appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加。
如果不希望如此，您可以使用 insertBefore() 方法。
如需删除 HTML 元素，您必须清楚该元素的父元素
<code>
var parent=document.getElementById("div1")
var child=document.getElementById("p1")
parent.removeChild(child)
</code>
当想要删除一个子元素但是不知道他的父元素的时候，可以用parentNode来查找他的父元素。
<code>
var child=document.getElementById("p1")
child.parentNode.removeChild(child)
</code>
<code>
var parent=document.getElementById("div1")
var child=document.getElementById("p1")
var para=document.createElement("p")
var node=document.createTextNode("This is new.")
para.appendChild(node)
parent.replaceChild(para,child)
</code>
HTML DOM 允许 JavaScript 对 HTML 事件作出反应
当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。
<code><h1 onclick="this.innerHTML='hello!'">请点击这段文本！</h1></code>
如需向 HTML 元素分配事件，可以使用事件属性
HTML DOM 允许使用 JavaScript 向 HTML 元素分配事件
举例：为 button 元素分配 onclick 事件：
<code><script>
document.getElementById("myBtn").onclick=function(){displayDate()}
</script></code>
当用户进入或离开页面时，会触发 onload 和 onunload 事件。
onchange 事件常用于输入字段的验证。
onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。
onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。
通过 HTML DOM，您能够使用节点关系在节点树中导航。
getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。
length 属性定义节点列表中节点的数量。
您能够使用三个节点属性：parentNode、firstChild 以及 lastChild ，在文档结构中进行导航
这里有两个特殊的属性，可以访问全部文档：
document.documentElement - 全部文档
document.body - 文档的主体
除了 innerHTML 属性，您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）