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教程