最近写了一个员工管理作业,暴露了一些问题就是。

JS的查找标签的时候,要确定返回的是DOM对象还是数组,document对象可以是任意dom对象,将查询范围限制在当前dom对象,

1、直接查找标签

document.getElementsByTagName("标签名")
document.getElementById("id值")
document.getElementsByClassName("类名")

2、导航查找标签

elementNode.parentElement // 父节点标签元素
elementNode.children // 所有子标签
elementNode.firstElementChild // 第一个子标签元素
elementNode.lastElementChild // 最后一个子标签元素
elementNode.nextElementSibling // 下一个兄弟标签元素
elementNode.previousElementSibling // 上一个兄弟标签元素

3、CSS选择查找器

document.querySelector("css选择器") //根据css选择符来获取查找到的第一个元素,返回标签对象(dom对象)
document.querySelectorAll("css选择器"); // 根据css选择符来获取查找到的所有元素,返回数组

尤其注意在返回多个DOM对象,后形成数组后,还会返回HTMLCollection,这在循环的时候需要特别注意。

而在DOM对象(document Object Model 文档对象模型)下,每个部分都是节点,例如元素节点、属性节点等,DOM 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

 

拿到这些元素节点后,我们可以对这些节点进行绑定事件

1、静态绑定:直接把事件写在标签元素中。

一般会直接调用对应的函数,例如

<div id="div" onclick="foo(this)">click</div>

<script>
    function foo(self){           // 形参不能是this;
        console.log("foo函数");
        console.log(self);   
    }
</script>

2、动态绑定:在js中通过代码获取元素对象,然后给这个对象进行后续绑定。一般会用到匿名函数。

<p id="i1">试一试!</p>

<script>

    var ele=document.getElementById("i1");

    ele.onclick=function(){
        console.log("ok");
        console.log(this);    // this直接用
    };

</script>

当然绑定事件不止这些,例如:

1、onload事件  

2、onsubmit事件  

3、onchange事件  

4、onmouse事件  

5、onkey事件  

6、onfocus事件与onblur事件

 拿到标签、绑定事件,我们会进行操作标签,一般有文本操作、value操作(只限input、select、textarea标签)、CSS的样式操作、属性操作等。

当然JS里面还有一些基础语法会经常用到,例如

1、最基础的变量声明:

// 方式1 先声明再赋值
var 变量名;   // 声明的变量如果没有进行赋值,或者没有被定义的变量,值默认是undefined
变量名 = 变量值;
// 方式2 声明并赋值
var 变量名 = 变量值;
// 方式3 一行可以声明多个变量.并且可以是不同类型
var name="yuan", age=20, job="lecturer";

2、数据类型以及数据类型之间的转换,这里就简单放一些,注意JS也会有时会自动转换,且JS的数据类型有空值(Undefined和Null)。

// 1. 转换数据为数值类型
// parseInt     把数据转换成整数
// parseFloat   把数据转换成小数
// Number       把数据转换成数值
// 2. 转换数据为字符串
// 变量.toString()
// String(数据)
// 3. 转换数据成布尔类型
// Boolean()

3、流程控制语句,则分为if分支语句和switch语句

if(条件1){
     // 条件1为true时,执行的代码
   }else if(条件2){
     // 条件2为true时,执行的代码
   
   }....
   
   }else{
     // 上述条件都不成立的时候,执行的代码
   }


switch(条件){
      case 结果1:
           满足条件执行的结果是结果1时,执行这里的代码..
           break;
      case 结果2:
             满足条件执行的结果是结果2时,执行这里的代码..
             break;
      .....
      default:
           条件和上述所有结果都不相等时,则执行这里的代码
   }

4、还有JS的Object对象,多用于应用程序之间存储和传输数据。

var person = {
                name : "alvin",
                age : 18
             };

Object可以通过. 和 []来访问。

console.log(person["age"]);
console.log(person.age)

5、JS的function对象

// 函数的定义方式1
function 函数名 (参数){
    函数体;
    return 返回值;
}

// 函数的定义方式2
用 Function 类直接创建函数的语法如下:
var 函数名 = new Function("参数1","参数n","function_body");

虽然由于字符串的关系,第二种形式写起来有些困难,但有助于理解函数只不过是一种引用类型,它们的行为与用 Function 类明确创建的函数行为是相同的。

还有函数调用、函数参数、返回值等,JS预编译等这里就不一一细讲了。

另外放一个JS预编译面试题,有空的时候可以多回顾一下。

<script>
var num3 = 10;
function func3(){
    console.log(num3); 
    var num3 = 20;       
}
func3();
console.log(num3); 
</script>

答案为:undefined,10

今天就写在这里,最后贴上自己的javaScript的课程总结

javascript快速查找 js查找指定标签_变量名