zoukankan      html  css  js  c++  java

  • HTML_DOM简介

    1. 什么是HTML DOM

    HTML DOM 是：
    HTML 的标准对象模型
    HTML 的标准编程接口
    W3C 标准
    HTML DOM 定义了所有HTML元素的对象和属性，以及访问它们的方法。
    换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

    2. HTML DOM节点

    在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

    2.1 DOM节点

    根据 W3C 的 HTML DOM 标准，HTML文档中的所有内容都是节点：

    • 整个文档是一个文档节点
    • 每个 HTML 元素是元素节点
    • HTML 元素内的文本是文本节点
    • 每个 HTML 属性是属性节点
    • 注释是注释节点

    3. HTML DOM 方法

    方法是我们可以在节点（HTML 元素）上执行的动作。

    3.1 编程接口

    编程接口可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。
    所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。
    方法是您能够执行的动作（比如添加或修改元素）。
    属性是您能够获取或设置的值（比如节点的名称或内容）。

    一些常用的对象方法

    方法 描述
    getElementById() 返回带有指定 ID 的元素。
    getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
    getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
    appendChild() 把新的子节点添加到指定节点,将新元素作为父元素的最后一个子元素进行添加。
    removeChild() 删除子节点。
    replaceChild() 替换子节点。
    insertBefore() 在指定的子节点前面插入新的子节点。
    createAttribute() 创建属性节点。
    createElement() 创建元素节点。
    createTextNode() 创建文本节点。
    getAttribute() 返回指定的属性值。
    setAttribute() 把指定属性设置或修改为指定的值。

    4. HTML DOM 属性

    属性是节点（HTML 元素）的值，您能够获取或设置。

    常用属性

    属性 描述 示例
    innerHTML 获取、替换元素内容 var txt=document.getElementById("intro").innerHTML;
    nodeName 规定节点的名称， var txt=document.getElementById("intro").nodeName;
    nodeValue 节点的值
    nodeType 节点的类型 元素 1 属性 2 文本 3 注释 8 文档 9

    5. HTML DOM 访问

    访问 HTML DOM - 查找 HTML 元素。

    访问 HTML 元素等同于访问节点
    您能够以不同的方式来访问 HTML 元素：

    • 通过使用 getElementById() 方法
    • 通过使用 getElementsByTagName() 方法
    • 通过使用 getElementsByClassName() 方法

    6. HTML DOM 修改

    修改 HTML = 改变元素、属性、样式和事件。

    创建 HTML 内容
    改变元素内容的最简答的方法是使用 innerHTML 属性。

    document.getElementById("p1").innerHTML="NEW TEXT!";

    改变HTML样式

    document.getElementById("p2").style.color="blue";

    创建新的 HTML元素

    <!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<!--创建新的html元素-->
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

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

</body>
</html>

    7.修改HTML 内容

    通过 HTML DOM，JavaScript 能够访问 HTML 文档中的每个元素。

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

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

    改变HTML样式
    通过html dom可以访问html对象的样式对象

    <script>
document.getElementById("p2").style.color="blue";
</script>

    使用事件
    html dom允许事件发生时执行代码
    当html元素“有事情发生”时，浏览器会生成事件：

    • 在元素上点击
    • 加载页面
    • 改变输入字段
    <input type="button" onclick="document.body.style.backgroundColor='lavender';" value="Change background color" />

    8.HTML DOM 元素

    添加、删除和替换HMTL元素

    创建新的html元素 - appendChild()
    如需向 HTML DOM添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。

    <div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
<!--创建一个新的p元素-->
var para=document.createElement("p"); 
<!--创建一个文本节点-->
var node=document.createTextNode("This is new.");
<!--向新的p元素中添加文本节点-->
para.appendChild(node);

var element=document.getElementById("div1");
<!--向div1元素追加新元素-->
element.appendChild(para);
</script>

    创建新的HTML元素 insertBefore()

    <div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
