js之获取元素（获取DOM节点），定义变量

一、.获取 DOM 节点

• element.getElementById
• element.getElementByName
• element.getElementsByTagName
• element.getElementsByClassName
• element.querySelector
• element.querySelectorAll

1.element.getElementById   

通过id获取元素

通过id获取到的元素是唯一的，id的名字是不能重复的

(element.getElementById 是指去 element 节点下根据 id 查找子节点。

通常在程序开始前，没有主动去获取过节点，这个时候会使用根节点 document 来进行查找)

 var box1 = document.getElementById('box1'); 

2.H5中新增加的 querySelector

(文档对象模型 Document 引用的 querySelector () 方法返回文档中与指定选择器或选择器组匹配的第一个 html 元素 Element 。 如果找不到匹配项，则返回 null 。)

querySelector只能获取页面中的第一个元素，括号中可以使用选择器

通俗理解：就是样式中的选择器怎么写，括号中就怎么写

/*   var box2 = document.querySelector('div');
var p = document.querySelector('p');

console.log(box2);
console.log(p); */


var box2 = document.querySelector('.box1>a');
var p = document.querySelector('p');

console.log(box2);
console.log(p);

 上述的两种元素的获取方式，只能获取一个元素，注意两者之间的区别

3.H5中新增加的querySelectorAll

(返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。)

querySelectorAll是获取多个元素，形成一个数组

var box2 = document.querySelectorAll('.box1 a');
console.log(box2);

4、通过class获取元素element.getElementsByClassName

(返回一个包含了所有指定类名的子元素的类数组对象。)

class获取元素也是获取到多个，形成一个数组

var box1 = document.getElementsByClassName('box1')
console.log(box1);

5.通过标签名获取元素

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

标签名获取元素也是获取到多个，形成一个数组

var box2 = document.getElementsByTagName('div')
console.log(box2);

总结：

1、id只能获取到一个，就有唯一性

2、querySelector只能获取到页面中首次出现的元素，可以使用选择器，比如类名要加点

3、querySelectorAll能获取到页面中的多个元素，可以使用选择器，比如类名要加点

4、getElementsByClassName能获取到页面中的多个元素，比如类名不加点

5、getElementsByTagName能获取到页面中的多个元素，比如类名不加点

 6. element.getElementByName

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

<form>
  <div>
    <label>
      <input type="checkbox" name="skill" checked="checked" value="JavaScript"> JavaScript
    </label>

    <label>
      <input type="checkbox" name="skill" value="c++"> C++
    </label>

    <label>
      <input type="checkbox" name="skill" checked="checked" value="Java"> Java
    </label>
  </div>
</form>
<div id="result"></div>

<script>
  var checkboxes = document.getElementsByName('skill');

  var skills = [];

  checkboxes.forEach(function(checkbox) {
    if (checkbox.getAttribute('checked')) {
      skills.push(checkbox.value);
    }
  });

document.getElementById('result').innerHTML = '选中的技能：' + skills.join('、');
</script>

7、获取后代元素

// 获取后代元素
var box1 = document.querySelectorAll('div a') 

// className
var box2 = document.getElementsByClassName('box1')[0]
var a = box2.getElementsByClassName('a')

// tagName
var box3 = document.getElementsByTagName('div')[0]
var a1 = box3.getElementsByTagName('a');
console.log(box1, box2, box3);
console.log(a1);

二、变量

变量就是存储值的一个容器

/* 
a就把 10 这个值 存储到 变量 a 中 
使用 10 ，就可以使用 变量 a 来代替 10
*/
var a = 10;
console.log(a * 2);

变量命名的规则：

• 变量名必须是字母、下划线、$开头
• 变量名必须是字母、下划线、$、数字组成
• 遵循驼峰命名法
• 要有语义化
• 不能使用关键字个保留字

var a = 10 
var _a = 20
var $a = 30 
var num2 = 90
console.log(a, _a, $a);

// 驼峰命名 -- 变量名由两个单词或者两个以上的单词构成，从第二个单词开始，首字母要大写
// 语义化
var userName = 'zahngsan'
var passWord = '123456'; 
console.log(userName, passWord);

// 不能使用关键字和保留字(现在不是关键字 将来会成为关键字的字)
var var = 90  // 错误 
var id = 80 // id是关键字 
var class = 100 // class是保留字

变量的使用注意事项：

1、变量声明必须使用var关键字

/* 
没有使用var关键字，是一个全局变量（在任何位置都可以使用）
注意：虽然是可以使用的，但是是不符合程序的设计标注的
不管这个变量参不参与计算，都会占用内存，会造成内存浪费，严重的会造成内存溢出
*/

a = 10;  
console.log(a);

2、变量必须先声明后使用

console.log(a * 2); // undefined 没有值   --- NaN
var a = 10;  

3.变量名不能重复(在这节课中)

后面的会覆盖前面的，导致值丢失

var a = 10; 
var a = 20; 
console.log(a); // 20

4、变量的声明方式

• 一次性声明一个变量并赋值
• 一次性声明多个变量，并同时赋值，每个变量之间使用逗号隔开
• 一次性声明多个变量，并分开赋值

// - 一次性声明一个变量并赋值
var a = 10;
// - 一次性声明多个变量，并同时赋值，每个变量之间使用逗号隔开
var a = 10, b = 20, c= 30;
// - 一次性声明多个变量，并分开赋值
var num1, num2,num3;
num1 = 90
num2 = 100;
num3 = 200