javascript基础学习--HTML DOM

写在前面的话:由于学校没有开过javascript这门课,所以平时用javascript时都是用到什么就去搜什么样的代码,但是在工作中有时候搜来的代码总是有那么点小问题,而当自己想去修改时,却又无从下手,于是决定从基础开始学习javascript

1、查找HTML元素

我们使用js操作HTML元素,首先需要找到这个HTML元素,有三种方法可以实现:

  • 通过id找到HTML元素
  • 通过标签名找到HTML元素
  • 通过类名找到HTML元素

1.通过id查找HTML元素

在DOM中查找HTML元素的最简单的方法就是通过id找到元素

实例:

var x=document.getElementById("intro");

2.通过标签名查找HTML元素

实例:

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

首先通过id名找到main元素,然后通过标签名找到main内部的所有p元素,注意:javascript是大小写敏感的语言,方法名不要写错了;查找标签名的函数Elements是带有s的,表示找到所有的p标签元素。

3.通过类名查找HTML元素

实例:

暂略

2、HTML DOM允许javascript改变HTML元素的内容

1.改变HTML输出流

javascript能够创建动态的HTML内容:

在javascript中,document.write();可用于直接向HTML输出流写内容。

实例:

<!DOCTYPE html>
<html>
<body>
    <script>
        document.write(Date());
    </script>
</body>
</html>

提示:绝不要使用在文档加载之后使用document.write();这会覆盖该文档。

2.改变HTML内容

修改HTML内容的最简单的方法是使用innerHTML属性。

如需改变HTML元素的内容,请使用这个语法:

document.getElementById(id).innerHTML=new HTML;

实例:

<html>
    <body>
        <p id="p1" >hello world! </p>
        <script>
            document.getElementById("p1").innerHTML="new text";
        </script>
    </body>
</html>

3.改变HTML属性

如需改变HTML元素的属性,请使用这个语法:

document.getElementById(Id).attribute=new value;

实例:

<!DOCTYPE html>
<html>
<body>
    <img id="image" src="smile.gif" />
    <script>
        document.getElementById("iamge").src="landscape.jpg";
    </script>
</body>
</html>

3、HTML DOM允许javascript改变HTML元素的样式

1.改变HTML样式

如需改变HTML元素的样式,请使用这个语法:

document.getElementById(Id).style.property=new style;

实例1:

<p id="p2">Hello world!</p>
<script>
    document.getElementById("p2").style.color="blue";
</script>

实例2:

<h1 id="id1" >my heading 1</h1>
<button type="button" onclick="document.getElementById(‘id1‘).style.color=‘red‘">
点击这里
</button>

4、HTML DOM使javascript有能力对HTML事件做出反应

1.对事件做出反应

我们可以在事件发生时执行javascript,比如当用户在HTML元素上单击时。

如需在用户点击某个元素时执行javascript代码,请向一个HTML事件属性添加javascript代码:

onclick=javascript

HTML事件的例子:

  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图片已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当提交HTML表单时
  • 当用户触发按键时

例子1:

在本例中,当用户在<h1>元素上点击时,会改变其内容:

<h1 onclick="this.innerHTML=‘谢谢‘" >请点击这里</h1>

例子2:

<!DOCTYPE html>
<html>
<head>
    <script>
        function changeText(id) {
            id.innerHTML="谢谢";
        }
    </script>
</head>
<body>
<h1 occlick="changeText(this)"></h1>
</body>
</html>

2.HTML事件属性

如需向HTML标签分配事件,您可以使用事件属性。

实例:

向button元素分配onclick事件:

<button onclick="displayDate()">点击这里</button>

3.使用HTML DOM来分配事件

HTML DOM允许您通过使用javascript来向HTML元素分配事件:

实例:

向button元素分配onclick事件:

<script>
    document.getElementById("myBtn").occlick=function(){displayDate()};
</script>

4.常见事件

  • onload和onunload事件会在用户进入或离开页面时被触发,onload事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。onload和onunload事件可用于处理Cookie。
  • onchange事件常结合对输入字段的验证来使用。
  • onmouseover和onmouseout事件,onmouseover和onmouseout事件可用于在用户的鼠标移至HTML元素上方或移出HTML元素上方时触发函数。
  • onmousedown、onmouseup、onclick事件,这三个事件构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发onmousedown事件,当释放按钮时会触发onmouseup事件,最后,当完成点击时会触发onclick事件。

HTML DOM事件的完整列表,请参阅W3School的HTML DOM Event对象手册

5、javascript HTML DOM元素(节点)

1.创建新的HTML元素

如需向HTML元素添加新元素,你必须首先创建该元素,然后向一个已存在的元素追加该元素。

实例:

<div id="div1" >
    <p id="p1" >这是一个段落</p>
    <p id="p2" >这是另一个段落</p>
</div>

<script>
    var para=document.createElement("p");
    var node=document.createTextNode("这是新段落");
    para.appendChild(node);
 
    var element=document.getElementById("div1");
    element.appendChild(para);
</scirpt>

2.删除已有的HTML元素

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

实例:

<div id="div1" >
    <p id="p1" >这是一个段落</p>
    <p id="p2" >这是另一个段落</p>
</div>
<script>
    var parent=document.getElementById("div1");
    var child=document.geElementById("p1");
    parent.removeChild(child);
</script>

提示:如果能够在不引用父元素的情况下删除某个元素,那就太好了,可惜。。。

常用的方法是,找到你希望删除的子元素,然后使用其parentNode属性来找到父元素:

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

如果需要更多的javascript访问DOM的知识,请访问HTML DOM教程

javascript基础学习--HTML DOM,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。