<!—需要给div元素添加子元素
-->
<body>
<p>Hello
World</p>
<div
id="myDiv"></div>
</body>
//将<p>元素添加到div中。
document.getElementById(“myDiv”).innerHTML
=
“<p>我是新添加的子元素<p>”
上面的示例较简单,赋值给innerHTML的值可以是一个表单,可以是更长更复杂的html。
虽然innerHTML属性添加子元素很方便,但容易出错,很多教程
网上(如秒秒学)都不使用。更常用添加节点的方式,来添加子元素。这样更加准确和具体的描述了DOM的变化。如上述innerHTML的语句可以替换成:
var
myParaElement
=
document.createElement(“p”)
//创建p元素
var
myText
=
document.createTextNode(“我是文本节点!”)
//创建文本节点
myParaElement.appendChild(myText)
//将文本节点做为p元素的子节
document.getElementById(“myDiv”).appendChild(myParaElement)
//再将p元素做为子节点放在div元素下。
根据 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 属性来获取元素的内容。
1.首先创建html结构,如下图所示,一个input元素,一个按钮,一个空的ul列表。
2.然后添加按钮点击事件,如下图所示,在按钮点击事件中获得input元素。
3.通过value属性我们可以获得用户在input中输入的内容,如下图所示。
4.下面我们来动态创建一个li元素,如下图所示,运用document中的createElement方法即可。
5.创建好li元素以后,下面要做的就是给其设置innerHTML内容,如下图所示。
6.接下来就是获取ul元素了,如下图所示,仍然用getElementById方法。
7.最后通过调用appendChild方法将创建的li元素添加到ul列表中,如下图所示。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)