常见概念
JavaScript的组成
JavaScript基础分为三个部分:
-
ECMAScript:JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
-
DOM:文档对象模型(Document object Model),操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
-
BOM:浏览器对象模型,操作浏览器部分功能的API。比如让浏览器自动滚动。
节点
节点(Node):构成 HTML 网页的最基本单元。网页中的每一个部分都可以称为是一个节点,比如:html标签、属性、文本、注释、整个文档等都是一个节点。
虽然都是节点,但是实际上他们的具体类型是不同的。常见节点分为四类:
-
文档节点(文档):整个 HTML 文档。整个 HTML 文档就是一个文档节点。
-
元素节点(标签):HTML标签。
-
属性节点(属性):元素的属性。
-
文本节点(文本):HTML标签中的文本内容(包括标签之间的空格、换行)。
节点的类型不同,属性和方法也都不尽相同。所有的节点都是Object。
什么是DOM
DOM:Document Object Model,文档对象模型。DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
在控制台以数组的方式打印 [document] 查看document对象属性和方法
DOM就是由节点组成的。
解析过程:
HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树,getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。
DOM树:(一切都是节点)
DOM的数据结构如下:
上图可知,在HTML当中,一切都是节点(非常重要)。
整个html文档就是一个文档节点。所有的节点都是Object。
DOM可以做什么
-
找对象(元素节点)
-
设置元素的属性值
-
设置元素的样式
-
动态创建和删除元素
-
事件的触发响应:事件源、事件、事件的驱动程序
元素节点的获取
DOM节点的获取方式其实就是获取事件源的方式。
想要操作元素节点,必须首先要找到该节点。有三种方式可以获取DOM节点:
var div1 = document.getElementById("box1");
//方式一:通过 id 获取 一个 元素节点(为什么是一个呢?因为 id 是唯一的)
var arr1 = document.getElementsByTagName("div");
//方式二:通过 标签名 获取 元素节点数组,所以有s
var arr2 = document.getElementsByClassName("hehe");
//方式三:通过 类名 获取 元素节点数组,所以有s
既然方式二、方式三获取的是标签数组,那么习惯性是先遍历之后再使用。
特殊情况:数组中的值只有1个。即便如此,这一个值也是包在数组里的。这个值的获取方式如下:
document.getElementsByTagName("div1")[0]; //取数组中的第一个元素
document.getElementsByClassName("hehe")[0]; //取数组中的第一个元素
H5新增获取元素方式
案例代码
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
// 1. getElementsByClassName 根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 2. querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
// 3. querySelectorAll()返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);
</script>
</body>
获取特殊元素(body,html)
DOM元素关系节点的获取
DOM的节点并不是孤立的,因此可以通过DOM节点之间的相对关系对它们进行访问。如下:
节点的访问关系,是以属性的方式存在的。
JS中的父子兄访问关系:
这里我们要重点知道parentNode和children这两个属性的用法。下面分别介绍。
获取父节点
调用者就是节点。一个节点只有一个父节点,调用方式就是
节点.parentNode/parentElement
获取所有的子节点
childNodes:标准属性。返回的是指定元素的子节点的集合(包括元素节点、所有属性、文本节点)。是W3C的亲儿子。
- 火狐 谷歌等高本版会把换行也看做是子节点。
用法:
子节点数组 = 父节点.childNodes; //获取所有节点。
获取所有子元素节点
children:非标准属性。返回的是指定元素的子元素节点的集合。【重要】
- 它只返回元素节点。
- 在IE6/7/8中包含注释节点(在IE678中,注释节点不要写在里面)。
虽然不是标准的DOM属性,但它和innerHTML方法一样,得到了几乎所有浏览器的支持。
用法:(用的最多)
子元素节点数组 = 父节点.children; //获取所有子元素节点。用的最多。
补充:获得任意一个子元素节点:
元素节点 = 父节点.children[index]; //得到任意子元素节点
获取兄弟节点
1、下一个节点 | 下一个元素节点:
Sibling的中文是兄弟。
(1)nextSibling:
-
火狐、谷歌、IE9+版本:都指的是下一个节点(包括标签、空文档和换行节点)。
-
IE678版本:指下一个元素节点(标签)。
(2)nextElementSibling:
- 火狐、谷歌、IE9+版本:都指的是下一个元素节点(标签)。
总结:为了获取下一个元素节点,我们可以这样做:在IE678中用nextSibling,在火狐谷歌IE9+以后用nextElementSibling,于是,综合这两个属性,可以这样写:
下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling
2、前一个节点 | 前一个元素节点:
previous的中文是:前一个。
(1)previousSibling:
-
火狐、谷歌、IE9+版本:都指的是前一个节点(包括标签、空文档和换行节点)。
-
IE678版本:指前一个元素节点(标签)。
(2)previousElementSibling:
- 火狐、谷歌、IE9+版本:都指的是前一个元素节点(标签)。
总结:为了获取前一个元素节点,我们可以这样做:在IE678中用previousSibling,在火狐谷歌IE9+以后用previousElementSibling,于是,综合这两个属性,可以这样写:
前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling
获取单个的子节点
1、第一个子节点 | 第一个子元素节点:
(1)firstChild:
-
火狐、谷歌、IE9+版本:都指的是第一个子节点(包括标签、空文档和换行节点)。
-
IE678版本:指第一个子元素节点(标签)。
(2)firstElementChild:
- 火狐、谷歌、IE9+版本:都指的是第一个子元素节点(标签)。
总结:为了获取第一个子元素节点,我们可以这样做:在IE678中用firstChild,在火狐谷歌IE9+以后用firstElementChild,于是,综合这两个属性,可以这样写:
第一个子元素节点 = 父节点.firstElementChild || 父节点.firstChild
2、最后一个子节点 | 最后一个子元素节点:
(1)lastChild:
-
火狐、谷歌、IE9+版本:都指的是最后一个子节点(包括标签、空文档和换行节点)。
-
IE678版本:指最后一个子元素节点(标签)。
(2)lastElementChild:
- 火狐、谷歌、IE9+版本:都指的是最后一个子元素节点(标签)。
总结:为了获取最后一个子元素节点,我们可以这样做:在IE678中用lastChild,在火狐谷歌IE9+以后用lastElementChild,于是,综合这两个属性,可以这样写:
最后一个子元素节点 = 父节点.lastElementChild || 父节点.lastChild
DOM节点的操作(重要)
上一段的内容:节点的访问关系都是属性。
本段的内容:节点的操作都是函数(方法)。
创建节点
格式如下:
新的标签(元素节点) = document.createElement("标签名");
比如,如果我们想创建一个li标签,或者是创建一个不存在的adbc标签,可以这样做:
<script type="text/javascript">
var a1 = document.createElement("li"); //创建一个li标签
var a2 = document.createElement("adbc"); //创建一个不存在的标签
console.log(a1);
console.log(a2);
console.log(typeof a1);
console.log(typeof a2);
</script>
打印结果:
插入节点
插入节点有两种方式,它们的含义是不同的。
方式1:
父节点.appendChild(新的子节点);
解释:父节点的最后插入一个新的子节点。
方式2:
父节点.insertBefore(新的子节点,指定的子节点)
解释:
- 在指定节点前插入一个新的节点。
- 如果参考节点为null,那么他将在父节点里面的最后插入一个子节点。
我们可以看到,li标签确实被插入到了box1标签的里面,和box2并列了。
方式2的举例:
我们可以看到,b1标签被插入到了box1标签的里面,和a1标签并列,在a1标签的前面。
特别强调:
关于方式1的appendChild方法,这里要强调一下。比如,现在有下面这样一个div结构:
<div class="box11">
<div class="box12">生命壹号</div>
</div>
<div class="box21">
<div class="box22">永不止步</div>
</div>
上方结构中,子盒子box12是在父亲box11里的,子盒子box22是在父亲box21里面的。现在,如果我调用方法box11.appendChild(box22)
,最后产生的结果是:box22会跑到box11中(也就是说,box22不在box21里面了)。这是一个很神奇的事情:
删除节点
格式如下:
父节点.removeChild(子节点);
解释:用父节点删除子节点。必须要指定是删除哪个子节点。
如果我想删除自己这个节点,可以这么做:
node1.parentNode.removeChild(node1);
复制节点(克隆节点)
格式如下:
要复制的节点.cloneNode(); //括号里不带参数和带参数false,效果是一样的。
要复制的节点.cloneNode(true);
括号里带不带参数,效果是不同的。解释如下:
-
不带参数/带参数false:只复制节点本身,不复制子节点。
-
带参数true:既复制节点本身,也复制其所有的子节点。
设置节点的属性
我们可以获取节点的属性值、设置节点的属性值、删除节点的属性。
我们就统一拿下面这个标签来举例:
<img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">
下面分别介绍。
1、获取节点的属性值
方式1:
元素节点.属性名;
元素节点[“属性名”];
举例:(获取节点的属性值)
<body>
<img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">
<script type="text/javascript">
var myNode = document.getElementsByTagName("img")[0];
console.log(myNode.src);
console.log(myNode.className); //只能获取元素原生自带的属性
console.log(myNode.title);
console.log("------------");
console.log(myNode["src"]);
console.log(myNode["className"]); //注意,是className,不是class
console.log(myNode["title"]);
</script>
</body>
上方代码中的img标签,有各种属性,我们可以逐一获取,打印结果如下:
方式2:
元素节点.getAttribute("属性名称");
举例:
console.log(myNode.getAttribute("src"));
console.log(myNode.getAttribute("class")); //注意是class,不是className
console.log(myNode.getAttribute("title"));
打印结果:
方式1和方式2的区别在于:前者是直接操作标签,后者是把标签作为DOM节点。推荐方式2。
2、设置节点的属性值
方式1举例:(设置节点的属性值)
myNode.src = "images/2.jpg" //修改src的属性值
myNode.className = "image2-box"; //修改class的name
方式2:
元素节点.setAttribute(属性名, 新的属性值);
方式2举例:(设置节点的属性值)
myNode.setAttribute("src","images/3.jpg");
myNode.setAttribute("class","image3-box");
myNode.setAttribute("id","你好");
总结:
获取节点的属性值和设置节点的属性值,都有两种方式,但这两种方式是有区别的。
-
方式一的
元素节点.属性
和元素节点[属性]
:元素中默认没有的属性,设置的属性值不会出现在标签上。 -
方式二的
get/set/removeAttribut
: 设置的属性值会出现在标签上。
这其实很好理解,方式一操作的是标签的属性,方式二操作的是标签本身。
另外,需要注意的是:这两种方式不能交换使用,get值和set值必须使用一种方法。
举例:
<body>
<div id="box" title="主体" class="asdfasdfadsfd">我爱你中国</div>
<script>
var div = document.getElementById("box");
//采用方式一进行set
div.aaaa = "1111";
console.log(div.aaaa); //打印结果:1111。可以打印出来,但是不会出现在标签上
//采用方式二进行set
div.setAttribute("bbbb","2222"); //bbbb作为新增的属性,会出现在标签上
console.log(div.getAttribute("aaaa")); //打印结果:null。因为方式一的set,无法采用方式二进行get。
console.log(div.bbbb); //打印结果:undefined。因为方式二的set,无法采用方式一进行get。
</script>
</body>
3、删除节点的属性
格式:
元素节点.removeAttribute(属性名);
举例:(删除节点的属性)
myNode.removeAttribute("class");
myNode.removeAttribute("id");
DOM对象的属性
DOM对象的属性和HTML的标签属性几乎是一致的。例如:src、title、className、href等。
innerHTML和innerText的区别
-
value:标签的value属性(通常用于表单元素里面的value值获取)
-
innerHTML:获取标签内部的html代码
-
innerText:获取标签内部的文本内容。(老版本的火狐用textContent)
-
outerHTML获取包含标签自身的html代码
获取内容举例:
修改内容举例:(innerHTML会修改标签本身,而innerText则不会)
nodeType属性
这里讲一下nodeType属性。
-
nodeType == 1 表示的是元素节点
-
nodeType == 2 表示是属性节点。
-
nodeType == 3 是文本节点。
nodeType、nodeName、nodeValue
获取这三个节点的方式如下:
var element = document.getElementById("box1"); //获取元素节点(标签)
var attribute = element.getAttributeNode("id"); //获取box1的属性节点
var txt = element.firstChild; //获取box1的文本节点
//获取nodeType
console.log(element.nodeType); //1
console.log(attribute.nodeType); //2
console.log(txt.nodeType); //3
console.log("--------------");
//获取nodeName
console.log(element.nodeName); //DIV
console.log(attribute.nodeName); //id
console.log(txt.nodeName); //#text
console.log("--------------");
//获取nodeValue
console.log(element.nodeValue); //null
console.log(attribute.nodeValue); //box1
console.log(txt.nodeValue); //生命壹号
打印结果如下:
随堂记录
<body>
<h1>helloworld1</h1>
<h1 class="clone">
<a href="www.baidu.com">helloworld2</a>
</h1>
<script>
//给所有h1标签添加属性
var h1s = document.getElementsByTagName("h1");
console.log(h1s); //这是一个伪数组(查看原型链是否具有数组的属性判断)
h1s.__proto__.__proto__ = Array.prototype; //修改原型的原型使其具有数组的方法,同时保留自身的方法
console.log(h1s);
h1s.forEach(function (item) {
item.style.background = "skyblue"
}) //循环遍历所有标签添加属性
var oH1 = document.querySelector("h1");//获取第一个h1节点
console.log(oH1);
var oH2 = document.querySelectorAll("h1");//获取所有h1节点
console.log(oH2);
//属性中具有forEach属性可以直接遍历每个元素节点添加属性
oH2.forEach(function(item){
item.style.color = "green";
})
oH1.style.color = "red";
</script>
</body>
DOM样式修改
在DOM当中,如果想设置样式,有两种形式:
-
className(针对内嵌样式)
-
style(针对行内样式)
通过style属性修改样式
需要注意的是:style是一个对象,只能获取行内样式,不能获取内嵌的样式和外链的样式。例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border: 6px solid red;
}
</style>
</head>
<body>
<div class="box1" style="width: 200px;height: 100px;background-color: pink;"></div>
<script>
var box1 = document.getElementsByTagName("div")[0];
console.log(box1.style.backgroundColor);
console.log(box1.style.border); //没有打印结果,因为这个属性不是行内样式
console.log(typeof box1.style); //因为是对象,所以打印结果是Object
console.log(box1.style); //打印结果是对象
</script>
</body>
</html>
打印结果:
上图显示,因为border属性不是行内样式,所以无法通过style对象获取。
通过 js 读取元素的样式
语法:(方式一)
元素.style.样式名
备注:我们通过style属性读取的样式都是行内样式。
语法:(方式二)
元素.style["属性"]; //格式
box.style["width"]; //举例
方式二最大的优点是:可以给属性传递参数。
通过 js 设置元素的样式
语法:
元素.style.样式名 = 样式值;
举例:
box1.style.width = "300px";
box1.style.backgroundColor = "red"; // 驼峰命名法
备注:我们通过style属性设置的样式都是行内样式,而行内样式有较高的优先级。但是如果在样式中的其他地方写了!important
,则此时!important
会有更高的优先级。
style属性的注意事项
style属性需要注意以下几点:
(1)样式少的时候使用。
(2)style是对象。我们在上方已经打印出来,typeof的结果是Object。
(3)值是字符串,没有设置值是“”。
(4)命名规则,驼峰命名。
(5)只能获取行内样式,和内嵌和外链无关。
(6)box.style.cssText = “字符串形式的样式”。
cssText
这个属性,其实就是把行内样式里面的值当做字符串来对待。在上方代码的基础之上,举例:
<script>
var box1 = document.getElementsByTagName("div")[0];
//通过cssText一次性设置行内样式
box1.style.cssText = "width: 300px;height: 300px;background-color: green;";
console.log(box1.style.cssText); //这一行更加可以理解,style是对象
</script>
打印结果:
style的常用属性
style的常用属性包括:
-
backgroundColor
-
backgroundImage
-
color
-
width
-
height
-
border
-
opacity 设置透明度 (IE8以前是filter: alpha(opacity=xx))
注意DOM对象style的属性和标签中style内的值不一样,因为在JS中,-
不能作为标识符,使用驼峰命名法。比如:
-
DOM中:backgroundColor
-
CSS中:background-color
通过修改className修改样式
-
方式一
元素.className = “类名”
通过为标签添加class类名获取内嵌和引入的样式 -
方式二
元素.classList.add/remove("类名")
元素.classList.replace("旧类名,新类名")
元素.classList.toggle("类名")
切换类名(有就移除,没有加上)
通过修改classList的add/remove/replace属性进行修改className -
` ` 反引号标签可以包裹多行字符串,可以结合innerHTML属性使用
获取元素当前正在显示的样式
(1)w3c的做法:
window.getComputedStyle("要获取样式的元素", "伪元素");
两个参数都是必须要有的。参数二中,如果没有伪元素就用 null 代替(一般都传null)。
(2)IE和opera的做法:
obj.currentStyle;
注意:
-
如果当前元素没有设置该样式,则获取它的默认值。
-
该方法会返回一个对象,对象中封装了当前元素对应的样式,可以通过
对象.样式名
来读取具体的某一个样式。 -
通过currentStyle和getComputedStyle()读取到的样式都是只读的,不能修改,如果要修改必须通过style属性。
综合上面两种写法,就有了一种兼容性的写法,同时将其封装。代码举例如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
background-color: pink;
/*border: 1px solid #000;*/
padding: 10px;
}
</style>
</head>
<body>
<div style="width: 100px;height: 100px;"></div>
<script>
var div1 = document.getElementsByTagName("div")[0];
console.log(getStyle(div1, "width"));
console.log(getStyle(div1, "padding"));
console.log(getStyle(div1, "background-color"));
/*
* 兼容方法,获取元素当前正在显示的样式。
* 参数:
* obj 要获取样式的元素
*. name 要获取的样式名
*/
function getStyle(ele, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(ele, null)[attr];
}
return ele.currentStyle[attr];
}
</script>
</body>
</html>
打印结果: