JavaScript【DOM操作】

最新推荐文章于 2024-08-13 20:52:14 发布

loetca

最新推荐文章于 2024-08-13 20:52:14 发布

阅读量881

点赞数

分类专栏： JavaScript 文章标签： javascript dom js 脚本语言

本文链接：https://blog.csdn.net/adsl624153/article/details/71156590

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、概念

JavaScript简称JS，是运行在浏览器端的一门脚本语言。其代表行为（网页界面和用户交互），用于响应用户操作。一开始主要用来做浏览器端验证，但是现在功能已经不止于此。
所谓的脚本语言就是指：代码不需要编译，可以直接运行，并且读入一行，运行一行。

特点：
    弱类型:声明时不需要指定类型
    动态类型的语言：可以动态的分配类型
    是解释型的语言，由浏览器的JavaScript引擎执行

2、编写的位置

需要写在script标签中：

<script type="text/javascript">
   // JavaScript代码
</script>

可以引入外部的js文件：

<script type="text/javascript" src=""></script>

src为外部js文件的路径

3、变量的声明

不需要指定类型，通过var关键字声明，要告诉浏览器自己编写的是JavaScript代码。

类型的分配

首先需要声明变量；然后给变量赋值时，会分配类型；也可以重新给变量赋值，动态分配类型。

示例：

 // 声明变量a
var a;
// 给变量a赋值为10【即数值型】
a = 10;
// 弹出一个警告框
alert(a); // 10
// 重新将字符串复制给变量a【动态改变a的类型为字符型】
a = "abc";
alert(a); // abc

命名规范

字母，下划线（_），美元符号（$）开头，推荐使用字母开头，大小写敏感。

4、函数

相当于Java中的方法
在JavaScript中，函数也被看作为一个对象，可以将一个函数的引用赋值给一个变量

函数的声明

通过function关键字
每一个语句都是用分号（;）隔开

有名函数

function 函数名 (形式参数1, 形式参数2){
};

不需要指定形参的类型

匿名函数

var 变量名 = function(){};

变量名就是函数名

函数的使用

通过函数名【有名函数】或接收函数的变量名【匿名函数】，外加小括号来调用函数
函数名(实参);

函数的特点

⑴ js函数的形参，不需要指定类型，即不需要使用var关键字
⑵ js函数调用时，不会检查参数的个数和类型
⑶ 当传入的参数和函数的参数个数不匹配时：
⒈ 参数不够：使用null补充
⒉ 参数过多：从前往后匹配使用

使用示例

【无参的匿名函数】

   // 声明一个匿名函数，并用变量fun来接收
   var fun = function(){
     alert("我是匿名函数");
   };

   // 通过fun来调用函数
   fun();

【有参的有名函数】

   // 声明一个有名(sum)的有参的函数
  // a和b不需要指定类型，所以没有写var
  function sum(a, b){
    // 返回a+b的结果
    return a + b;
  };

  // 打印两个数值相加
  alert(sum(3, 4.7)); // 7.7

 // 打印数值和字符串相加
 alert(sum("a", 2)); // a2 【字符串拼接】

 // 打印数值和布尔类型相加
 // true为1；false为0，和数字计算
 alert(sum(false, 3)); // 3
 alert(sum(true, 3)); // 4

 // 打印形参个数不匹配的结果
 // 少写参数
 alert(sum(3)); // NaN 【Not A Number】
 // 多写参数
 alert(sum(1, 2, 3)); // 3 【会从前往后匹配使用】

5、对象

在JavaScript中，所有的对象都是Object类型

创建对象的方式

⑴ 通过new Object(); 来创建一个对象
⑵ 直接创建并初始化对象 { }; 并在大括号中初始化属性和函数，属性或函数跟值用冒号（:）连接，多个属性或函数之间通过逗号（,）隔开

注意：
⑴ 对象的属性或函数，必须通过对象来调用
⑵ 调用不存在的属性，返回结果为：undefined【未定义的】

使用示例

// ⑴ 通过new Object()，创建一个对象
var obj1 = new Object();
obj1.name = "张三";
obj1.age = 14;
obj1.info = function(){
             // 通过对象来调用       通过this关键字来调用【this代表调用这个函数的对象】
  return "我是：" + obj1.name + "，年龄：" + this.age;
};

alert(obj1.name); // 张三
alert(obj1.info());// 我是：张三，年龄：14
// 该对象没有此属性
alert(obj1.a); // undefined


