11、JavaScript 学习记录-基础

一、目的：了解基础知识，学习使用 js 操作浏览器元素

二、笑话

Java 和 JavaScript 的关系，就是雷锋和雷峰塔的关系。 11、JavaScript 学习记录-基础

三、基础

1、JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都使用 JavaScript。

2、HTML 定义了网页的内容；CSS 描述了网页的布局；JavaScript 网页的行为。

3、第一个示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Storm</title>
</head>
<body>
    <script>
        document.write("<h1>h1标签</h1>")
    </script>
    <button type="button" onclick="alert('像Storm一样飞')">点我</button>
</body>
</html>

页面效果如下：

11、JavaScript 学习记录-基础

四、JavaScript 用法

1、可以放到head中

2、放到body中

3、直接调用外部文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Storm</title>
    <script>
        document.write("<h2>h2标签</h2>")
    </script>
</head>
<body>
    <script>
        document.write("<h1>h1标签</h1>")
    </script>
    <button type="button" onclick="alert('像Storm一样飞')">点我</button>
    <script src="abc.js"></script>
</body>
</html>

五、JavaScript 输出

JavaScript 没有任何打印或者输出的函数。
1、JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：
（1）使用 window.alert() 弹出警告框。
（2）使用 document.write() 方法将内容写到 HTML 文档中。
（3）使用 innerHTML 写入到 HTML 元素。
（4）使用 console.log() 写入到浏览器的控制台。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Storm</title>
</head>
<body>
    <h1 id="h1">这是一个h1标签</h1>
    <script>
        window.alert("Hello JavaScript");
        document.write(Date());
        document.getElementById('h1').innerHTML = "修改后的内容";
        a = 1;
        c = a + 1;
        console.log(c);
    </script>
</body>
</html>

六、JS HTML DOM （自动化会用到）

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

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

11、JavaScript 学习记录-基础

2、通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
（1）JavaScript 能够改变页面中的所有 HTML 元素
（2）JavaScript 能够改变页面中的所有 HTML 属性
（3）JavaScript 能够改变页面中的所有 CSS 样式
（4）JavaScript 能够对页面中的所有事件做出反应

3、查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
（1）通过 id 找到 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。
本例查找 id="intro" 元素：
实例
var x=document.getElementById("intro");

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

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

本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 元素：
实例
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

（3）通过类名找到 HTML 元素

本例通过 getElementsByClassName 函数来查找 class="intro" 的元素：
实例
var x=document.getElementsByClassName("intro");

4、操作HTML元素

（1）改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=新的 HTML
本例改变了 元素的内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Storm</title>
</head>
<body>
    <p id="p1">Hello World!</p>
    <script>
    document.getElementById("p1").innerHTML="新文本!";
    </script>
</body>
</html>

实例讲解：
上面的 HTML 文档含有 id="header" 的 <h1> 元素
我们使用 HTML DOM 来获得 id="header" 的元素
JavaScript 更改此元素的内容 (innerHTML)

（2）改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=新属性值
本例改变了 <img> 元素的 src 属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Storm</title>
</head>
<body>
    <img src="https://www.baidu.com/img/bd_logo1.png" id="imgid">
    <script>
    document.getElementById("imgid").src="http://img3.imgtn.bdimg.com/it/u=1039330913,1100665204&fm=27&gp=0.jpg";
    </script>
</body>
</html>

5、DOM 元素

（1）删除已有的HTML元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Storm</title>
</head>
<body>
    <img src="https://www.baidu.com/img/bd_logo1.png" id="imgid" name="imgname">
    <script>
    document.getElementById("imgid").removeAttribute('name');
    </script>
</body>
</html>

查看该元素代码，发现没有name属性，证明删除成功。

11、JavaScript 学习记录-基础

（2）添加HTML元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Storm</title>
</head>
<body>
    <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>
</body>
</html>

