20170623

YetsingZ

于 2017-12-10 22:34:56 发布

阅读量217

点赞数

分类专栏： IFE学习笔记

本文链接：https://blog.csdn.net/Leaf_217/article/details/78768249

版权

IFE学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、HTML DOM

HTML DOM简介

DOM是W3C标准（是文档对象模型的英文缩写，Document Object Model for HTML）。通过DOM，可以访问所有的HTML元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。HTML DOM 独立于平台和编程语言，它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

DOM树

当网页被加载时，浏览器会创建页面的DOM，被构造为对象的树。如图
这里写图片描述
JavaScript 能够改变页面中的所有 HTML 元素；
JavaScript 能够改变页面中的所有 HTML 属性；
JavaScript 能够改变页面中的所有 CSS 样式；
JavaScript 能够对页面中的所有事件做出反应。

查找HTML元素

如果想要利用js来操作页面中的元素，首先要找到这个元素，方法有以下三种：

a. 通过 id 找到 HTML 元素：

var x=document.getElementById("id名");

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素；如果未找到该元素，则 x 将包含 null。

b. 通过标签名找到 HTML 元素：
举例：查找id="main" 的元素，然后查找 “main” 中的所有 <p> 元素：

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

c.通过类名找到 HTML 元素：
通过类名查找 HTML 元素在IE 5,6,7,8中无效，通过类名找到的是多个元素，所以往往需要通过[i]来选择你要的第i个元素。

改变 HTML 输出流

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容，例如：

<script>
    document.write(Date());
</script>

输出为Fri Jun 23 2017 22:19:55 GMT+0800 (CST)
注：不要使用在文档加载之后使用 document.write()，这会覆盖该文档。
目前还没用过这个用法。

改变 HTML 内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
改变 HTML 元素的内容的语法如下：

document.getElementById(id).innerHTML=newHTML

例如：

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

改变 HTML 属性

语法：

document.getElementById(id).attribute=newvalue

attribute指要修改的属性的属性名，newvalue指要修改的属性的属性值。
举例：

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

改变 HTML 样式

语法：

document.getElementById(id).style.property=newstyle

举例：

当用户点击按钮时，标题变成红色

<h1 id="id1">My Heading1</h1>
<button type="button"onclick="document.getElementById('id1').style.color='red'">
点击这里
</button>

对事件做出反应

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

onclick=JavaScript

举例：当用户点击“请点击该文本”时，它会变成“谢谢！”

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

使用 HTML DOM 来分配事件

举例：向 button 元素分配 onclick 事件，如果不用DOM，就是如对事件做出反应中所示的类似代码。

<script>
    document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

上面的例子，名为 displayDate 的函数被分配给 id="myButn" 的 HTML 元素。

onload 和 onunload 事件

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

<body onload="checkCookies()">
<script>
function checkCookies() {
    if (navigator.cookieEnabled==true) {
           alert("已启用cookie");
       }
    else {
        alert("未启用cookie");
       }
}
</script>
<p>提示框会告诉你，浏览器是否已启用cookie。</p>
</body>

onchange事件

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()">
</body>

当离开字段时，输入的字母就会自动变成大写。

onmouseover 和 onmouseout 事件

用于在用户的鼠标移至 HTML 元素上或移出元素时触发函数。

onmousedown、onmouseup 以及 onclick 事件

首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

创建新的节点（HTML元素）

要向HTML DOM添加新元素，必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。举例：
这段代码创建新的<p>元素：

var para=document.createElement("p");

如需向<p>元素添加文本，必须首先创建文本节点。这段代码创建了一个文本节点：

var node=document.createTextNode("这是新段落。");

然后必须向<p>元素追加这个文本节点：

para.appendChild(node);

最后必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素：

var element=document.getElementById("div1");

这段代码向这个已有的元素追加新元素：

element.appendChild(para);

删除已有节点

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

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

常用方法：找到希望删除的子元素，然后使用其 parentNode 属性来找到父元素

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

二、事件代理

JavaScript事件代理

事件代理也叫事件委托，当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。
事件委托的原理：
事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。