JS 学习（三）DOM

HTML DOM（文档对象模型）

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

　　HTML DOM树:

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

查找HTML元素

通过 id 找到 HTML 元素，是最简单的方式

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

Hello World!
id="intro" 的段落中的文本是：Hello World!

通过标签名找到 HTML 元素

<div id="main">
    <p>The DOM is very useful.</p>
</div>

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

The DOM is very useful.
id 为 "main" 的 div 中的第一段文本是：The DOM is very useful.

通过类名找到 HTML 元素，在IE5、6、7、8中无效

JS HTML DOM改变HTML

改变HTML输出流

<script>
    document.write(Date());
</script>
Tue Aug 16 2016 13:45:37 GMT+0800 (CST)
注意： 绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

改变HTML内容
- 语法： document.getElementById(id).innerHTML=new HTML

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

改变HTML属性
- 语法： document.getElementById(id).attribute=new value

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

JS改变HTML元素的样式

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

<p id="p2">Hello World!</p>
<script>
    document.getElementById("p2").style.color="blue";
</script>

<h1 id="myH">Hello World!</h1>
<button type="button" onclick="document.getElementById(‘myH‘).style.color=‘red‘">点击这里！</button>

<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‘" />

JS HTML DOM 事件

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

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

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

HTML事件属性

<button onclick="displayDate()">点击这里</button>
<script>
function displayDate() {
    document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

使用HTML DOM来分配事件

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

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

onload 和 onunload 事件
- onload 和 onunload 事件会在用户进入或离开页面时被触发。
  onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
  onload 和 onunload 事件可用于处理 cookie。

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

onchange 事件

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

onmouseover 和 onmouseout 事件
- onmouseover 鼠标移至HTML元素上方
- onmouseout 鼠标移出元素时

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

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

<div onmousedown="mDown(this)" onmouseup="mUp(this)" 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>

onfocus 获得焦点

点击了哪个鼠标

<head>
<script type="text/javascript">
function whichButton(event) {
    var btnNum = event.button;
    if (btnNum == 2) {
        alert("您点击了鼠标右键！")
    }
    else if(btnNum == 0) {
        alert("您点击了鼠标左键！")
    }
    else if(btnNum == 1) {
        alert("您点击了鼠标中键！");
    }
    else {
        alert("您点击了" + btnNum+ "号键，我不能确定它的名称。");
    }
}
</script>
</head>

<body onmousedown = "whichButton(event)">
<p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p>
</body>

光标的坐标

<head>
<script type="text/javascript">
function show_coords(event) {
    x=event.clientX
    y=event.clientY
    alert("X 坐标: " + x + ", Y 坐标: " + y)
}
</script>
</head>

<body onmousedown="show_coords(event)">
</body>

相对于屏幕光标的位置

<script type="text/javascript">
function coordinates(event) {
    x=event.screenX
    y=event.screenY
    alert("X=" + x + " Y=" + y)
}

</script>
</head>
<body onmousedown="coordinates(event)">

</body>

被按的按键的unicode

<head>
<script type="text/javascript">
function whichButton(event) {
    alert(event.keyCode)
}
</script>
</head>

<body onkeyup="whichButton(event)">
<p>在键盘上按一个键。消息框会提示出该按键的 unicode。 </p>
</body>

JS HTML DOM 元素（节点）

向HTML DOM添加元素，必须先创建该元素，然后向一个已经存在的元素中追加该元素

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

<script>
    var para=document.createElement("p");
    var node=document.createTextNode("这是新段落。”);  // 向p元素中添加文本，必须首先创建文本节点
    para.appendChild(node);

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

DOM 的CURD

创建新的HTML元素

<p id="word">我是p标签</p>
<script>
    // 1.直接往body中动态的添加标签(可以是任意类型)
    document.write(‘helloWorld‘);
    document.write(‘<img src="image/img_01.jpg">‘);

    // 2. 创建一个新的标签,然后插入到body中任意的一个标签中 appendChild
    var div = document.createElement(‘div‘);
    div.style.background = ‘red‘;
    div.style.width = ‘500px‘;
    div.style.height = ‘300px‘;
    // 添加到父标签
    document.body.appendChild(div);

    // 往div中插入一张图片
    var img = document.createElement(‘img‘);
    img.src = ‘image/img_02.jpg‘;
    div.appendChild(img);

    //3. 拿到p标签
    var img1 = document.createElement(‘img‘);
    img1.src = ‘image/img_03.jpg‘;

    var p = document.getElementById(‘word‘);
    p.appendChild(img1);
</script>

删除HTML元素

删除有3种方式:
- 1.直接用body进行删除,但是只能作用于直接子标签
  - document.body.removeChild(p);
- 2.拿到当前标签的父标签,再来删除
  - p.parentNode.removeChild(p);
- 3.直接拿当前的标签,调用 remove()方法.
  - p.remove();

DOM 教程：http://www.w3school.com.cn/htmldom/index.asp

时间： 2024-11-05 10:07:08

JS 学习（三）DOM的相关文章

js学习12-《JS DOM 编程艺术》笔记

学习了下<JS DOM 编程艺术>,做个学习总结:1.字符串中放单引号双引号:建议:字符串中放单引号,则用双引号包含字符串 1 var s1="It's my doy"; 字符串中放双引号,则用单引号包含字符串 1 var s2='He said "hi!" '; 其他使用\进行转义 2.==和====== :严格比较.不仅比较值,还比较类型== :不严格比较,转换类型一致比较 3.JS语言里对象的三种类型3.1内建对象:javascript提供的对象

JS学习三（函数）

[函数的声明格式] 1.函数的声明格式: function 函数名(参数1,参数2,...){ 函数体代码 return 返回值: } 函数的调用: ① 直接调用:函数名(参数1的值,参数2的值,....); ② 时间调用方式:直接在html标签中,使用事件名="函数名()" <button ondblclick="saySth('哈哈哈','yellow')">点击按钮,打印内容</button> 2.函数的注意事项: ① 函数名必须符合小

JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode 父节点 childNodes 子节点 firstChild 父节点里的第一个子节点 lastChild 父节点里的最后一个子节点 nextSibling 与子节点并列的下一个兄弟节点 previousSibling 与子节点并列的上一个兄弟节点火狐与谷歌支持而ie8不支持的节点关系有: previous

前端学习(25)~js学习(三)：变量的数据类型

变量的数据类型为什么需要数据类型在计算机中,不同的数据所需占用的存储空间不同,为了充分利用存储空间,于是定义了不同的数据类型.而且,不同的数据类型,寓意也不同. JS 的变量数据类型,是在程序运行的过程中,根据等号右边的值来确定的.而且,变量的数据类型是可以变化的.比如说: var name = 'qianguyihao'; name = 123; // 强制将变量 name 修改为数字类型 JS中一共有六种数据类型基本数据类型(值类型):String 字符串.Number 数值.Boo

js学习总结----DOM中的节点和关系属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div1"> <h1>培训课程</h1> <ul> <li>html+css&

Ext JS学习第三天我们所熟悉的javascript（二）

•javascript之函数 •对于Ext开发者,我还是希望你能对javascript原生的东西非常了解.甚至熟练掌握运用.那么函数,无疑是非常重要的概念.首先在前面一讲,我们知道了函数也是一种数据类型,创建函数一共有三种方式.每种方式他们都会有区别,分别为: –function语句形式 –函数直接量形式 –构造函数形式 •函数中的arguments对象 –argument的作用一:接受函数的实际参数 –argument的作用二:用于做递归操作栗子代码 1 //Function 函数 2 //

JS地毯式学习三

1. 插件是一类特殊的程序 . 他可以扩展浏览器的功能 , 通过下载安装完成 . 比如 , 在线音乐.视频动画等等插件. // 检测非 IE 浏览器插件是否存在function hasPlugin(name) {var name = name.toLowerCase();for (var i = 0; i < navigator.plugins.length; i ++) {if (navigator.plugins[i].name.toLowerCase().indexOf(name) >

JS的三种使用方式/CSS的三种使用方式/JS中的DOM事件模型/JS中匿名函数的书写及调用/媒体查询@media的三种使用方式

一.JS的三种使用方式 1.html标签中内嵌JS(不提倡使用.) <button onclick="javascript:alert('你真点啊.')" > 有本事点我呀!!!!</button> 2.HTML页面中直接使用JS: <script type="text/javascript">

Ext JS学习第四天我们所熟悉的javascript（三）

此文用来记录学习笔记: •javascript之函数 •this关键字的使用 –this关键字总是指向调用者,谁调用函数,this就指向谁 •call.apply的使用 –call和apply主要应用与框架底层,用于绑定函数的执行环境/作用域 •块的概念 –和高级程序语言不同,js里没有块的概念,我们一般用小括号包裹块级作用域 •闭包:掌握闭包必须要深入清楚的概念 –执行环境 –作用域链 –垃圾回收机制附上栗子代码 1 // This 关键字在javascript里的使用 2 //this

轻松学习JavaScript十八：DOM编程学习之DOM简单介绍

一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,执行开发者加入,移除和改动页面的某一部分. HTML或XML页面的每一个部分都是一个节点的衍生物. 通过DOM.可訪问HTML文档的全部元素. 当网页被载入时.浏览器会创建页面的文档对象模型,DOM模型被构造为对象的树. DOM是W3C(万维网联盟)的标准.DOM定义了訪问HTML和XML文档的标准."W3C 文档对象模型(DOM)是