js_DOM

2021-02-28

1. DHTML

动态HTML
- HTML：网页 –标记为–> 元素
- CSS：设计元素的排版样式以及在窗口中的显示位置
- JS：实时改变样式

css-js：css先静态设定样式，再由js动态改变

DHTML最终实现：DOM

1.1. 标准

问题：DOM兼容性
解决：W3C

2. js语法

2.1. 插入


# 嵌入html
<script type="text/javascript">
...
</script>

# 存入独立文件，src指向

<script type="text/javascript" scr="file.js">
</script>

2.2. 语法


// 单行注释

<!- 单行 
在html中后面还要加上->

/*
跨行注释
*/

js中赋值之前无需对其做出声明，但作为良好习惯要声明

1
2
3

var a;
var b,c;
var b="a",c=33;

命名：不允许空格or除$外的标点

单（双）引号中的单（双）引号：转义

2.3. 数据类型

离散值

一个变量在任何时刻都只能有一个值

字面量
数值
布尔值

2.4. 数组

一组值

var tmp = Array();
var tmp2 = Array(length); // length = 数值

// 填充
tmp[0] = "";

var tmp3 = Array("1","2"); // 最佳方式，指明是数组
var tmp4 = ["1","2"];

填充

向数组中添加元素的操作

2.4.1. 关联数组

如果在填充数组时只给出元素的值，这个数组就是数值数组
更一般的情况：明确给出下标

1
2
3

var tmp = new Array();
usr["john"] = new Array(); 
usr["john"]["age"] = 18;

1.关键字所谓关键字就是已被:语言本身使用, 不能作其它用途使用的字。
2.操作符操作符是在表达式中用于连接不同对象的运算符,不同的操作符指定了不同的运算方式。可以把操作符理解为语言内置的,最基础的函数,不可代替的函数!
比如new就是操作符，Array就是关键字
15.4.1 The Array Constructor Called as a Function
When Array is called as a function rather than as a constructor, it creates and initialises a new Array object. Thus the function call Array(…) is equivalent to the object creation expression new Array(…) with the same arguments.

2.5. 操作

2.5.1. +

算术
拼接：alert("a"+" b")

+的运算规则是：如果把数字与字符串相加，结果将成为字符串

条件语句、比较操作符、逻辑操作符、循环语句同c语言

2.5.2. += vs =+

+=：同c语言
=+：加号看作正号

2.5.3. /

/：结果为整数or浮点数
Math.ceil：向上取整
Math.floor：向下取整
Math.round：四舍五入

2.6. 函数

随时可以调用的语句

function multiply(num1, num2) {
  var total = num1 * num2;
  return total;
}

函数命名：驼峰

从第二个单词起首字母大写：convertToCircle()

2.6.1. 作用域

在函数中使用var指定局部变量

2.7. 对象

一种数据集合

属性是隶属于某个特定对象的变量
方法是只有某个特定对象才能调用的函数

1 2	Object.method(); Object.property;

2.7.1. 实例

对象是统称，实例是个体

1	var Nancy = new Person;

2.7.2. 内建对象

1	var tmp = new Array()

Array对象是内建的

Array/Date/Math

2.7.3. 宿主对象(host object)

由浏览器提供的预定义的对象

Form\Image\Element

3. DOM

Document Object Model 文档对象模型

3.1. BOM

windows对象对应着浏览器窗口本身，这个对象的属性与方法统称BOM
windows.open

而DOM是对应于浏览器内部而言的

model:节点树

3.2. 节点

3.2.1. 元素节点

例如<body>

3.2.2. 文本节点

例如<p>节点中的文本

3.2.3. 属性节点

例如<p title="aaa">中的title="aaa"（title属性）

3.2.3.1. css层叠样式表

<style>内嵌or独立文件

selector{
  property:value;
}

/* 继承 */
/* css也将文档视为节点树 */
body{
  color: white;
}

/* body内的元素也会被作用 */

元素区分：classorid

区别：不同元素class可以一样但id不能一样

<p class="a"></p>
<h2 class="a"></h2>

<style>
.a{
  font-style:italic;
}

h2.a{
  font-style:italic;
}
</style>

id属性就像一个挂钩，一头连着文档中的元素，另一头连着css样式表中的某个样式

<ul id="a">
<li></li>
</ul>

<style>
#a{
  color: #ccc;
}

#a li{
  font-weight:bold;
}
</style>

3.2.4. 检索元素节点

