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中也会作为一个节点存在。

      1. <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:该节点是一个文本节点
            1. html:
            2. <a href="http://www.baidu.com">百度一下</a>
            3. JavaScript
            4. var a = document.querySelector('a');
            5. a.nodeName ;// A
            6. a.nodeType: // 1

DOM基本操作

document对象

  • document对象是DOM的核心,基本上大多数DOM API由 该对象提供。
  • 基础api:DOM1级

    • 获取body标签
    • 获取HTML标签
    • 获取页面上的标题
    • 获取页面上的地址
    • 获取页面上的所有图片
    • 获取页面上的所有表单
  1. 1. 获取<body>标签
  2. var body = document.body;
  3. 2. 获取<html>标签
  4. var html = document.documentElement;
  5. 3. 获取页面上的标题
  6. var title =document.title;
  7. 4. 获取页面地址
  8. var url = document.URL;
  9. 5. 获取页面上的所有图片,即<img>
  10. var imgs = document.images;
  11. 6. 获取页面上的所有表单
  12. 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
  1. var 标签变量名 = document.getElementById("标签的id属性值");
  • 通过class
  1. var 标签数组变量名 = document.getElementsByClassName("class属性值");
  2. 例子:
  3. var elems = document.getElementsByClassName("btn");
  4. 获取找到的第一个标签: elems[0]
  5. 获取找到的第二个标签: elems[1]
  6. 获取找到的最后一个标签: elems[elems.length-1]
  1. 获取的是一个数组,哪怕是没有数据,或者只有一个,也是返回的数组
  • 通过标签名
  1. var 标签数组变量名 = document.getElementsByTagName("标签名");
  2. 例子:获取页面所有的div
  3. var divs = document.getElementsByTagName("div");
  1. 获取的是一个数组,哪怕是没有数据,或者只有一个,也是返回的数组
  • 通过querySelector/querySelectorAll:通过css选择器来查找标签

    • querySelector:匹配第一个找到的HTML标签

      1. var 标签变量名 = document.querySelector("标签的css选择器");
      2. 例如:获取idbox下的第一个p标签
      3. var ps = document.querySelector("#box p");
      4. 例子:找到body下的第一个直接子标签,子标签的class item
      5. var elem = document.querySelector("body > .item");
    • querySelectorAll:匹配找到的所有标签

      1. var 标签变量名 = document.querySelectorAll("标签的css选择器");
      2. 例如:获取idbox下的所有p标签
      3. var ps = document.querySelectorAll("#box p");
      4. 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

  1. - innerHTML
  2. - 获取标签内部的HTML代码。一般针对于`<标签名></标签名>`这种模式的标签
  3. ```javascript
  4. // 1. 先获取HTML标签
  5. var 标签变量名 = querySelector('#box');
  6. // 2. 获取HTML标签的内容
  7. 标签变量名.innerHTMl;
  8. //修改
  9. 标签变量名.innerHTML = 新数据;
  10. 例如:获取div里的内容
  11. html:
  12. <div id="box">
  13. <p>这是div里的p标签</p>
  14. </div>
  15. js:
  16. var div = document.querySelector('#box');
  17. var text = div.innerHTML;// 输出 <p>这是div里的p标签</p>
  18. //修改数据为123
  19. input.innerHTML = "123";//div中只有123,p标签会被替换掉
  • innerText

    • 获取标签内的文本内容。一般针对于<标签名></标签名>这种模式的标签 ```javascript // 1. 先获取HTML标签 var 标签变量名 = querySelector(‘#box p’); // 2. 获取HTML标签的内容 标签变量名.innerText; //修改 标签变量名.innerText = 新数据;

例如:获取div里的内容 html:

这是div里的p标签


