JavaScript基础知识入门

已于 2024-11-22 10:42:42 修改
阅读量1k 收藏 9
点赞数 10
分类专栏： javaWeb 文章标签： javascript 开发语言 ecmascript css xml
于 2024-11-22 10:18:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_59272777/article/details/143961491
版权

目录

背景：

2JavaScript和html代码的结合方式

第一种方式

第二种方式

3.变量

关系（比较）运算

逻辑运算

4.数组

数组定义方式

5.函数

函数的二种定义方式

第一种：

第二种：

函数的arguments 隐形参数（只在function函数内）

6.JS中的自定义对象（扩展内容）

Object形式的自定义对象

{}花括号形式的自定义对象

7.js中的事件

常用的事件

onload-加载完成事件：

onclick-单击事件：

onblur-失去焦点事件：

onchange-内容发生改变事件：

onsubmit-事件

8.DOM模型 

8.1 Docuent对象

8.2 Document对象中的方法介绍

document.getElementById(elementId)

Document.getElementsByName(elementName)

document.getElementsByTagName(tagname)

Document.createElement(tagName)

8.3 结点的属常用属性和方法

背景：

Javascript语言诞主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。JS是Net scape网景公司的产品，最早取名LiveScript;为了吸引更多java程序员。更名为JavaScript。JS是弱类型，Java是强类型

特点：

1.交互性（它可以做的就是信息的动态交互）

2.安全性（不允许直接访问本地硬盘）

3.跨平台（只要是可以解释JS的浏览器都可以执行，和平台无关）

2JavaScript和html代码的结合方式

第一种方式

只需要head标签中，或者在body标签中，使用script标签来书写JavaScript代码

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    //alert是JavaScript语言提供的一个警告框函数
    //它可以接收任意类型的参数，这个参数就是警告框的显示信息
    alert("hello javaScript")
  </script>
</head>
<body>

</body>
</html>

第二种方式

使用script标签引入单独的JavaScript代码文件

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--
    现在需要使用script引入外部的js文件来执行
    src属性专门用来引入js文件路径（可以相对路径，也可以是绝对路径）

    script标签可以用来定义js代码，也可以用来引入js文件
    但是，两个功能二选一使用。不能同时使用两个功能
  -->
  <script type ="text/javascript" src="1.js"></script> //1.js就是新建的文件
  <script type ="text/javascript">
          alert("现在可以显示了")
  </script>
</head>
<body>

</body>
</html>

3.变量

什么是变量？变量是可以存放某些值的内存的命名

JavaScript的变量类型：

数值类型：  number

字符串类型：string

对象类型：  object

布尔类型：  boolean

函数类型：  function

JavaScript里特殊的值：

Undefined 未定义，所有js变量未赋予初始值，默认值都是undefined.

Null   空值

NAN 全称是：Not a Number。非数字。非数值。

JS中的定义变量格式：

var变量名；

var变量名 = 值；

代码示例： 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type ="text/javascript">
    var i;  // 声明变量
    //alert(i);//undefined
    i=12;
    //typeof()是javaScript语言提供的一个函数
    //alert(typeof(i));//number
    //它可以取变量的数据类型返回

    i="abc";
    //它可以取变量的数据类型返回
    //alert(typeof(i));//string

    var a = 12;
    var b ="abc";

    alert(a*b);//NaN是非数字，非数值。
  </script>
</head>
<body>

</body>
</html>

关系（比较）运算

等于：== 等于是简单的做字面值的比较

全等于：== 除了做字面值的比较，还会比较两个变量的数据类型

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">

    var a=10;
    var b="10";

   alert(a==b);//true
    alert(a===b);//false

  </script>
</head>
<body>

</body>
</html>

逻辑运算

且运算：   &&

或运算：   ||

取反运算： ！

在JavaScript语言中，所有的变量，都可以作为一个boolean类型的变量去使用

0、null、undefined、””（空串）都认为是false；

&&且运算。

有两种情况：

第一种：当表达式全为真的时候，返回最后一个表达式的值

第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值

||或运算

第一种情况：当表达式全为假时，返回最后一个表达式的值

第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值

并且&&与运算 和 ||或运算 有短路。

短路就是说，当这个&&或||运算有结果了之后。后面的表达式不再执行

var a = “abc”;

var b = true;

var d = false;

Var c = null;

代码示例： 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
/*    在JavaScript语言中，所有的变量，都可以作为一个boolean类型的变量去使用

    0、null、undefined、””（空串）都认为是false；*/

