js第三节DOM

JS HTML DOM
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
HTML DOM （文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
查找HTML元素
1.通过id找到Html元素
在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id

<!DOCTYPE html>
<html>
<body>

<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法！</p>

<script>
x=document.getElementById("intro");
document.write('<p>id="intro" 的段落中的文本是：' + x.innerHTML + '</p>');
</script>

</body>
</html>

通过标签名查找 HTML 元素

<!DOCTYPE html>
<html>
<body>

<p>Hello World!</p>

<div id="main">
<p>The DOM is very useful.</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>

<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
</script>

</body>
</html>

JavaScript HTML DOM - 改变 HTML
1.改变HTML输出流
JavaScript 能够创建动态的 HTML 内容：

<script>
document.write(date());
</script>

2.改变HTML内容
语法：document.GetElementsByID(id).innerHTML=new HTML
3.改变HTML属性
语法：document.getElementById(id).attribute=new value
改变CSS
语法：document.getElementById(id).style.property=new style

 <button type="button"
         onclick="document.getElementById('main').style.color='red'">点击这里</button>

显示隐藏文本

<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />

DOM事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。


<html>
<head>
    <script>
        function changetext(id) {
            id.innerHTML = "thanks!";
        }
    </script>
</head>
<body>
 
 <h1 onclick="changetext(this)">点击该文本</h1>
 
</body>

</html>

注：js放在head和body之间的区别
放在body中在页面加载时就会执行
head中得在被调用时才执行
HTML 事件属性
向HTML文件中添加事件

<html>

<body>
 
 <p>点击按钮执行displayDate()函数</p>
    <button onclick="displayDate()">点击这里</button>
    <script>
        function displayDate() {
            document.getElementById("demo").innerHTML = Date();
        }
    </script>
    <p id="demo"></p>
 
</body>

</html>

使用DOM分配事件
向 button 元素分配 onclick 事件：

   <p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>

    <button id="myBtn">点击这里</button>

    <script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
    </script>

    <p id="demo"></p>

在上面的例子中，名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。

<body onload="checkcookies()">
<script>
function checkcookies()
{ if(navigator.cookieenabled==true)
{
alert("cookie已启用")
}
else{
alert("cookie未启用")
}
</script>
</body>

onchange事件
改事件常结合对输入字段的验证来使用
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

<html>
<head>
    <script>
        function myFunction() {
            var x = document.getElementById("fname");
            x.value = x.value.toUpperCase();
        }
    </script>
</head>
    <body>
        请输入英文字母:<input type="text" id="fname" onchange="myFunction()" />
    </body>

</html>

onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

扫描二维码关注公众号，回复： 4513622 查看本文章

 <body>
       <div onmousemove="mover(this)"onmouseout="mout(this)"style="background-color:red;width:120px;height:20px;padding:40px;color:black;">
          回来

       </div>
            <script>
                function mover(obj){
        obj.innerHTML="滚蛋"}
        function mout(obj){
        obj.innerHTML="回来"}
            </script>
    </body>

onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

  <body>
       <div onmousedown="mdown(this)"onmouseup="mup(this)"style="background-color:red;width:120px;height:20px;padding:40px;color:black;">
          点击

       </div>
            <script>
                function mdown(obj) {
                    obj.style.backgroundColor = "green";
        obj.innerHTML="释放鼠标"}
                function mup(obj) {
                    obj.style.backgroundColor = "#1ec5e5";
        obj.innerHTML="按下鼠标"}
            </script>
    </body>

JavaScript HTML DOM 元素（节点）
创建新的 HTML 元素
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

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

<script>
var para=document.createElement("p");<!--创建新元素-->
var node=document.createTextNode("这是新段落。");<!--如需向 <p> 元素添加文本，您必须首先创建文本节点-->
para.appendChild(node);<!--向 <p> 元素追加这个文本节点-->

var element=document.getElementById("div1");
element.appendChild(para);
</script>

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

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

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

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

猜你喜欢