getElementById()

document.getElementById(id)
- 返回对应对象

Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象

用例

1	alert(typeof document.getElementById("a"));

getElementByTagName()

document.getElementByTagName(Tag)
- 返回一个对象数组

用例

for (var i = 0; i < document.getElementsByTagName("li").length; i++) {
  alert(typeof document.getElementsByTagName("li")[i]);
}
// 注意length是属性不是方法

var shopping = document.getElementById("a");
var items = shopping.getElementsByTagName("*");
for (var i = 0; i < items.length; i++) {
  alert(typeof items[i]);
}
// length = 个数
// *通配符，统计一共有多少元素

3.2.5. 查询属性

查找属性节点的属性

getAttribute()

Object.getAttribute(attr)
- 注意不能用document对象

var params = document.getElementsByTagName("p");
for (var i = 0; i < params.length; i++) {
  alert(params[i].getAttribute("title"));
}

3.2.6. 设置属性

Object.setAttribute(attribute, value)

var params = document.getElementsByTagName("p");
for (var i = 0; i < params.length; i++) {
  var title_text = params[i].getAttribute("title");
  if (title_text) {
    params[i].setAttribute("title", "111");
    alert(params[i].getAttribute("title"));
  }
}

4. js图片库

设置一个占位符图片
利用js将占位符图片转换为想要显示的图片

function showPic(whichpic) {
  var source = whichpic.getAttribute("href"); // 链接图片而非显示
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src", source);
}

4.1. js函数的调用

引入html

1	<script type="text/javascript" src="scripts/showPic.js"></script>

事件处理函数

js函数的一种

event = javascript statement(s)

1	<a href="images/a.jpg" onclick="showPic(this); return false;" title="">a</a>

4.2. childNodes属性

返回全体子元素的数组

function countBodyChildren() {
  var body_element = document.getElementsByTagName("body")[0];
  alert(body_element.childNodes.length);
}
window.onload = countBodyChildren;
// 在加载页时调用countBodyChildren函数

注意这一返回的是所有类型的节点的统计（元素、属性、文本）

4.3. nodeType属性

节点类型	nodeType
元素	1
属性	2
文本	3

修改图片对应文本内容

1	<p id="description">choose a pic.</p>

function showPic(whichpic) {
  var source = whichpic.getAttribute("href"); // 链接图片而非显示
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src", source);

  var text = whichpic.getAttribute("title");
  var description = document.getElementById("description");
  description.firstChild.nodeValue = text; // 只有一个子节点
}

node.firstChild = node.childNodes[0]
node.lastChild = node.childNodes[node.childNodes.length-1]

5. Javascript 编程原则

预留退路：网页没有Javascript也能正常运行
分离JS：网页的结构和内容与JS的脚本动作分开
向后兼容：老版本浏览器不会因为JS死机

JS解释器：web浏览器

5.1. 预留退路

只在必要时才选择用弹出窗口

eg：

windows.open(url, name, features)
- features要少而精
  利用BOM方法：不依赖文档内容，对文档内容也无影响

1
2
3

function popUp(winURL) {
  window.open(winURL, "popUp", "width=320,height=480");
}

5.1.1. 伪协议(pseudo protocol)

真协议：标准化的通信协议
- http://
- ftp://
伪协议：非标准化
- javascript:：通过一个链接来调用js函数

1	<a href="javascript:popUp("http://www.example.com");">example</a>

不支持伪协议的浏览器会尝试打开但失败
支持但被禁用的会什么也不做

5.1.2. 内嵌事件处理函数

注意仍是js函数

1	<a href="#" onclick="popUp('http://example.com'); return false;">Example</a>

在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性指定的页.
Return False就相当于终止符，Return True就相当于执行符。
在js中return false的作用一般是用来取消默认动作的。比如你单击一个链接除了触发你的 onclick事件（如果你指定的话）以外还要触发一个默认事件就是执行页面的跳转（href跳转）。所以如果你想取消对象的默认动作就可以return false，也就是只会打开onclick链接的网址

用户禁用js同样会影响这个功能

ps:

HTML 4 增加了使事件在浏览器中触发动作的能力，比如当用户点击元素时启动 JavaScript

所以：

第一个伪协议是用的全局属性
第二个内嵌事件处理函数用的是全局事件函数

5.1.3. 如何预留退路

<a href="examples.com" onclick="popUp('examples.com'); return false;"></a>
<!-- 注意单引号 -->