/*    var a=0;
    if(a){
      alert("零为真");
    }else{
      alert("零为假");
    }*/

/*    var b =null;
    if(b){
      alert("null为真");
    }else{
      alert("mull为假");
    }*/

/*    var c = undefined;
    if(c){
      alert("undefined为真");
    }else{
      alert("undefined为假");
    }*/

/*    var d = "";
    if(d){
      alert("空串为真")
    }else{
      alert("空串为假")
    }*/

    /*&&且运算。
    有两种情况：
    第一种：当表达式全为真的时候，返回最后一个表达式的值
    第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值*/


    var a = "abc";
    var b = true;
    var d = false;
    var c = null;

      // alert(a && b);//true
      // alert(b && a);//abc
      // alert(a && c);//null
      // alert(a && d);//false

      // alert(a && d && c);//false
    /*||或运算
    第一种情况：当表达式全为假时，返回最后一个表达式的值
    第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值*/

/*    alert(d||c);//null
      alert(c||d);//false

      alert(a||c);//abc
      alert(b||c);//true*/

      </script>
</head>
<body>

</body>
</html>

4.数组

数组定义方式

JS中数组的定义：

格式：

var 数组名 =[]； //空数组

Var 数组名 =[1,’abc’,true] //定义数组同时赋值元素  

代码示例： 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    var arr =[true,1];//定义一个空数组
    //alert(arr.length);//0

    arr[0]=12;
    //alert(arr[0]);//12
    // alert(arr.length);//0

    //javaScript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动额给数组做扩容操作
    arr[2] = "abc";
    alert(arr.length);//3

    //alert(arr[1]);//undefined

    //遍历数组
    for(var i =0; i< arr.length;i++){
      alert(arr[i]);
    }
  </script>
</head>
<body>

</body>
</html>

5.函数

函数的二种定义方式

第一种：

可以使用function关键字来定义函数

使用格式如下：

function 函数名（形参列表）｛

函数体

｝

代码示例： 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
        <script type="text/javascript">
          //定义一个无参函数
          function fun(){
            alert("无参函数fun()被调用了");
          }
          //函数调动==才会执行
          //fun();

          function fun2(a,b){
            alert("有参数fun2()被调用了 a=>" +a +",b=>"+b)
          }
          //fun2(12,"abc")

          //定义带有返回值的函数
          function sum(num1,num2){
            var result = num1 +num2;

            return result;
          }
          alert (sum(100,50));
        </script>
</head>
<body>

</body>
</html>

在JavaScript语言中，如何定义带有返回值的函数？

只需要在函数体内直接使用return语句返回值即可！

第二种：

使用格式如下：

var 函数名 = function（形参列表）{函数体}  

代码示例： 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    var fun = function(){
      alert("无参函数")
    }
    //fun();

    var fun2 = function (a,b){
      alert("有参函数a="+a+",b="+b);
    }
    //fun2(1,2);

    var fun3 = function (num1,num2){
      return num1+num2;
    }
    alert (fun3(250,250));
  </script>
</head>
<body>

</body>
</html>

注：在Java中函数中允许重载。但是在JS中函数的重载会直接覆盖掉上一次的定义

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    function fun(a,b){
      alert("有参函数fun（）")
    }
    function fun(){
      alert("无参函数fun（）")
    }
    //输出无参函数
    fun(1,"ab"); //有参函数
  </script>
</head>
<body>

</body>
</html>

函数的arguments 隐形参数（只在function函数内）

就是在function函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐性参数。

public void fun(Object...args);

可变长参数其实是一个数组。

那么js中隐形参数也跟java的可变长参数一样。操作类似数组

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
      function fun() {
/*        alert(arguments.length);//可查看个数

        alert(arguments[0]);
        alert(arguments[1]);
        alert(arguments[2]);*/

        alert("a=" +a);
        for (var i = 0; i < arguments.length; i++){
          alert(arguments[i]);
        }
        alert("无参函数fun()");
      }
      //fun(1,'ad',true);

      //需求：要求编写一个函数。用于计算所有参数相加的和并返回
      function sum(num1,num2){
        var result =0;
        for(var i=0; i< arguments.length; i++){
          result += arguments[i];
        }
        return result;
      }
      alert(sum(1,2,3,6,7));
  </script>
</head>
<body>

</body>
</html>

6.JS中的自定义对象（扩展内容）

Object形式的自定义对象:

对象的定义：

var变量名 = new Object();   //对象实例（空对象）

变量.属性名 = 值；        //定义一个属性

变量名.函数名 = function().{} //定义一个函数

