• 20141128--JavaScript HTML DOM

    通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

    HTML DOM

    当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

    image

    每个标签都可以称为节点，

    DOM,的主要作用是，使得HTML之间的元素关系更加直观。

    一、查找 HTML 元素

    通常，通过 JavaScript，您需要操作 HTML 元素。

    为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

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

    1. 通过 id 查找 HTML 元素

    在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

    查找 id="intro" 元素：

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

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

    查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：
    var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
     

    二、改变 HTML 内容

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

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

    document.getElementById(id).innerHTML=new HTML
    列：
     
    <p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

<p>上面的段落被一条 JavaScript 脚本修改了。</p>

    image

    三、改变 HTML 属性

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

    document.getElementById(id).attribute=new value
    实例

    本例改变了 <img> 元素的 src 属性：

    <img id="image" src="/i/eg_tulip.jpg" />

<script>
document.getElementById("image").src="/i/shanghai_lupu_bridge.jpg";
</script>

<p>原始图片是郁金香（eg_tulip.jpg），但是已被修改为卢浦大桥（shanghai_lupu_bridge.jpg）。</p>

    image

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

    DOM事件，

    对事件做出反应

    我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

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

    onclick=JavaScript

    HTML 事件的例子：

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

    1）onclick 事件

    <h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

    image

    image

    onclick也可以调用函数，function

    <script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>

<h1 onclick="changetext(this)">请点击该文本</h1>

    onclick,也可应用与button标签

    2）onload 和 onunload 事件

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

    onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

    onload 和 onunload 事件可用于处理 cookie。

    实例
    <script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
    {
    alert("已启用 cookie")
    }
else
    {
    alert("未启用 cookie")
    }
}
</script>

    image

    onunload:

    <script>
function checkCookies()
{
window.open("http://www.baidu.com")
}
</script>

<p>离开页面时会自动打开baidu页面</p>

    注意，onunload,有可能被一些浏览器当做广告自动拦截。

    3） onchange 事件

    onchange 事件常结合对输入字段的验证来使用。只有当光标离开时才会触发

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

    实例
    function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

请输入英文字符：<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>

    image

    image

    4）onmouseover 和 onmouseout 事件

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

    实例

    一个简单的 onmouseover-onmouseout 实例：

    <!--onmouseover="mOver(this)"中的this是传入当前元素-->
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#000;120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

<script>
function mOver(obj)
{
obj.innerHTML="谢谢";
}

function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>

    imageimage

    5）onmousedown、onmouseup 以及 onclick 事件

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

    实例
    <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;90px;height:20px;padding:40px;font-size:16px;">请点击这里</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}

function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>

    点击之前：

    image

    点击鼠标时，没有松开

    image

    松开鼠标后

    image

    6）onfocus 当输入字段活的焦点时，改变其背景色，

    <script>
function myFunction(x)
{
x.style.background="yellow";
x.value="";
}
</script>
</head>
<body>

请输入英文字符：<input type="text" onfocus="myFunction(this)" value="输入用户名">

<p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p>

    image

    image

    焦点 ： 鼠标变成 大写的 I

    五、JavaScript HTML DOM 元素（节点）

    可以添加或删除节点（HTML元素）。

    1）添加新的节点（HTML元素）

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

    <script>
/*注意 这段代码不可以写在<head></head> 内，如果在head内，网页加载时会先加载这个 script ，但是它无法获取到body和body内的标签等*/
/*createElement 创建标签。
  createTextNode  创建文本*/
var p = document.createElement("p");/*创建标签 p*/
var f = document.createElement("font");/*创建标签 font */
var t = document.createTextNode("Hello World!");/*创建文本 Hello World!*/

p.appendChild(f);/*将变量 f 追加到变量 p*/
f.appendChild(t);/*将变量 t 追加到变量 f*/
var bd = document.body;/*获取body标签*/
bd.appendChild(p);/* 将变量 p 追加到变量bd*/
</script>

    image

    2）删除已有的 HTML 元素

    <div>
    <p id="p1">测试一</p>
<p id="p2">测试二</p>
<p id="p3">测试三</p>
</div>
<!--以上事先创建好的文字-->
<script>/*方法1*/
var parent = document.getElementById("div1");/*先找到要删除标点的父级标签id*/
var child = document.getElementById("p1");/*找到需要删除的标签id*/
parent.removeChild(child);/*删除标签*/
</script>
<script>/*方法2*/
var child=document.getElementById("p3");/*找到要删除的节点标签id*/
child.parentNode.removeChild(child);/*Node是节点意思， 删除父节点中的 child，即子节点p3*/
</script>

    image
  • 相关阅读:
    实验一框架选择及其分析
    站立会议（一）
    关于有多少个1的计算
    寻找水王问题
    如何买到更便宜的书
    NABCD
    二维数组首尾相连求最大子矩阵
    环数组求最大子数组的和
    二维数组求最大矩阵
    关于铁道大学基础教学楼电梯调查
  • 原文地址：https://www.cnblogs.com/Tirisfal/p/4127826.html
Copyright © 2020-2023  润新知