js HTML DOM

什么是DOM

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

通过HTML DOM，可访问js HTML文档的所有元素。HTML DOM模型被构造为对象的树。

js查找HTML元素的三种方法：

1）通过id找到HTML元素

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

2）通过标签名找到HTML元素

3）通过类型找到HTML元素

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

js改变HTML

1）改变HTML输出流

语法：document.write()

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());     // 直接向HTML输出流写当前日期时间
</script>

</body>
</html>

2）改变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属性

语法：document.getElementById(id).attribute=new value

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

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

</body>
</html>

js改变CSS

语法：document.getElementById(id).style.property=new style

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">我的标题 1</h1>
<button type="button"
onclick="document.getElementById(‘id1‘).style.color=‘red‘">
点我!</button>

</body>
</html>

 js处理DOM事件

对事件做出反应：

<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML=‘Ooops!‘">点击文本!</h1>

</body>
</html>

如需向HTML元素分配事件，可以使用事件属性：

<!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允许使用js向HTML元素分配事件：

<!DOCTYPE html>
<html>
<head>
</head>
<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事件会在用户进入或离开页面时被触发。可用来检测访问者浏览器类型和版本，处理cookie：

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

<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
    {
    alert("Cookies 可用")
    }
else
    {
    alert("Cookies 不可用")
    }
}
</script>

<p>弹窗-提示浏览器cookie是否可用。</p>
</body>
</html>

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时间可用于在用户的鼠标移至HTML元素上方或移出时触发函数：

<!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>

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

function mOut(obj)
{
obj.innerHTML="Mouse Over Me"
}
</script>

</body>
</html>

onmousedown和onmouseup以及onclick构成鼠标点击事件的所有部分。点击时触发onmousedown事件，释放时触发onmouseup事件，完成时触发onclick事件。

<!DOCTYPE html>
<html>
<head>
<script>
function lighton()
{
document.getElementById(‘myimage‘).src="bulbon.gif";
}
function lightoff()
{
document.getElementById(‘myimage‘).src="bulboff.gif";
}
</script>
</head>

<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" />
<p>点击不释放鼠标灯将一直亮着!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h1 onmouseover="style.color=‘red‘"
onmouseout="style.color=‘black‘">
将鼠标移至文部上</h1>

</body>
</html>

onfocus：

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

输入你的名字: <input type="text" onfocus="myFunction(this)">

<p>当输入框获取焦点时，修改背景色（background-color属性） 将被触发。</p>

</body>
</html>

js处理EventListener

1）addEventListener()方法

语法：element.addEventListener(event, function, useCapture);

event代表事件类型，function代表事件触发后调用的函数，useCaption是布尔值用于描述事件是冒泡还是捕获（可选的）。

你可以使用 removeEventListener() 方法来移除事件的监听。

<!DOCTYPE html>
<html>
<body>

<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>

<button id="myBtn">点我</button>

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

<script>
document.getElementById("myBtn").addEventListener("click", displayDate);

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

</body>
</html>

向原元素添加事件句柄：

<!DOCTYPE html>
<html>
<body>

<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>

<button id="myBtn">点我</button>

<script>
document.getElementById("myBtn").addEventListener("click", function(){
    alert("Hello World!");
});
</script>

</body>
</html>

上例也可食用函数名来引用外部函数：

<!DOCTYPE html>
<html>
<body>

<p>该实例使用 addEventListener() 方法在用户点击按钮时执行函数。</p>

<button id="myBtn">点我</button>

<script>
document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}
</script>

</body>
</html>

也可以向同一个元素添加多个事件句柄：

<!DOCTYPE html>
<html>
<body>

<p>该实例使用 addEventListener() 方法向同个按钮中添加两个点击事件。</p>

<button id="myBtn">点我</button>

<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);

function myFunction() {
    alert ("Hello World!")
}

function someOtherFunction() {
    alert ("函数已执行!")
}
</script>

</body>
</html>

也可以向同一个元素添加不同类型的事件：

<!DOCTYPE html>
<html>
<body>

<p>实例使用 addEventListener() 方法在同一个按钮中添加多个事件。</p>

<button id="myBtn">点我</button>

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

<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);

function myFunction() {
    document.getElementById("demo").innerHTML += "Moused over!<br>"
}

function mySecondFunction() {
    document.getElementById("demo").innerHTML += "Clicked!<br>"
}

function myThirdFunction() {
    document.getElementById("demo").innerHTML += "Moused out!<br>"
}
</script>

</body>
</html>

向window对象添加事件句柄：

<!DOCTYPE html>
<html>
<body>

<p>实例在window对象中使用 addEventListener() 方法。</p>

<p>尝试重置浏览器的窗口触发 "resize" 事件句柄。</p>

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

<script>
window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = Math.random();
});
</script>

</body>
</html>

事件传递有两种方式：冒泡或捕获。

事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。

