DOM
基础概念
DOM
概念
- DOM(文档对象模型-document object model)。JavaScript会将文档(HTML页面)看成一系列标签的集合,并提供了一系列的api来操作HTML文档,比如对标签进行增删查改操作,或者修改css。这样的的话借助JavaScript能够实现动态页面。
发展
- DOM 0级:在96年之前ie浏览器和网景浏览器为了抢夺市场,都分别实现了一套JavaScript用于操作HTML的api。因为是分别实现的,没有标准,在正式dom标准出来之前,统称它们的相关api为dom0级
- DOM 1级:98年w3c出台了第一版domapi的标准,基本ie8就使用了该标准。dom1级只能简单的操作HTML标签,比如提供
document.images
来获取页面上所有的<img>
标签等。 - DOM 2级:目前所有浏览器都支持的版本。增强了对页面的控制,以及添加了对css的支持,以及事件的支持。ie9+
- DOM 3级:目前所有浏览器都支持的版本,将api进行模块化,更方便管理和更新。
兼容性
- DOM1级,ie8及以下
- DOM2级和3级:ie9+、现代浏览器
DOM树
JavaScript会为了方便对HTML页面进行操作,会吧HTML页面抽象成一个具有层次的文档结构,我们称为“DOM”,因为按照层级来进行描述有点类似倒挂的树。
每个HTML标签都是一个节点。其中标签内部的属性和文本内容在JavaScript中也会作为一个节点存在。
<a href="http://www.baidu.com">百度一下</a>
- 该
<a>
标签在JavaScript中会作为一个节点,而<a>
内部的href
属性和文本百度一下
也会作为一个节点存在。
DOM节点
w3c规定了根据代码的不同作用将节点分成了12种类型,常用的只有3种:
元素节点-Element Node
:指的是HTML标签。即一个元素节点指的是dom树中 的一个HTML标签属性节点-Attribute Node
:指元素节点中的一个属性。比如<a>中的href属性
就是一个属性节点。文本节点-TextNode
:指的是元素节点中的文本内容。比如<a>百度一下</a>
的文本内容-百度一下
常用api
属性
nodeName
:节点的名称。比如<div>
的nodeName是DIV
nodeType
:指的是节点的类型,是一个数字:1
:该节点是一个元素节点,即HTML标签2
:该节点是一个属性节点,3
:该节点是一个文本节点html:
<a href="http://www.baidu.com">百度一下</a>
JavaScript:
var a = document.querySelector('a');
a.nodeName ;// A
a.nodeType: // 1
DOM基本操作
document对象
- document对象是DOM的核心,基本上大多数DOM API由 该对象提供。
基础api:DOM1级
- 获取body标签
- 获取HTML标签
- 获取页面上的标题
- 获取页面上的地址
- 获取页面上的所有图片
- 获取页面上的所有表单
1. 获取<body>标签
var body = document.body;
2. 获取<html>标签
var html = document.documentElement;
3. 获取页面上的标题
var title =document.title;
4. 获取页面地址
var url = document.URL;
5. 获取页面上的所有图片,即<img>
var imgs = document.images;
6. 获取页面上的所有表单
var forms = document.forms;
HTML标签api
获取
document.getElementById
document.getElementsByClassName
document.getElementsByTagName
document.querySelector/All
HTML标签属性
setAttribute
getAttribute
添加标签
document.createElement()
appendChild
insertBefore
删除标签
removeChild
获取兄弟标签
previousElementSibling
:上一个兄弟标签nextElementSibling
:下一个兄弟标签
获取子标签
firstElementChild
lastElementChild
children
获取父标签
parentElement
css操作
getComputedStyle
标签变量名.style.css属性名=属性值
JavaScript DOM的一般使用流程
- 先获取HTML标签
- 修改或获取HTML标签的内容
- 修改HTML标签的css
获取HTML元素
- 通过id
var 标签变量名 = document.getElementById("标签的id属性值");
- 通过class
var 标签数组变量名 = document.getElementsByClassName("class属性值");
例子:
var elems = document.getElementsByClassName("btn");
获取找到的第一个标签: elems[0]
获取找到的第二个标签: elems[1]
获取找到的最后一个标签: elems[elems.length-1]
获取的是一个数组,哪怕是没有数据,或者只有一个,也是返回的数组
- 通过标签名
var 标签数组变量名 = document.getElementsByTagName("标签名");
例子:获取页面所有的div
var divs = document.getElementsByTagName("div");
获取的是一个数组,哪怕是没有数据,或者只有一个,也是返回的数组
通过
querySelector/querySelectorAll
:通过css选择器来查找标签querySelector:匹配第一个找到的HTML标签
var 标签变量名 = document.querySelector("标签的css选择器");
例如:获取id为box下的第一个p标签
var ps = document.querySelector("#box p");
例子:找到body下的第一个直接子标签,子标签的class为 item
var elem = document.querySelector("body > .item");
querySelectorAll:匹配找到的所有标签
var 标签变量名 = document.querySelectorAll("标签的css选择器");
例如:获取id为box下的所有p标签
var ps = document.querySelectorAll("#box p");
ps.innerHTML
获取/修改HTML元素的内容/属性
内容
- value属性 ```javascript // 1. 先获取HTML标签 var 标签变量名 = document.querySelector(‘input’); // 2. 获取HTML标签的内容 标签变量名.value;
//修改 标签变量名.value = 新数据;
例如:获取input里的内容 html:
js: var input = document.querySelector(‘#username’); var data = input.value;//输入框内容保存在data变量里 //修改数据为123 input.value = “123”;页面上输入框会显示123
- innerHTML
- 获取标签内部的HTML代码。一般针对于`<标签名></标签名>`这种模式的标签
```javascript
// 1. 先获取HTML标签
var 标签变量名 = querySelector('#box');
// 2. 获取HTML标签的内容
标签变量名.innerHTMl;
//修改
标签变量名.innerHTML = 新数据;
例如:获取div里的内容
html:
<div id="box">
<p>这是div里的p标签</p>
</div>
js:
var div = document.querySelector('#box');
var text = div.innerHTML;// 输出 <p>这是div里的p标签</p>
//修改数据为123
input.innerHTML = "123";//div中只有123,p标签会被替换掉
innerText
- 获取标签内的文本内容。一般针对于
<标签名></标签名>
这种模式的标签 ```javascript // 1. 先获取HTML标签 var 标签变量名 = querySelector(‘#box p’); // 2. 获取HTML标签的内容 标签变量名.innerText; //修改 标签变量名.innerText = 新数据;
- 获取标签内的文本内容。一般针对于
例如:获取div里的内容 html:
这是div里的p标签
- innerHTML、innerText、value的区别
1. innerHTML和innerText都是针对`<标签名></标签名>`该模式的标签,比如div、p、li、a、body、ul等
2. innerHTML是改变的标签内部的HTML代码,而innerText改变的是标签内部的文本
3. value针对带有value属性的标签 ,比如input
-
属性
- 获取
javascript
1. 先获取标签
标签变量名.getAttribute(“属性名”);
例子:
js:
var img =document.querySelector(“#img”);
var src = img.getAttribute(“src”);
document.write(src);输出 img/id1.jpg
- 设置
javascript
标签变量名.setAttribute(“属性名”,”属性值”);
例子:修改地址为img/id2.jpg
js:
var img =document.querySelector(“#img”);
img.setAttribute(“src”,”img/id2.jpg”);
<a name="9a423fa9"></a>
### 添加或删除HTML元素
-
添加
-
概念:利用JavaScript的相关api`document.createElement()`在程序中生成一个新的HTML标签并利用`apeendChild`或`insertBefore`将新建标签放入到页面中。
-
流程
1. 利用`document.createElement()`生成一个新的标签,新建的标签是存在于代码中,页面上不会显示出来
2. 利用`appendChild`或`insertBefore`将第一步新建的标签追加到页面上,
-
相关api
- `document.createElement`:新建标签
javascript
var 标签变量名 = document.createElement(“标签名”);
例子: 新建一个div标签
var newDiv = document.createElement(“div”);
- `appendChild`:将某个标签追加到页面中,作为其父标签的最后一个子标签。保证其父标签是页面上已存在的标签。
javascript
父标签变量名.appendChild(新标签变量名);
例子:把新建的div标签作为id为mydiv的标签的最后一个子标签放在页面上
var newDiv = document.createElement(“div”);
//document.body.appendChild(newDiv);作为body的子标签
var father = document.querySelector(‘#mydiv’);
father.appendChild(newDiv);
- `insertBefore`:将某个标签追加到页面上,并作为其父标签的子标签并放在指定兄弟标签之前
javascript
父标签变量名.insertBefore(新标签变量名,兄弟标签变量名);
例子:新建p标签,并把新标签放入id为box的div标签中,作为其第一个子标签
这是第一个子标签
-
删除
-
流程
- 获取待删除的标签以及其父标签
- 父标签调用`removeChild`来删除子标签
-
相关api
- `removeChild()`
javascript
父标签变量名.removeChild(待删除的子标签);
例子:删除div里的p标签
这是div里的p标签
-
removeChild每次只能删除一个标签
-
完成批量删除操作
- 获取所有待删除的标签,
- 对这些标签进行for循环遍历,父标签依次调用`removeChild`进行删除
<a name="ecc07ca4"></a>
### 获取兄弟标签
- 概念:通过以下属性来获取同级别的其他兄弟标签
- `previousElementSibling`:
- `nextElementSibling`
javascript
标签变量名.nextElementSibling;//下一个兄弟标签
标签变量名.previousElementSibling;//上一个兄弟标签
例子:
html:
<a name="f493a0e4"></a>
### 获取父标签
- 概念:获取父标签
- `parentElement`
javascript
标签变量名.parentElement;
例子:
html:
<a name="ce8317eb"></a>
### 获取子标签
- 概念:通过其父标签来获取子标签
- `firstElementChild`:获取第一个子标签
- `lastElementChild`:获取最后一个子标签
- `children`:获取所有的直接子标签。返回的是一个数组
javascript
标签变量名.firstElementChild;
标签变量名.lastElementChild;
标签变量名.children;
例子:
html:
<a name="e36d02e7"></a>
### 修改css
- 获取
- `getComputedStyle`:JavaScript内置函数,能够获取某个标签的所有最终使用样式。该函数会返回一个对象,需要我们定义变量接收后进行使用。该对象中包含了该标签的所有样式,可以通过`对象变量名.css属性名`来获取某个css属性
javascript
javascript
var 变量名 = getComputedStyle(标签变量名,null);
例子: 获取div的width和height
html:
JavaScript: var div = document.querySelector(‘#box’); //获取所有的样式 var style = getComputedStyle(div,null); //获取width和height console.log(style.width,style.height);//200px 200px
- 设置
- `标签变量名.style.css属性名=css属性值`
```javascript
标签变量名.style.css属性名=css属性值;
例子:改变div的背景颜色为蓝色
<div></div>
JavaScript:
var div = document.querySelector('div');
div.style.backgroundColor = "blue";
- JavaScript会将设置的css样式作为嵌入样式放在标签的style属性中,这样可以保证css样式优先级最高
点击事件
- 当用户点击某个按钮的时候,执行指定的js代码。
1 在标签上书写onclick = "js代码"; 所有标签都可以添加
<div onclick = 'alert(123)'>点击我</div>
2. 在js中书写代码
标签变量名.onclidk = function(){
当该标签被点击时要执行的代码
}
例如:
<button onclick="demo()">登录</button>
<button id="reg-btn">注册</button>
JavaScript:
//1 标签中设置onclick属性
function demo(){
console.log('被点击了');
}
// 2获取HTML标签,并设置点击
var button = document.querySelector('#reg-btn');
button.onclick = function(){
console.log('button被点击了');
}
- 如何在点击的时候获取被点击的标签:两种方式
1.在onclick中添加this作为实际参数,在函数中用形式参数来接收
<div onclick="函数名(this);"></div>
js:
function 函数名(elem){
//elem就是被点击的标签本身
elem.innerText = "被点击了";
}
2. 在js中指定onclick时,直接在function中用this来指代被点击的标签本身
<button id="demo">登录</button>
js:
var btn = document.querySelector('button');
btn.onclick = function(){
//this指的就是标被点击的标签本身,即<button id="demo">登录</button>
this.innerText = "被点击了";//直接使用
}
eval
- 概念:JavaScript内置函数把某个字符串作为JavaScript代码执行并返回执行的结果
- 语法
eval('var a=10;alert(a)');//弹框输出10
var num = eval("2+2");
document.write(num);//4
substr\substring
- 概念:都是针对字符串的内置api。用于获取字符串中的一部分字符,即获取子字符串
- 语法
字符串.substr(子字符串的开始下标,子字符串的字符数量);
字符串.substring(子字符串的开始下标,子字符串的结束下标);
//获取hello
var str = "hello woniuxy";
var newStr = str.substr(0,5);
var newStr =str.substring(0,5);
document.write(newStr);//hello
- substring不包含结束下标
- substr/substring,如果直接到末尾,第二个实际参数可以省略不写
扩展
控制视音频
play()
:JavaScript提供的api,用于控制视音频的播放pause()
:JavaScript提供的api,用于控制视音频的暂停
html:
<audio src="圣诞.wav" id="music" controls></audio>
javaScirpt:
var music = document.querySelector("#music");
//播放
music.play();
//暂停
music.pause();
video
标签使用方式跟音频是一样的