JS 事件的应用

最新推荐文章于 2024-07-02 12:21:43 发布

原创最新推荐文章于 2024-07-02 12:21:43 发布 · 219 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

15 篇文章

订阅专栏

加载页面时创建 DOM树

通过 id \class'\ 标签找到对应元素

var x=document.getElementById("intro"); var y=x.getElementsByTagName("p");

document.write() 可用于直接向 HTML 输出流写内容。

document.getElementById(id).attribute=new value

document.getElementById(id).innerHTML=new HTML

document.getElementById(id).style.property=new style


onmouseover="this.innerHTML=' 你好' " onmouseout=" this.innerHTML=' 把鼠标放上去' "

onmousedown onmouseup 等事件

onclick =" clickMeEvent(this)" 触发事件 clickMeEvent(obj)

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

<script>

    var para=document.createElement("p");

    var node=document.createTextNode("这是新段落。");

    para.appendChild(node);



    var element=document.getElementById("div1");

    element.appendChild(para);

</script>

如需删除 HTML 元素，您必须首先获得该元素的父元素

var child=document.getElementById("p1");

child.parentNode.removeChild(child);

当div 的id 含有特殊字符时，增加反斜杠表示【目标有一个反斜杠时，增加额外的三个反斜杠】

这里定位到p 元素，多加的 div span 里的 div 可有可无，因为只能访问定位的P 元素内的子元素。

与 (baseElement.querySelector("span").innerHTML) 等价

但是如果在这个P 元素内加入一个<h5>\<section>\<div> ，则会报错说 InnerHTML 无法使用，

后来发现，因为 p 是行内元素，所以在p 内queryselector 只对 p 里的行内元素有效。

测试：若baseElement 指向的是一个块状元素：测试表明无论内部是行内\ 块状元素，都可以访问