在addEventListener()方法的第三个参数useCapture中，默认值为false代表冒泡传递，ture代表捕获传递。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
}
</style>
</head>
<body>

<p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p>

<div id="myDiv">
  <p id="myP">点击段落，我是冒泡。</p>
</div><br>

<div id="myDiv2">
  <p id="myP2">点击段落，我是捕获。 </p>
</div>

<script>
document.getElementById("myP").addEventListener("click", function() {
    alert("你点击了 P 元素!");
}, false);

document.getElementById("myDiv").addEventListener("click", function() {
    alert(" 你点击了 DIV 元素 !");
}, false);

document.getElementById("myP2").addEventListener("click", function() {
    alert("你点击了 P 元素!");
}, true);

document.getElementById("myDiv2").addEventListener("click", function() {
    alert("你点击了 DIV 元素 !");
}, true);
</script>

</body>
</html>

使用 removeEventListener() 方法来移除由 addEventListener() 方法添加的事件句柄:

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
    color: white;
}
</style>
</head>
<body>

<div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠标在桔红色的框内移动时会显示随机数。
  <p>点击按钮移除 DIV 的事件句柄。</p>
  <button onclick="removeHandler()" id="myBtn">点我</button>
</div>

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

<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

function myFunction() {
    document.getElementById("demo").innerHTML = Math.random();
}

function removeHandler() {
    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

</body>
</html>

在日常开发中，需要参考HTML DOM事件对象参考手册。

DOM 元素

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

<!DOCTYPE html>
<html>
<body>

<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");
element.appendChild(para);
</script>

</body>
</html>

删除已有的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>

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

</body>
</html>
时间： 2024-08-28 13:38:07

js HTML DOM的相关文章

【js常用DOM方法】

介绍几个js DOM的常用方法 获取元素节点 getElementById  getElementsByTagName  getElementsByClassName 先写一个简单的网页做测试: /* test.html*/<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body&g

JS and DOM 对象列表

JavaScript 对象(9个) JS Array JS Boolean JS Date JS Math JS Number JS String JS RegExp JS Functions JS Events Browser 对象(5个) Window Navigator Screen History Location HTML DOM 对象(4个) DOM Document DOM Element DOM Attribute DOM Event HTML 对象(...) <a> <

解析JS操作DOM

首先,如何操作DOM可大致分为以下几项: 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. document.body指向的是<body>元素;document.documentElement则指向<html>元素 //创建节点 var createNode = document.createElement("div"); var createTextNode = document.createT

Js操作-DOM操作

js学习--DOM操作详解大全 前奏(认识DOM) 一 . 节点属性 DOM 是树型结构,相应的,可以通过一些节点属性来遍历节点树: 方法 说明 nodeName 节点名称,相当于tagName.属性节点返回属性名,文本节点返回#text.nodeName,是只读的. nodeType 节点的类型,返回值:1,元素节点:2,属性节点:3,文本节点.nodeType 是只读的. nodeValue 节点的值,返回一个字符串,指示这个节点的值.元素节点返回 null,属性节点返回属性值,文本节点返回

Js操作DOM的方式及获取浏览器的宽高

我们在为页面加入一些动态效果或实现一些脚本功能时,需要对文档body中的元素进行操作,也就是,我们需要使用js或jQuery来对dom操作.下面呢,我说一下js是怎样对dom操作的. document.write(),这既可以向文档输出文本,也可以写入代码来添加元素. 获取需要操作的元素: 利用id获取就是:document.getElementById("name"); 利用class获取就是:document.getElementsByClassName("name&qu

js操作dom的一些基本用法

1.js添加dom元素 2.js移除dom元素 --------------

原生js操作dom的方法

今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. document.body指向的是<body>元素;document.documentElement则指向<html>元素 //创建节点    var createNode = document.createElement("div");    var createTextNod

JS 操作Dom节点之样式

为了提高用户体验,我们经常会动态修改Dom节点的样式,各种浏览器差异比较大,我们如何应对?不断尝试,不断总结~! 1. style.getComputedStyle.currentStyle 内嵌样式: <!--body --><div style="width: 30px;background-color: #ff6a00;">我就是傻里傻气的,完全素颜!</div> 1 //内联样式优先级最高,通过style获取的样式是最准确的 2 var el

原生js操作DOM基础-笔记

原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e0669e4a017e54a31fb39c&source=41#wechat_redirect 使用原生js为了提高效率,纯js操作dom一 查询DOMdocument.querySelector()参数是任意css选择器格式,只会返回第一个匹配到值document.querySelectorAll(

JS性能DOM优化

什么是DOM?  用于操作XML和HTML文档的应用程序 Dom节点  2. Dom树   3.Dom API DOM优化 浏览器会把js和dom独立实现,js每次操作dom,都会增加一次耗时,为了提高dom性能,就要尽可能减少js对dom的操作, 以下是两个测试 1 <script> 2 window.onload=function(){ 3 var div=document.getElementById('div'); 4 var str=''; 5 console.time('test1