<!--精简：利用DOM-->
<a href="examples.com" onclick="popUp(this.href); return false;"></a>

使其没有彻底失效

Javascript中this可以代表任何一种当前元素
this.getAttribute('href')

5.2. 分离Javascript

同css一样，用class的id引入挂钩
用BOM来实现 preload

1	<a href="examples.com" class="popup"></a>

window.onload = preparelinks;
function preparelinks() {
  if (!getElementById) return false;
  var links = document.getElementsByTagName("a");
  for (var i = 0; i < links.length; i++) {
    if (links[i].className == "popup") {
      links[i].onclick = function () {
        popUp(this.href);
        return false;
      };
    }
  }
}
function popUp(winURL) {
  window.open(winURL, "popUp", "width=320,height=480");
}

5.3. 向后兼容

对象检测：

1	if(!getElementById) return false;

6. Js美术馆

给每个<a>添加class很麻烦
给整个<ul>设置一个id要简单得多

6.1. 结构化程序设计原则

每个函数只应有一个入口和出口

更为实际的操作：出于可读性要求，同一个函数应该有多个出口，但前提是他们应该集中出现在这个函数的开头部分

6.2. 创建必要的变量

增加可读性

6.3. 绑定事件处理函数

每个事件处理函数只能绑定一条指令
另如：

1 2	window.onload = firstfunc(); window.onload = secondfunc();

只有最后一个会有用（显然）

解决方法：创建一个匿名函数来打包，再绑到onload上

windows.onload = function () {
  firstfunc();
  secondfunc();
};

更好的方法：

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != "function") {
    window.onload = func;
  } else {
    window.onload = function () {
      oldonload();
      func();
    };
  }
}

addLoadEvent(firstfunc);
addLoadEvent(secondfunc);

从效果上看相当于是一层一层包裹起来

function(){
  secondfunc();
  {
    firstfunc();
  }
}

用onclick取代onkeypress:

用TAB键移动并用回车选择的操作也算”click”

6.4. DOM和JS

DOM的方法并不专属于Javascript，支持DOM的任何一种程序语言都可以使用它们。它们的用途也并非仅限于处理网页，可以用来处理任何一种标记语言（eg xml）

Html-DOM：当使用js和DOM为(X)HTML文件编写时的专属属性，

例如

document.getElementByTagName('form');

// 简化为
document.forms;

注意这样只能处理web文档，而DOM core会更加通用

7. 动态创建HTML内容

绝大多数情况下，网页的结构由HTML文档负责，JS只用来改变HTML文档中某些细节而不改底层
但实际上也能改，例如动态创建HTML内容

1
2
3

<script>
    document.write("<p>example</p>");
</script>

但这有悖于分离JS的原则，不应当在html中用<script>

7.1. innerHTML

非标准DOM(w3c dom标准)
- innerHTML也只是在HTML文档中可用，在正宗的XHTML中并不支持
它（返回值）是一个字符串，用来设置或获取位于对象起始和结束标签内的HTML

window.onload = function () {
  var testdiv = document.getElementById("testdiv");
  alert(testdiv.innerHTML);
};

7.2. 用标准DOM替代innerHTML

setAttribute()改变的内容显然无法通过文本编辑器打开文档查看到，只有在用浏览器打开时才能看到效果。这是因为浏览器实际显示的是那颗DOM树。在浏览器看来，DOM节点树才是文档
因此想要添加新内容，就应该在DOM节点树上添加新节点

// 创建元素节点
var param = document.createElement("p"); // param是一个引用指针
// 创建文本节点
var txt = document.createTextNode("hello world");
param.appendChild(txt); // 连接尚未成为文档树的节点

var testdiv = document.getElementById("testdiv");
testdiv.appendChild(param); // 插入DOM

7.3. insertBefore()

属性节点和文本节点的子节点不允许是元素节点

parentElement.insertBefore(newElement, targetElement);


var gallery=document.getElementById("image");
gallery.parentNode.insertBefore(placeholder,gallery)

insertAfter()

function insertAfter(newElement, targetElement) {
  var parent = targetElement.parentNode;
  if (parent.lastChild == targetElement) {
    parent.appendChild(newElement);
  } else {
    parent.insertBefore(newElement, targetElement.nextSibling);
  }
}

newElement
- 将被插入的新元素
targetElement
- 新元素将插入到它后的目标元素
- 同时注意节点数同一层也是有first到last的前后顺序
- parent.appendChild(newElement);自然在targetElement后面

