html5 dom操作api,17 HTML5 DOM获取元素.html

Document

• 第1个li
• 第2个li
• 第3个li
• 第4个li

• 我不是段落

  我是段落

// document.getElementById(id) 获取一个元素

// document.getElementsByTagName("li") 获取 某类 标签元素 伪数组

// document.getElementsByName(name) 获取 名字元素 伪数组

// html5 新增的 获取元素 document.querySelector(选择器);

// query 查询 selector 选择器

// 选择器 标签 类 id 后代 子代 ...

//1. querySelector 类似于 jquery $("li")[0] 但是只选取第一个符合条件的元素

// var li = document.querySelector("li"); 里面放的是标签选择器

// var li = document.querySelector(".demo"); jquery $(".demo")[0] 里面放的是类选择器

// var li = document.querySelector(".demo p"); jquery $(".demo p")[0] 里面放的是后代选择器

// console.log(li);

// li.style.color = "red";

// 2. document.querySelectorAll("选择器") 选择所有的 $() 但是只能选取 得到一个伪数组

//

//var lis = document.querySelectorAll("li");

var lis = document.querySelectorAll(".demo");

// console.log(lis);

//lis.style.color = "red"; 此时得到的是一个伪数组 里面包含所有的li getElementsByTagName("li")

// 如果想要 操作里面的所有元素 必须遍历

for(var i = 0 ;i< lis.length; i++) {

lis[i].style.color = "red";

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史