对象的访问：

变量.属性名 /函数名（）；

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
  //对象的定义：
    //var变量名 = new Object();  	  //对象实例（空对象）
    //变量.属性名 = 值；       	      //定义一个属性
    //变量名.函数名 = function().{}   //定义一个函数
    var obj = new Object();
    obj.name="潇洒哥";
    obj.age = 18;
    obj.fun = function(){
      alert("姓名：" + this.name + ",年龄：" + this.age);
    }
    //对象的访问：
    //变量.属性名 /函数名（）；
    //alert(obj.name);//输出：潇洒哥
    obj.fun();//输出：姓名：潇洒哥，年龄：18
  </script>
</head>
<body>

</body>
</html>

{}花括号形式的自定义对象:

对象的定义：

Var  变量名 ={ //空对象

     属性名:值 //定义一个属性

     属性名:值 //定义一个属性

 函数名:function(){}

}；

对象的访问：

变量名.属性/函数名();

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
      //对象的定义：
      //var  变量名 ={		//空对象
      //     属性名:值		//定义一个属性
      //     属性名:值		//定义一个属性
      //     函数名:function(){}
      //}；
      var obj ={
        name:"黑大帅",
        age:18,
        fun :function(){
          alert("姓名:" + this.name + ",年龄：" + this.age);
        }
      }
    //对象的访问：
    //变量名.属性/函数名();
     alert(obj.name);//输出：黑大帅
      obj.fun();//输出：姓名：黑大帅，年龄：18
  </script>

</head>
<body>

</body>
</html>

7.js中的事件

什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件

常用的事件

onload-加载完成事件：

页面加载完成之后，常用于做页面js代码初始化操作

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    //onload事件的方法
    function onloadFun(){
      alert('静态注册onload事件,所有代码');
    }

    //onload事件动态注册，是固定写法
    window.onload = function(){
      alert("动态注册的onload事件");
    }
  </script>
</head>
<!-- 静态注册onload事件
  onload事件是浏览器解析完页面之后就会自动触发的事件
  <body onload = "onloadFun()">
  -->
<body>
</body>
</html>

onclick-单击事件：

常用于按钮的点击响应操作

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    function onclickFun() {
      alert("静态注册onClick事件");//弹出框
    }

      //动态注册onclick事件
      window.onload = function() {
        //1.获取标签对象
        /*document是JavaScript语言提供的一个对象（文档）
      * get      //获取
      * Element  //元素(就是标签)
      * By       通过....由....经过.....
      * Id       属性id
      * getElementById通过id属性获取标签对象
      * */
        var btnObj = document.getElementById("btn01");
        //alert(btnObj);//[object HTMLButtonElement]
        //2.通过标签对象.事件名=function(){}
        btnObj.onclick = function(){
          alert("动态注册的onclick事件")//弹出框
        }
    }
  </script>
</head>
<body>
   <!--静态注册onClick事件-->
    <button onclick="onclickFun()">按钮1</button>
    <button id="btn01">按钮2</button>
</body>
</html>

onblur-失去焦点事件：

常用用于输入框失去焦点后验证其输入内容师是否合法

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    //静态注册失去焦点事件
    function onblurFun(){
      //console是控制台对象，是由JavaScript语言提供，专门用来向浏览器控制器打印输出，用于测试使用
      //log()是打印的方法
      console.log("静态注册失去焦点事件");
    }

    //动态注册onblur事件
    window.onload = function(){
      //1.获取标签对象
      var passwordObj = document.getElementById("password");//获取密码文本框对象
      //alert(passwordObj);
      //2.通过标签对象.事件名 = function(){};
      passwordObj.onblur = function(){//失去焦点事件
        console.log("动态注册失去焦点事件")//弹出框
      }
    }
  </script>
</head>
<body>
    用户名:<input type="text" onblur="onblurFun();"><br/>
    密密码:<input id="password" type="text"><br/>
</body>
</html>

onchange-内容发生改变事件：

常用于表单提交前，验证所有表单项是否合法

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    function onchangeFun(){
      alert("奖品已经领取成功，请在背包查收！！")
    }

    window.onload = function (){
      //1.获取标签对象
     var seleObj =  document.getElementById("sel01");
      //alert(seleObj);
      //2.通过标签对象.事件名=funciton()
      seleObj.onchange = function(){
        alert("防弹装备领取成功，请在背包查看！！")
      }
    }
  </script>