var child=document.getElementById("p1");
<!--将para插入到element元素中子元素child的前面-->
element.insertBefore(para,child);
</script>

    删除已有的HTML元素

    <div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

    替换HTML元素

    <div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

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

    9.HTML DOM 事件

    HTML DOM 允许 JavaScript 对 HTML 事件作出反应。

    对事件作出反应
    当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。
    HTML 事件的例子

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

    onload 和 onunload 事件
    当用户进入或离开页面时，会触发 onload 和 onunload 事件。
    onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。
    onload 和 onunload 事件可用于处理 cookies。

    <!DOCTYPE html>
<html>
<body onload="checkCookies()">

<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
	{
	alert("Cookies are enabled")
	}
else
	{
	alert("Cookies are not enabled")
	}
}
</script>

<p>弹出的提示框会告诉你浏览器是否已启用 cookie。</p>
</body>
</html>

    onchange 事件
    onchange 事件,对象域的内容发生改变时，常用于输入字段的验证

    <!DOCTYPE html>
<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()">
<p>当你离开输入框时，被触发的函数会把你输入的文本转换为大写字母。</p>
</body>
</html>

    onmouseover 和 onmouseout 事件
    onmouseover 和onmouseout事件可用于在鼠标指针移动到或离开元素时触发函数。

    <!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;200px;height:50px;padding-top:25px;text-align:center;">Mouse Over Me</div>

<script>
    function mOver(obj){
        obj.innerHTML="谢谢你"
    }
    
    function mOut(obj){
        obj.innerHTML="把鼠标指针移动到上面"
    }
</script>
</body>
</html>

    onmousedown、onmouseup 以及 onclick 事件
    onmousedown、onmouseup以及onclick事件是鼠标点击的全部过程。

    <!DOCTYPE html>
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:#D94A38;200px;height:50px;padding-top:25px;text-align:center;">点击这里</div>

<script>
    function mDown(obj){
        obj.style.backgroundColor="#1ec5e5";
        obj.innerHTML="松开鼠标"
    }
    
    function mUp(obj){
        obj.style.backgroundColor="#D94A38";
        obj.innerHTML="谢谢你"
    }
</script>
</body>
</html>

    10.HTML DOM 导航

    通过 HTML DOM，您能够使用节点关系在节点树中导航。

    HTML DOM 节点列表
    getElementsByTagName()方法返回节点列表。节点列表是一个节点数组。

    导航节点关系
    您能够使用三个节点属性：parentNode、firstChild 以及 lastChild ，在文档结构中进行导航。

    <html>
<body>
<p>Hello World!</p>
<div>
    <p>DOM 很有用!</p>
    <p>本例演示节点关系。</p>
</div>
</body>
</html>

    说明：

    首个 <p> 元素是 <body> 元素的首个子元素（firstChild）
    <div> 元素是 <body> 元素的最后一个子元素（lastChild）
    <body> 元素是首个 <p> 元素和 <div> 元素的父节点（parentNode）

    DOM 根节点
    这里有两个特殊的属性，可以访问全部文档：

    • document.documentElement - 全部文档,<html>元素内的所有
    • document.body - 文档的主体<body>元素内的所有

    childNodes 和nodeValue
    除了 innerHTML 属性，您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。
  • 相关阅读:
    oracle 之监听保护
    游戏升级之路
    《C++游戏开发》十六 游戏中的寻路算法(二)：迷宫&A*算法基础
    【JavaScript】实现复选框的全选、全部不选、反选
    虎嗅： 小米盒子vs乐视盒子
    即将成为传奇的微软
    DB-Oracle-DatabaseLinks：百科
    人物-思想家-默罕默德：百科
    ADO.NET：目录
    ADO.NET：百科
  • 原文地址：https://www.cnblogs.com/phtjzzj/p/7699480.html
Copyright © 2011-2022 走看看