这段代码创建新的 元素：
var para=document.createElement("p");
如需向 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：
var node=document.createTextNode("这是一个新段落。");
然后您必须向 元素追加这个文本节点：
para.appendChild(node);
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素：
var element=document.getElementById("div1");
以下代码在已存在的元素后添加新元素：
element.appendChild(para);

6、附录：属性和方法

属性 / 方法	描述
element.accessKey	设置或返回元素的快捷键。
element.appendChild()	向元素添加新的子节点，作为最后一个子节点。
element.attributes	返回元素属性的 NamedNodeMap。
element.childNodes	返回元素子节点的 NodeList。
element.className	设置或返回元素的 class 属性。
element.clientHeight	返回元素的可见高度。
element.clientWidth	返回元素的可见宽度。
element.cloneNode()	克隆元素。
element.compareDocumentPosition()	比较两个元素的文档位置。
element.contentEditable	设置或返回元素的文本方向。
element.dir	设置或返回元素的内容是否可编辑。
element.firstChild	返回元素的首个子。
element.getAttribute()	返回元素节点的指定属性值。
element.getAttributeNode()	返回指定的属性节点。
element.getElementsByTagName()	返回拥有指定标签名的所有子元素的集合。
element.getFeature()	返回实现了指定特性的 API 的某个对象。
element.getUserData()	返回关联元素上键的对象。
element.hasAttribute()	如果元素拥有指定属性，则返回true，否则返回 false。
element.hasAttributes()	如果元素拥有属性，则返回 true，否则返回 false。
element.hasChildNodes()	如果元素拥有子节点，则返回 true，否则 false。
element.id	设置或返回元素的 id。
element.innerHTML	设置或返回元素的内容。
element.insertBefore()	在指定的已有的子节点之前插入新节点。
element.isContentEditable	设置或返回元素的内容。
element.isDefaultNamespace()	如果指定的 namespaceURI 是默认的，则返回 true，否则返回 false。
element.isEqualNode()	检查两个元素是否相等。
element.isSameNode()	检查两个元素是否是相同的节点。
element.isSupported()	如果元素支持指定特性，则返回 true。
element.lang	设置或返回元素的语言代码。
element.lastChild	返回元素的最后一个子元素。
element.namespaceURI	返回元素的 namespace URI。
element.nextSibling	返回位于相同节点树层级的下一个节点。
element.nodeName	返回元素的名称。
element.nodeType	返回元素的节点类型。
element.nodeValue	设置或返回元素值。
element.normalize()	合并元素中相邻的文本节点，并移除空的文本节点。
element.offsetHeight	返回元素的高度。
element.offsetWidth	返回元素的宽度。
element.offsetLeft	返回元素的水平偏移位置。
element.offsetParent	返回元素的偏移容器。
element.offsetTop	返回元素的垂直偏移位置。
element.ownerDocument	返回元素的根元素（文档对象）。
element.parentNode	返回元素的父节点。
element.previousSibling	返回位于相同节点树层级的前一个元素。
element.removeAttribute()	从元素中移除指定属性。
element.removeAttributeNode()	移除指定的属性节点，并返回被移除的节点。
element.removeChild()	从元素中移除子节点。
element.replaceChild()	替换元素中的子节点。
element.scrollHeight	返回元素的整体高度。
element.scrollLeft	返回元素左边缘与视图之间的距离。
element.scrollTop	返回元素上边缘与视图之间的距离。
element.scrollWidth	返回元素的整体宽度。
element.setAttribute()	把指定属性设置或更改为指定值。
element.setAttributeNode()	设置或更改指定属性节点。
element.setIdAttribute()
element.setIdAttributeNode()
element.setUserData()	把对象关联到元素上的键。
element.style	设置或返回元素的 style 属性。
element.tabIndex	设置或返回元素的 tab 键控制次序。
element.tagName	返回元素的标签名。
element.textContent	设置或返回节点及其后代的文本内容。
element.title	设置或返回元素的 title 属性。
element.toString()	把元素转换为字符串。
nodelist.item()	返回 NodeList 中位于指定下标的节点。
nodelist.length	返回 NodeList 中的节点数。