js之获取元素(获取DOM节点),定义变量
2、querySelector只能获取到页面中首次出现的元素,可以使用选择器,比如类名要加点。3、querySelectorAll能获取到页面中的多个元素,可以使用选择器,比如类名要加点。4、getElementsByClassName能获取到页面中的多个元素,比如类名不加点。5、getElementsByTagName能获取到页面中的多个元素,比如类名不加点。上述的两种元素的获取方式,只能获取一
一、.获取 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
更多推荐
所有评论(0)