</head>
<body>
    请选择你要领取的枪械类型
    <!--静态注册onchange事件-->
    <select onchange="onchangeFun();">
      <option>--枪械类型--</option>
      <option>冲锋枪</option>
      <option>AK-47</option>
      <option>狙击枪</option>
      <option>迫击炮</option>
    </select>


    请选择你要领取的防弹装备
    <!--静态注册onchange事件-->
    <select id="sel01">
      <option>--防弹装备--</option>
      <option>普通防弹头</option>
      <option>普通防弹衣</option>
      <option>一级防弹头</option>
      <option>一级防弹衣</option>
    </select>
</body>
</html>

onsubmit-事件:

事件的注册又分为静态注册和动态注册两种：

什么是事件的注册（绑定）？

其实就是告诉浏览器，当事件响应要执行哪些操作代码，叫事件注册或事件绑定

静态注册事件：通过html标签的事件属性直接赋予事件响应后的代码，这种方式我们叫静态注册

动态注册事件：是指通过js代码得到标签的dom对象，然后再通过dom对象.事件名 = function = function(){}这种形式赋于事件响应后的代码，叫动态注册

动态注册基本步骤：

1.获取标签对象

2.标签对象.事件名 = function(){}

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type = "text/javascript">
    // 静态注册表提交事件
    function onsubmitFun(){
      //要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
      alert("静态注册表提交事件--发现不合法")
      return false;//阻止表单提交
    }

    window.onload = function(){
      //1.获取标签对象
      var formObj = document.getElementById("form01");
      //2.通过标签对象.事件名=function(){}
      formObj.onsubmit = function(){
        //要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
        alert("动态注册表单提交事件----发现不合法")
        return false;
      }
    }
  </script>
</head>
<body>
    <!-- return false 可以阻止 表单提交-->
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
      <input type="submit" value="静态注册"/>
    </form>
    <form action="http://localhost:8080" id = "form01">
      <input type="submit" value="动态注册"/>
    </form>
</body>
</html>

8.DOM模型 

DOM 全程是Document Object Model 文档对象模型

把文档中的标签，属性，文本，转换称为对象来管理

8.1Docuent对象

Document对象的理解

第一点：Document它管理了所有的HMTL文档内容

第二点：document它是一种树结构的文档，有层级关系

第三点：它让我们把所有的标签都对象化

第四点：我们可以通过document访问所有的标签对象

什么是对象化？？

举例：

有一个人有年龄：18岁性别：女，名字：张某某

我们要把这个人的信息化怎么办！

Class Person{

Private in age;

Private String sex;

Private String name;

}

html标签要对象化怎么办？

<body>

<div id=”div01”>div01</div>

</body>

模拟对象化，相当于：

class Dom{

Private String id       //id属性

Private String tagName; //表示标签名

Private Dom prentNode;     //父亲

Private List<Dom> children;  //孩子节点

Pirvate String innerHTML;   //起始标签和结束标签中间的内容

}

8.2Document对象中的方法介绍

document.getElementById(elementId)

通过标签的id属性查找标签dom对象，elementId是标签的id属性值

代码示例：

返回拥有指定id的第一个对象引用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
/*    需求:当用户点击了较验按钮,要获取输入框中的内容.然后验证其是否合法
    验证的规则是:必须由字母,数字,下划线组成,并且长度是5-12位.*/
    function onclickFun(){
    //1.当我们要操作一个标签的时候，一定要先获取这个标签对象
    var usernameObj = document.getElementById("username");//获取文本框对象
      //[object HTMLInputElement] 它就是dom对象
    var usernameText = usernameObj.value;
    var patt = /^\w{5,12}$/;
    /*
    * test()方法用于测试某个字符串，是不是匹配我的规则
    * 匹配就返回true,不匹配就返回false
    * */
      var usernameSpanObj = document.getElementById("usernameSpan");
      //innerHTML 表示起始标签和结束标签中的内容
      //innerHTML 这个属性可读、可写
      usernameSpanObj.innerHTML = "赋值";
    if(patt.test(usernameText)){
      //alert("用户名合法！");
      //usernameSpanObj.innerHTML = "用户名合法";
      usernameSpanObj.innerHTML ="<img src=\"right.png\" width=\"20\" height=\"20\"/>";
    }else{
      //alert("用户名不合法");
      //usernameSpanObj.innerHTML = "用户名不合法";
         usernameSpanObj.innerHTML ="<img src=\"wrong.png\" width=\"20\" height=\"20\"/>";
    }
}
  </script>
</head>
<body>
    用户名：<input type="text" id="username" value="wzg"/>
    <span id="usernameSpan" style="color: red">

    </span>
    <button onclick="onclickFun()">校验</button>