7.4. 总结

用createElement和createTextNode创造出来的孤儿节点，要用appendChild()和insertBefore挂上节点树

8. CSS-DOM

网页的组成

结构层
- 标记语言创建
表示层：如何显示有关内容
- CSS创建
行为层：内容该如何对事件做出反应

三者之间存在重合

比如DOM来改变网页结构
同样DOM和CSS通过style样式属性连接
- param.style.color='black';
换句话说：CSS与HTML在JS里都会映射为DOM

CSS1无法根据某个元素在节点树上的位置来为它声明一种样式，例如“把一下样式施加在所有h1元素的下一个兄弟节点上”
CSS2引入伪class属性来解决

8.1. 抽象化

不要硬编码值，而应当改为变量

9. Javascript实现动画效果

随着时间变化不断改变某个元素
Javascript脚本能按预定的时间间隔重复调用某个函数

9.1. setTimeout()

1	setTimeout("function", interval)

setTimeout函数能够让某个函数在经过一个预定时间后才执行
如果想要取消某个正在排队的函数，需要将这个setTimeout的返回值赋给一个变量
- variable=setTimeout("function", interval)
- 用clearTimeout来取消：clearTimeout(variable)

9.2. parseInt()

parseInt(string, radix)

parseInt()函数可解析一个字符串，并返回一个整数。
只有字符串中的第一个数字会被返回。("10.33"->10)
开头和结尾的空格是允许的。
如果字符串的第一个字符不能被转换为数字，那么parseInt()会返回NaN。

9.3. 实现

function postionMessage() {
  if (!document.getElementById) return false;
  if (!document.getElementById("message")) return false;
  var elem = document.getElementById("message");
  elem.style.position = "absolute";
  elem.style.left = "50px";
  elem.style.top = "100px";
  movement = setTimeout("moveMessage()", 5000); // 5000毫秒（5秒），注意这个变量未用var关键字，它是一个全局变量
  // moveElement("message", 200, 100, 10);
}

/* 
moveMessage只能完成从点到点的移动，移动的信息都硬编码在代码里
*/

function moveMessage() {
  if (!document.getElementById) return false;
  if (!document.getElementById("message")) return false;
  var elem = document.getElementById("message");
  if (!elem.style.left || !elem.style.right) return false; // 确保属性存在
  var xpos = parseInt(elem.style.left); // 将"50px"转化为数值50
  var ypos = parseInt(elem.style.right);
  if (xpos == 200 && ypos == 100) {
    // 移动到了目的地
    return true;
  }
  if (xpos < final_x) xpos++;
  if (xpos > final_x) xpos--;
  if (ypos < final_y) ypos++;
  if (ypos > final_y) ypos--;
  elem.style.left = xpos + "px";
  elem.style.right = ypos + "px";
  var repeat =
    "moveElement('" +
    elementID +
    "'," +
    final_x +
    "," +
    final_y +
    "," +
    interval +
    ")";
  // moveElement('elementID',final_x,final_y,interval)
  movement = setTimeout(repeat, interval);
}

/*
抽象化：
一个通用的，可沿任意方向移动多个页面元素的函数
*/

function moveElement(elementID, final_x, final_y, interval) {
  if (!document.getElementById) return false;
  if (!document.getElementById(elementID)) return false;
  var elem = document.getElementById(elementID);
  if (!elem.style.left || !elem.style.right) return false;
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.right);

  if (xpos == final_x && ypos == final_y) return true;
  if (xpos < 200) xpos++;
  if (xpos > 200) xpos--;
  if (ypos < 100) ypos++;
  if (ypos > 100) ypos--;
}

/*
网页加载时挂载
*/

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != "function") {
    window.onload = func;
  } else {
    window.onload = function () {
      oldonload();
      func();
    };
  }
}

addLoadEvent(postionMessage);

9.3.1. js感叹号

一个!

可将变量转换成boolean类型
null、undefined和空字符串取反都为false，其余都为true。
1
2
3
4
5
6
!null=true
!undefined=true
!''=true

!100=false
!'abc'=false

9.4. 改进

9.4.1. 加快移动速度

离得远就走得快
离得近就走得慢

if (xpos < final_x) {
  var dist = Math.ceil((xpos - final_x) / 10);
  xpos += dist;
}
if (xpos > final_x) {
  var dist = Math.ceil((final_x - xpos) / 10);
}