html5中方法属性和事件是什么意思

html5中方法属性和事件是什么意思,第1张

事件是类似于:点击时触发、鼠标悬停触发、按键按下触发等能够触发方法的叫事件

方法就是事件发生后触发的逻辑。

html属性是:长度、宽度、样式、名称、id等这些定义html标签的叫做属性。

纯手写,望采纳

就是当用户 *** 作一个 HTML 元素(如按钮,文本框,选择框等)时,触发某种事件(如点击事件onclick、值变化事件onchange等),从而启动一段 JavaScript动作。

常用的事件有几类:

1. 窗口事件,如onload(当页面被载入时执行),onunload

2. 表单元素事件,如onchange, onsubmit,onreset,onselect,onblur,onfocus

3. 键盘事件,如onkeydown,onkeypress,onkeyup

4. 鼠标事件,如onclick, ondbclick,onmousedown, onmouseup,onmouseover,onmouseout,onmousemove

举个小例子:按钮被点击时触发d出一个告警框。

<input type="button" name="button1" value="点击试试" onclick="window.alert('让你点你就点啊?')"/>

这里的onclick="javascript函数()"就是HTML的事件属性。

有问题再问吧。

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


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7118577.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-01
下一篇 2023-04-01

发表评论

登录后才能评论

评论列表(0条)

保存