HTML DOM结构_IT百科

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

<code>

<html>

<head>

</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 事件：

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 属性来获取元素的内容。

首先在HTML元素中添加自定义属性，通过JavaScript进行访问，如果之前有尝试过，会发现，容易忽略标记验证，而HTML5可以为提供在有效的网页内创建并使用自己的元素属性的功能。

一，创建HTML5文件：

如果还没想好要使用哪一个，可以复制下面的代码：

在body中设置自定义元素，在head部分脚本区域利用JavaScript元素进行访问。

二，创建元素：

首先，添加一些简单的内容和自定义属性以及ID等元素，以便能够识别JavaScript示例。

正如所看到的那样，自定义属性的形式为：“data-*”，在“data-”部分设定名称或者选定的名称。在HTML5中使用自定义属性，这是唯一有效的方法。因此，如果想验证网页是否有效可才采用这种方法。

自定义属性允许以一种特殊的方式利用页面内的JavaScript代码来设置元素，例如，动画显示功能。如果没有标准的HTML元素，我们建议使用自定义属性。

三，添加测试按钮

在页面上利用自身的JavaScript元素即可执行事件，前提是将下面的代码添加到页面中：

四，获取属性：

在JavaScript中访问属性最常用的方法是使用“getAttributes”，这也是要做的第一步。在页面的head脚本区域添加以下函数：

这里，为示例增加了alert 值，当然也可以根据自身需求在脚本中添加。

五，获取数据：

可以使用元素数据集来替代DOM “getAttributes”，这或许更有效，尤其是在某种情况下，代码通过多种属性进行迭代，然而，浏览器对数据集的支持依然非常低，所以牢记这一点，此代码与//后面的方法一样可执行相同的进程。

从属性名称开始在数据集中删除“data-”，它仍然包含在HTML中。

请注意，如果你的自定义属性名称中有一个连字符，当通过数据访问时这会呈现出camel-case形式，即（“data-product-category” 变成“productCategory”)。

六，其他模块、函数

我们已经获取该属性，脚本仍然可以设置和删除。下面的代码演示了如何使用标准的JavaScript模块和数据集来设置属性。

jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM *** 作中会经常用到attr()，attr()有4个表达式。

1. attr( 属性名 )//获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined ）

2. attr( 属性名, 属性值 )//设置属性的值（为所有匹配的元素设置一个属性值。）

3. attr( 属性名 , 函数值 ) //设置属性的函数值（为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值。）

4. attr(properties) //给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }。(这是一种在所有匹配元素中批量设置很多属性的最佳方式。注意，如果你要设置对象的class属性，你必须使用'className' 作为属性名。或者你可以直接使用'class'或者'id'。)

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jquery中attr()方法</title>

<style>

p{color:red}

li{color:blue}

.lili{font-weight:boldcolor:red}

#lili{font-weight:boldcolor:red}

</style>

</head>

<body>

<p title="你最喜欢的水果是。">你最喜欢的水果是？</p>

<ul>

</ul>

...

</script>

</body>

<html>

1.attr(name)//获取属性的值

1.1使用attr(name)获取title值：

alert($("ul li:eq(1)").attr("title"))

</script>

结果：显示橘子汁

1.2使用attr(name)获取alt值：

alert($("ul li:eq(1)").attr("alt"))

</script>

结果：

显示123

2. attr(name,value) //设置属性的值

2.1使用attr(name,value)修改title值为：不吃橘子

$("ul li:eq(1)").attr("title","不吃橘子")

alert($("ul li:eq(1)").attr("title"))

</script>

结果：

显示不吃橘子

3. attr(name,fn) //设置属性的函数值

3.1把alt属性的值设置为title属性的值。

$("ul li:eq(1)").attr("title",function(){ return this.alt})

alert($("ul li:eq(1)").attr("title"))

</script>

结果：

显示123

4.attr(properties) //将一个“名/值”形式的对象设置为所有匹配元素的属性

4.1获取<ul>里第2个<li>设置title和alt属性。

$("ul li:eq(1)").attr({title:"不喝橘子汁",alt:"不是123"})

alert($("ul li:eq(1)").attr("title"))

alert($("ul li:eq(1)").attr("alt"))

</script>

结果：

显示2个，不喝橘子汁不是123

4.2获取<ul>里第2个<li>设置class。

$("ul li:eq(1)").attr({className:"lili"})

</script>

结果：

4.3获取<ul>里第2个<li>设置id。

$("ul li:eq(1)").attr({id:"lili"})

</script>

结果：

4.4获取<ul>里第2个<li>设置style。

$("ul li:eq(1)").attr({style:"color:red"})

</script>

结果：

在 li中添加alt是错误的，它只能用在img、area和input元素中（包括applet元素）。对于input元素，alt属性意在用来替换提交按钮的图片。在这里为了很详细说明attr()方法，没有合适的属性，所有用了alt进行举例，只供学习参考attr()方法用法。

在此说明下alt和tite的区别。

alt：这是用以描述图形的文字，当图片无法显示时，这些文字会替代图片而被显示。当鼠标移至图片上该些文字亦会显示。

title：是鼠标放上去之后，会显示出来的文字。

那么怎么删除属性呢?

jquery中删除属性的关键词是: removeAttr 注意A是大写的. 看看怎么用的:

同样是用法一中的html代码, 我想删掉li的title属性, 那么就这样:

$("ul li:eq(1)").removeAttr("title")

</script>

就这么简单， attr 其实就是原生js中 getAttribute 的简化实现, 而removeAttr 就是 removeAttribute 的简写了。

那么是否有跟attr()相似的属性呢？

jquery中val()与之类似，

$(this).val()获取某个元素节点的value值，相当于$(this).attr("value")

$(this).val(value)设置某个元素节点的value值，相当于$(this).attr("value",value)

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/11826830.html

HTML DOM结构

发表评论

评论列表（0条）