DOM(二)——动画,改变HTML,事件,节点,集合

HTML DOM

一、动画

1.创建动画容器

所有动画都应该与容器元素关联。

<div id ="container">
    <div id ="animate">我的动画在这里。</div>
</div>

2.为元素添加样式

应该通过 style = "position: relative" 创建容器元素。

应该通过 style = "position: absolute" 创建动画元素。

3.动画代码

JavaScript 动画是通过对元素样式进行渐进式变化编程完成的。

这种变化通过一个计数器来调用,当计数器间隔很小时,动画看上去就是连贯的

基础代码是:

var id = setInterval(frame, 5);
function frame() {
    if (/* 测试是否完成 */) {
        clearInterval(id);
    } else {
         /* 改变元素样式的代码 */
    }
} 

4.使用 JavaScript 创建动画
例:
DOM(二)——动画,改变HTML,事件,节点,集合

function myMove() {
    var elem =  document.getElementById("animate"); 
    var pos = 0;
    var id = setInterval(frame, 5);
     function frame() {
        if (pos ==  350) {
             clearInterval(id);
        } else {
             pos++; 
             elem.style.top = pos + 'px'; 
             elem.style.left = pos + 'px'; 
        }
     }
}

二、改变HTML

1.改变 HTML 元素的内容

(1)改变 HTML 输出流

JavaScript 能够创建动态 HTML 内容:

在 JavaScript 中,document.write() 可用于直接写入 HTML 输出流:

```javascript
document.write(Date());

:千万不要在文档加载后使用 document.write(),这样会覆盖文档

(2)改变 HTML 内容

修改 HTML 文档内容最简单的方法是,使用 innerHTML 属性。

document.getElementById(id).innerHTML = new text

(3)改变属性的值

如需修改 HTML 属性的值,使用如下语法:

document.getElementById(id).attribute = new value

如下例子修改了 元素的 src 属性的值:

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

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

2.改变HTML元素的样式(改变CSS)

(1)改变 HTML 样式

更改 HTML 元素的样式,使用如下语法:

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

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

(2)使用事件

HTML DOM 允许在事件发生时执行代码。

当“某些事情”在 HTML 元素上发生时,浏览器会生成事件:

  • 点击某个元素时
  • 页面加载时
  • 输入字段被更改时

如下为在用户点击按钮时,更改 id=“id1” 的 HTML 元素的样式:

<body>
<h1 id="id1">我的标题 1</h1>

<button type="button" onclick=
"document.getElementById('id1').style.color = 'red'">
点击我!
</button>
<body>

三、节点

1.创建新 HTML 元素(节点)

向 HTML DOM 添加新元素,必须首先创建这个元素(元素节点),然后将其追加到已有元素。

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

<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);

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

这个例子中的 appendChild() 方法,追加新元素作为父的最后一个子。

2.创建新 HTML 元素 - insertBefore()


3.删除已有 HTML 元素

删除某个 HTML 元素,您需要知晓该元素的父:(removeChild)方法

4.替换 HTML 元素

使用 replaceChild() 方法:

parent.replaceChild(para, child);

四、事件

1.对事件作出反应

JavaScript 能够在事件发生时执行,比如当用户点击某个 HTML 元素时。

为了在用户点击元素时执行代码,向 HTML 事件属性添加 JavaScript 代码:

οnclick=JavaScript

  • 当用户点击鼠标时
  • 当网页加载后
  • 当图像加载后
  • 当鼠标移至元素上时
  • 当输入字段被改变时
  • 当 HTML 表单被提交时
  • 当用户敲击按键时

2.使用 HTML DOM 分配事件

HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件:

为 button 元素指定 onclick 事件:

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

4.onload 和 onunload 事件

当用户进入后及离开页面时,会触发 onl oad 和 onunload 事件。

onload 事件可用于检测访问者的浏览器类型和浏览器版本,然后基于该信息加载网页的恰当版本。

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

<body onl oad="checkCookies()">

5.onchange 事件

onchange 事件经常与输入字段验证结合使用。

当用户改变输入字段内容时,会调用 upperCase() 函数。

<input type="text" id="fname" onchange="upperCase()">

6.onmouseover 和 onm ouseout 事件

onmouseover 和 onm ouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数

7.onmousedown, onm ouseup 以及 onclick 事件

onmousedown, onm ouseup 以及 onclick 事件构成了完整的鼠标点击事件。

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

五、事件监听程序

1.addEventListener() 方法

添加当用户点击按钮时触发的事件监听器

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

addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序

  • 可以在一个元素添加多个事件处理程序。
  • 能够向一个元素添加多个相同类型的事件处理程序,例如两个 “click” 事件。
  • 能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素,例如 window 对象。

使用 removeEventListener() 方法轻松地删除事件监听器

2.语法

element.addEventListener(event, function, useCapture);

(1)第一个参数是事件的类型(比如 “click” 或 “mousedown”)。

(2)第二个参数是当事件发生时我们需要调用的函数。

(3)第三个参数是布尔值,指定使用事件冒泡还是事件捕获。此参数是可选的。

注意 请勿对事件使用 “on” 前缀;要使用 “click” 代替 “onclick”。

3.向元素添加事件处理程序

(1)当用户点击某个元素时提示 “Hello World!”:

(2)也可以引用外部“命名”函数:

4.向相同元素添加多个事件处理程序

(1)addEventListener() 方法允许向相同元素添加多个事件,同时不覆盖已有事件:

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

(2)能够向相同元素添加不同类型的事件:

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

5.向 Window 对象添加事件处理程序

addEventListener() 允许您将事件监听器添加到任何 HTML DOM 对象上,比如 HTML 元素、HTML 对象、window 对象或其他支持事件的对象,比如 xmlHttpRequest 对象。

添加当用户调整窗口大小时触发的事件监听器:

window.addEventListener(“resize”, function(){
document.getElementById(“demo”).innerHTML = sometext; });

6.事件冒泡还是事件捕获?

  • (1)在冒泡中,最内侧元素的事件会首先被处理,然后是更外侧的

  • (2)在捕获中,最外侧元素的事件会首先被处理,然后是更内侧的

在 addEventListener() 方法中,能够通过使用“useCapture”参数来规定传播类型:

addEventListener(event, function, useCapture);

默认值是 false,将使用冒泡传播,如果该值设置为 true,则事件使用捕获传播。

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

7.removeEventListener() 方法

removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序

六、集合

1.HTMLCollection 对象

getElementsByTagName() 方法返回 HTMLCollection 对象。

var x = document.getElementsByTagName("p");

2.Collection 长度

  • length 属性定义了 HTMLCollection 中元素的数量:
实例
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length; 
  • 改变所有 <p> 元素的背景色:
var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.backgroundColor = "red";
}
上一篇:2021-03-25


下一篇:JavaScript基本的的语法规则