// ⑵ 直接创建并初始化对象
var obj2 = {
  name:"李四",
  age:16,
  info:function(){
    return this.name + ", " +  this.age;
  }
};

alert(obj2.info());// 李四, 16

6、事件

事件即：用户和浏览器之间发生的交互

注意：需要给标签设置特定事件时，使用JS代码来给HTML标签指定事件，当特定的操作发生时，事件方法才会被浏览器调用

例如：通过js给按钮设置单击事件
    三种方式：
        ⑴ 每一个标签都有事件的属性: onclick,可以在属性值中直接使用js代码
            但是这种方式的耦合度很高，基本不使用
        ⑵ 在script标签内书写js代码
            要写在所有的标签后面
        ⑶ 在head标签中的script标签中书写js代码
            但是如果直接写js代码，会报错：
            Uncaught TypeError: Cannot set property ‘onclick’ of null
            因为文档的加载方式是从上到下，执行js代码的时候，btn对象还没有，所以对象为空

解决方法：让js代码在整个文档加载完成之后再执行
这时就需要调用window对象的onload函数。因为这个函数是当文档加载完成后，浏览器才调用

Tips：window对象：表示浏览器窗口

使用示例

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <title>添加点击事件</title>

    <script type="text/javascript">
      /* 添加事件方式3，在头部标签中的script标签中写JS代码
           需要调用window对象的onload函数
           这样才能找到btn3按钮对象 */
      window.onload = function(){
        var btn3 = document.getElementById("btn3");
        btn3.onclick = function(){
          alert("Button 3");
        };
      };
    </script>
  </head>
  <body>
                                   <!-- 添加事件方式1，通过标签的onclick属性来创建点击事件
                                        这种方式耦合度较高，尽量不要用 -->
    <input type="button" value="按钮1" onclick="alert('我是按钮1');" />
    <br /><br />
    <button id = "btn2">按钮2</button>
    <br /><br />
    <button id = 'btn3'>按钮3</button>

    <!-- 添加事件方式2，在所有的标签的下面添加JS代码 -->
    <script type="text/javascript">
      var btn2 = document.getElementById("btn2");
      btn2.onclick = function(){
        alert("按钮2");
      };
    </script>
  </body>
</html>

7、DOM

概念

Document Object Model 文档对象模型
帮助我们在JS中查找标签对象，对标签进行增删改查，添加或修改属性，设置CSS样式等操作

    将整个文档当作一个对象，页面中所有的内容都是对象，都是document的后代对象。而对象操作标签（元素）很方便，属性和函数可以直接调用
    缺点是：使用麻烦，浏览器兼容性差
    因为浏览器解析网页有三个引擎：html、css、js引擎，每个浏览器的解析效果不同，所以在使用时需要判断是哪个浏览器
    所以一般开发时都会使用第三方的JS库，例如jQuery等

Document：代表整个 HTML 文档，可以用来访问页面中的所有元素

Window对象表示一个浏览器窗口或一个框架。Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。所以，可以只写document，而不必写 window.document

节点

节点：Node——构成HTML文档最基本的单元

节点分为三类：
元素节点：构成HTML文档最基本的HTML元素，对应HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容

示例：

 <font color="red">字体</font>
 元素节点：所有的font标签，即：<font color="red">字体</font>
 属性节点：font标签的属性，即：color="red"
 文本节点：font标签的文本内容，即：字体

元素类型

父元素：只要有子元素的元素都是父元素
子元素：有上级元素的元素
祖先元素：父元素的更上级元素
后代元素：子元素的下级元素
    例如： html是div的祖先元素
                div是html的后代元素
兄弟元素：在同一个层级内的元素
    例如： head和body就是兄弟元素

常用的DOM对象属性

nodeName

返回节点的名称

nodeType

返回节点的类型

nodeValue

返回节点的值

innerHTML

获取或设置元素的文本内容
虽不是W3C标准，却被所有主流的浏览器支持
    ① 读取元素内部HTML代码
        元素对象.innerHTML
    ② 修改元素内部HTML代码
        元素对象.innerHTML=HTML代码

childNodes

返回元素的所有子节点。返回值类型为 [object NodeList]

Tips：对于集合或节点数组，可以调用length来获取长度，并使用for循环来遍历

注意：因为浏览器的兼容问题，DOM解析时会将空格、文本也解析成一个节点对象。所以该属性最好不要用