</body>
</html>

Document.getElementsByName(elementName)

通过标签的name属性查找标签dom对象，elementNmae标签的name属性值

代码示例：

返回带有指定名称的对象集合

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    //全选
    function  checkAll(){
      //让所有复选框都选中
      //document.getElementsByName();是根据 指定的name属性查询返回多个标签对象结合
      //这个集合跟数组一样
      //集合中每个元素都是dom对象
      //这个集合中的元素顺序是他们在html页面中从上到下的顺序
      var hobbies = document.getElementsByName("hobby");
      //checked表示复选框的选中状态。如果选中是true,不选中是false
      //checked,这个属性可读，可写
      for (var i =0; i<hobbies.length; i++){
             hobbies[i].checked = true;
      }
    }
    //全不选
    function checkNo(){
      var hobbies = document.getElementsByName("hobby")
      for (var i =0; i<hobbies.length; i++){//遍历所有复选框对象
        hobbies[i].checked = false;
      }
    }
    //反选
    function  checkReversion(){
      var hobbies = document.getElementsByName("hobby");//获取复选框对象
      for (var i=0; i < hobbies.length; i++){
        hobbies[i].checked = !hobbies[i].checked;//！取反操作符
      /*if(hobbies[i].checked){//判断是否选中
          hobbies[i].checked = false;//取反
        }else{//不选中
          hobbies[i].checked = true;//取反
        }*/
       }
    }
  </script>
</head>
<body>
    兴趣爱好：
    <input type="checkbox" name="hobby" value="cpp" checked="checked">C++
    <input type="checkbox" name="hobby" value="java" >Java
    <input type="checkbox" name="hobby" value="js">JavaScript
    <br/>
    <button onclick="checkAll()">全选</button>
    <button onclick="checkNo()">全不选</button>
    <button onclick="checkReversion()">反选</button>
</body>
</html>

document.getElementsByTagName(tagname)

通过标签名查找标签dom对象。Tagname是标签名

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    //全选
    function checkAll(){
      //document.getElementByTagName("input");是按照指定标签名进行查询并返回集合
      //这个集合的操作数组 一样
      //集合中都是dom对象
      //集合中元素顺序，是他们在html页面中从上到下的顺序
      var inputs = document.getElementsByTagName("input");

      for (var i=0; i<inputs.length; i++){
        inputs[i].checked = true;
      }
    }
  </script>
</head>
<body>
    兴趣爱爱好：
   <input type="checkbox" value="cpp" checked="checked">C++
   <input type="checkbox" value="java" >java
   <input type="checkbox" value="js">javaScript
   <br/>
    <button onclick="checkAll()">全选</button>
   </input>
</body>
</html>

Document.createElement(tagName)

方法，通过给定的标签名，创建一个标签对象。tagName是要创建的标签名

代码示例：

返回带有指定标签名的对象集合

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    window.onload = function(){
    //现在需要我们js代码来创建html标签，并显示在页面上
    //标签的内容就是：<div>今天，天气非常不错</div>>
     var divObj = document.createElement("div");//在内存中创建一个div标签
     divObj.innerHTML = "今天，天气非常不错";//<div>今天，天气非常不错</div>，但还只是在内存中
     document.body.appendChild(divObj);//将divObj添加到body中
    }
  </script>
</head>
<body>

</body>
</html>

注：

document对象的三个查询方法，如果id属性，优先使用getElementById方法来进行查询

如果没有id属性，则优先使用getElementsByName方法来进行查询

如果没有id属性和name属性都没有最后再按标签名查getElementsByTagName

以上三个方法，一定在页面加载完成之后执行，才能查询到标签对象

8.3结点的属常用属性和方法

节点就是标签对象

方法：

通过具体的元素结点调用

getElementsByTagNmae()

方法，获取当前结点的的指定标签名孩子节点

appendChild(oChildNode)

方法，可以添加一个子节点，oChidNode是添加的孩子节点

属性名称描述
childNodes获取当前节点的所有子节点
firstChild获取当前节点的第一个子节点
lastChild获取当前节点的最后一个子节点
parentNode获取当前节点的父节点
nextSibling获取当前节点的下一个兄弟节点
previousSibling获取当前节点的上一个兄弟节点
className用于获取或设置标签的class属性值
innerHTML表示获取/设置起始标签和结束标签中的内容
innerText表示获取/设置起始标签和结束标签中的纯文本内容（不包括HTML标签）

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

空白_d

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值