js: var div = document.querySelector(‘#box’); var text = div.innerText;// 输出 这是div里的p标签 //修改数据为123 input.innerText = “123”;//div中只有123,p标签会被替换掉 - innerHTML、innerText、value的区别 1. innerHTML和innerText都是针对`<标签名></标签名>`该模式的标签,比如div、p、li、a、body、ul等 2. innerHTML是改变的标签内部的HTML代码,而innerText改变的是标签内部的文本 3. value针对带有value属性的标签 ,比如input - 属性 - 获取javascript 1. 先获取标签 标签变量名.getAttribute(“属性名”); 例子: DOM - 图1 js: var img =document.querySelector(“#img”); var src = img.getAttribute(“src”); document.write(src);输出 img/id1.jpg - 设置javascript 标签变量名.setAttribute(“属性名”,”属性值”); 例子:修改地址为img/id2.jpg DOM - 图2 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标签中,作为其第一个子标签

这是第一个子标签

js: var newP = document.createElement(“p”); newP.innerText = “我才是第一个p标签”; var father = document.querySelector(‘#box’); var brother = document.querySelector(‘#box p’); father.insertBefore(newP,brother); - 删除 - 流程 - 获取待删除的标签以及其父标签 - 父标签调用`removeChild`来删除子标签 - 相关api - `removeChild()` javascript 父标签变量名.removeChild(待删除的子标签); 例子:删除div里的p标签

这是div里的p标签

js: var father = document.querySelector(‘#box’); var p = document.querySelector(‘#box p’); father.removeChild(p); - removeChild每次只能删除一个标签 - 完成批量删除操作 - 获取所有待删除的标签, - 对这些标签进行for循环遍历,父标签依次调用`removeChild`进行删除 <a name="ecc07ca4"></a> ### 获取兄弟标签 - 概念:通过以下属性来获取同级别的其他兄弟标签 - `previousElementSibling`: - `nextElementSibling` javascript 标签变量名.nextElementSibling;//下一个兄弟标签 标签变量名.previousElementSibling;//上一个兄弟标签 例子: html:
年龄:
js:通过button来获取input标签 fuction sub(btn){ 获取button的下一个兄弟标签 var input = btn.nextElementSibling; } fuction add(btn){ 获取button的上一个兄弟标签 var input = btn.previousElementSibling; } <a name="f493a0e4"></a> ### 获取父标签 - 概念:获取父标签 - `parentElement` javascript 标签变量名.parentElement; 例子: html:
年龄:
js:通过button来获取其父标签 fuction sub(btn){ 获取button的父标签 var input = btn.parentElement; } <a name="ce8317eb"></a> ### 获取子标签 - 概念:通过其父标签来获取子标签 - `firstElementChild`:获取第一个子标签 - `lastElementChild`:获取最后一个子标签 - `children`:获取所有的直接子标签。返回的是一个数组javascript 标签变量名.firstElementChild; 标签变量名.lastElementChild; 标签变量名.children; 例子: html:
js: // 通过div来获取其子标签 var div = document.querySelector(‘#box’); var first = div.firstElementChild; var last = div.lastElementChild; console.log(first);// console.log(last);// console.log(div.children); //[button,input,button] <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

  1. - 设置
  2. - `标签变量名.style.css属性名=css属性值`
  3. ```javascript
  4. 标签变量名.style.css属性名=css属性值;
  5. 例子:改变div的背景颜色为蓝色
  6. <div></div>
  7. JavaScript:
  8. var div = document.querySelector('div');
  9. div.style.backgroundColor = "blue";
  • JavaScript会将设置的css样式作为嵌入样式放在标签的style属性中,这样可以保证css样式优先级最高

点击事件

  • 当用户点击某个按钮的时候,执行指定的js代码。
  1. 1 在标签上书写onclick = "js代码"; 所有标签都可以添加
  2. <div onclick = 'alert(123)'>点击我</div>
  3. 2. js中书写代码
  4. 标签变量名.onclidk = function(){
  5. 当该标签被点击时要执行的代码
  6. }
  7. 例如:
  8. <button onclick="demo()">登录</button>
  9. <button id="reg-btn">注册</button>
  10. JavaScript
  11. //1 标签中设置onclick属性
  12. function demo(){
  13. console.log('被点击了');
  14. }
  15. // 2获取HTML标签,并设置点击
  16. var button = document.querySelector('#reg-btn');
  17. button.onclick = function(){
  18. console.log('button被点击了');
  19. }
  • 如何在点击的时候获取被点击的标签:两种方式
  1. 1.onclick中添加this作为实际参数,在函数中用形式参数来接收
  2. <div onclick="函数名(this);"></div>
  3. js:
  4. function 函数名(elem){
  5. //elem就是被点击的标签本身
  6. elem.innerText = "被点击了";
  7. }
  8. 2. js中指定onclick时,直接在function中用this来指代被点击的标签本身
  9. <button id="demo">登录</button>
  10. js:
  11. var btn = document.querySelector('button');
  12. btn.onclick = function(){
  13. //this指的就是标被点击的标签本身,即<button id="demo">登录</button>
  14. this.innerText = "被点击了";//直接使用
  15. }

eval

  • 概念:JavaScript内置函数把某个字符串作为JavaScript代码执行并返回执行的结果
  • 语法
  1. eval('var a=10;alert(a)');//弹框输出10
  2. var num = eval("2+2");
  3. document.write(num);//4

substr\substring

  • 概念:都是针对字符串的内置api。用于获取字符串中的一部分字符,即获取子字符串
  • 语法
  1. 字符串.substr(子字符串的开始下标,子字符串的字符数量);
  2. 字符串.substring(子字符串的开始下标,子字符串的结束下标);
  3. //获取hello
  4. var str = "hello woniuxy";
  5. var newStr = str.substr(0,5);
  6. var newStr =str.substring(0,5);
  7. document.write(newStr);//hello
  • substring不包含结束下标
  • substr/substring,如果直接到末尾,第二个实际参数可以省略不写

扩展

控制视音频

  • play():JavaScript提供的api,用于控制视音频的播放
  • pause():JavaScript提供的api,用于控制视音频的暂停
  1. html:
  2. <audio src="圣诞.wav" id="music" controls></audio>
  3. javaScirpt:
  4. var music = document.querySelector("#music");
  5. //播放
  6. music.play();
  7. //暂停
  8. music.pause();
  • video标签使用方式跟音频是一样的