firstChild

返回元素的第一个子节点
注意：因为浏览器的兼容问题，DOM解析时会将空格、文本也解析成一个节点对象。所以该属性最好不要用

lastChild

返回元素的最后一个子元素
注意：因为浏览器的兼容问题，DOM解析时会将空格、文本也解析成一个节点对象。所以该属性最好不要用

parentNode

返回元素的父节点

previousSibling

返回元素的前一个兄弟节点
注意：因为浏览器的兼容问题，DOM解析时会将空格、文本也解析成一个节点对象。所以该属性最好不要用

nextSibling

返回元素的后一个兄弟节点
注意：因为浏览器的兼容问题，DOM解析时会将空格、文本也解析成一个节点对象。所以该属性最好不要用

value

返回或设置元素的value属性值

常用的DOM对象方法

getElementById

document.getElementById(String elementId);
返回带有指定 ID 的元素。查找一个元素

getElementsByTagName

document.getElementsByTagName(String tagname);
根据标签名查找元素。返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。查找一组元素。返回值类型为[object HTMLCollection]

Tips：对于集合或节点数组，可以调用length来获取长度，并使用for循环来遍历

getElementsByName

document.getElementsByName(String elementName);
根据name属性值查询元素。一般是input元素或一组元素。返回值类型为[object HTMLCollection]

Tips：对于集合或节点数组，可以调用length来获取长度，并使用for循环来遍历

使用示例

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <title>DOM操作</title>

    <script type="text/javascript">
      window.onload = function(){

        // 根据标签名获取元素【返回一个集合】
        var btns = document.getElementsByTagName("button");
        // 获取节点类型
        // alert(btns); // [object HTMLCollection]

        // 因为整个页面中只有一个button，所以取第一个
        var btn = btns[0];
        // alert(btn); // [object HTMLButtonElement]

        // 修改按钮的onclick事件
        btn.onclick = function(){
          // 根据id获取节点
          var fEle = document.getElementById("f1");
          fEle.color = "red";
        };

//

        // 根据name属性获取节点【返回一个集合】
        var lists = document.getElementsByName("list");
        // alert(lists); // [object HTMLCollection]

        // 因为整个页面中只有一个无序列表，所以取第一个
        var list = lists[0];

        // 得到ul的所有子节点【li】
        var children =  list.childNodes;
        // 获取集合的长度
        var len = children.length;
        // 因为有的浏览器在解析DOM时，会将空格、字符也解析为节点
        alert(len); // 7 【IE10 测试】

        var first = list.firstChild;
        // 还是因为有的浏览器会将空格解析为节点
        alert(first); // [object Text] 【IE10 测试】

        var last = list.firstChild;
        alert(last); // [object Text] 【IE10 测试】

//

        // 获取id为li2的li标签
        var li2 = document.getElementById("li2");
        // 获取li的父节点【ul】
        var parentEle = li2.parentNode;
        alert(parentEle); // [object HTMLUListElement]

        // 获取li的前一个兄弟节点
        var preEle = li2.previousSibling;
        // 还是因为有的浏览器会将空格解析为节点
        alert(preEle); // [object Text] 【IE10 测试】

        // 获取li的下一个兄弟节点
        var nextEle = li2.nextSibling;
        alert(nextEle); // [object Text] 【IE10 测试】


//

        var hEle = document.getElementsByTagName("h1")[0];
        // 获取元素的文本内容
        alert(hEle.innerHTML); // 这是1级标签
        hEle.innerHTML = "修改！";

        var fEle = document.getElementById("f1");
        alert(fEle.innerHTML); // 我是font标签

        // 节点的名称
        alert(fEle.nodeName); // FONT
        // 节点的类型
        alert(fEle.nodeType); // 1
        // 节点的值
        alert(fEle.nodeValue); // null

        var txtEle = document.getElementById("txt");
        // 获取input标签的value属性值
        var typeEle = txtEle.value;
        alert(typeEle);
        // 修改input标签的value属性值
        txtEle.value = "txt";

      };
    </script>
  </head>
  <body>
    <h1>这是1级标签</h1>
    <font id="f1">我是font标签</font><br /><br />
    <button>让上面的font标签文字变红色</button><br /><br />

    <ul name="list">
      <li>列表项1</li>
      <li id="li2">列表项2</li>
      <li>列表项3</li>
    </ul>

    <input type="text" id="txt" value="文本框" />
  </body>
</html>