JS笔记-005-DOM(文档对象模型)

作者: ccccccal | 来源:发表于2018-03-22 17:12 被阅读12次

JS笔记-005-DOM(文档对象模型)
WebAPI（一）——DOM
JS操作流模板——DOM元素选取和创建
js初识
复习笔记之API(1) JS组成
Dom
DOM
第1章简介第3章基本概念
Javascript(6)
DOM

HTML DOM 树

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

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找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>

通过标签名，也是先通过ID拿到控件，再通过控件以及标签名字拿到控件（感觉多此一举）

<!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>

通过类名（通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。）

改变页面中的元素内容

直接使用innerHTML

var element=document.getElementById("header");
element.innerHTML="New Header";

改变 HTML 属性，attribute指的是对应的属性字段

使用document.getElementById(id).attribute=new value

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

改变HTML样式

使用document.getElementById(id).style.property=new style

<!DOCTYPE html>
<html>
<body>

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>

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

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

</body>
</html>

例子2，动态显示以及隐藏文字

<!DOCTYPE html>
<html>
<body>

<p id="p1">这是一段文本。</p>

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

</body>
</html>

DOM事件的响应

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

HTML 事件的例子：

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

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

调用封装方法，ID直接传this即可

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

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

</body>
</html>

事件属性作出相应,button

类似于xml写好onclick，java直接写事件

<!DOCTYPE html>
<html>
<body>

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

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

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

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

</body>
</html>

使用 HTML DOM 来分配事件，类似于使用button主动调用onclick事件

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

onload以及onunload事件

onload 和 onunload 事件会在用户进入或离开页面时被触发(类似于获得焦点失去焦点两种生命周期)。

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

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

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

<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
    {
    alert("已启用 cookie")
    }
else
    {
    alert("未启用 cookie")
    }
}
</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 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

<!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

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

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

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h1 onmouseover="style.color='red'" onmouseout="style.color='blue'">
请把鼠标移到这段文本上
</h1>

</body>
</html>

onmousedown、onmouseup 以及 onclick 事件

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

<!DOCTYPE html>
<html>
<body>

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

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

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

</body>
</html>

添加新的HTML元素

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

<!DOCTYPE html>
<html>
<body>

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

<script>
//创建新的标签
var para=document.createElement("p");
//创建一个新的文本节点
var node=document.createTextNode("这是新段落。");
//想标签追加该节点
para.appendChild(node);

//找到一个新的元素
var element=document.getElementById("div1");
///追加新的标签
element.appendChild(para);
document.getElementById("div2").appendChild(para);
</script>

</body>
</html>

删除已有的HTML元素

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

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

或者直接获得子元素，通过parentNode获得父元素来删除

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

网友评论

weex-js-vue

本文标题：JS笔记-005-DOM(文档对象模型)

本文链接：https://www.haomeiwen.com/subject/bkbaqftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！