【前端基础】querySelector

// query selector
var header = document.querySelector('#main-header');
header.style.boarderBottom = "solid 4px #ccc";var input = document.querySelector('input');
input.value = "Hello World"; // 直接修改input框的数值
var submit = document.querySelector('input[type="submit"]')
submit.value = "SEND";var item = document.querySelector('.list-group-item');
item.style.color = 'red';var item = document.querySelector('.list-group-item:last-child');
item.style.color = 'blue';var item = document.querySelector('.list-group-item:nth-child(2)')
item.style.color = "coral";/* query selector all */
var titles = document.querySelectorAll('.title');
console.log(titles);
titles[0].textContent = "Hello";
titles[1].textContent = "World";var odd = document.querySelectorAll('li:nth-child(odd)');
var even = document.querySelectorAll('li:nth-child(even)');// odd.style.backgroundColor = 'gray';
console.log(odd);
odd.forEach(function(item){item.style.backgroundColor = "#f4f4f4";
});even.forEach(function(item) {item.style.backgroundColor = '#ccc';
});

代码库。

END.

【前端基础】querySelector相关推荐

jquery function_前端基础进阶（十三）详细图解jQuery扩展jQuery插件
UI 鉴赏早几年学习前端,大家都非常热衷于研究jQuery源码. 我至今还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,"原来JavaScript居然可以 ...
前端基础进阶（七）：函数与函数式编程
纵观JavaScript中所有必须需要掌握的重点知识中,函数是我们在初学的时候最容易忽视的一个知识点.在学习的过程中,可能会有很多人.很多文章告诉你面向对象很重要,原型很重要,可是却很少有人告诉你,面 ...
前端基础学习——JavaScript之BOM模型与DOM模型
前面还有JavaScript基础介绍,有兴趣的朋友可以前往查看前端基础学习--带你夯实JavaScript基础目录一. BOM模型 1.1 BOM模型与DOM模型示意图: 1.2 浏览器窗口中的B ...
长篇总结之JavaScript，巩固前端基础
文 / 掘金大家好,我是魔王哪吒,话不多说,今天带来的是一篇<长篇总结之JavaScript,巩固前端基础>文章,欢迎大家喜欢. 前言什么是JavaScript JavaScript是 ...
html表格联动,html前端基础：table和select操作
html前端基础:table和select操作发布时间:2020-05-13 09:58:10 来源:亿速云阅读:196 作者:Leah 这篇文章主要为大家详细介绍html前端基础中有关table ...
element ui 图片控件排序_JAVA全栈面试前端基础之四 Vue+Element框架快速开发
本文主要包括以下4个内容什么是ElementUI Vue 中引入ElementUI Vue+elementUI构建后台管理系统开源项目推荐 1.什么是ElementUI 官网:https://el ...
boost log 能不能循环覆盖_前端基础进阶（十四）：深入核心，详解事件循环机制...
Event Loop JavaScript的学习零散而庞杂,很多时候我们学到了一些东西,但是却没办法感受到进步!甚至过了不久,就把学到的东西给忘了.为了解决自己的这个困扰,在学习的过程中,我一直在试图 ...
gif透明背景动画_前端基础系列之bmp、jpg、png、gif、svg常用图片格式浅谈（二）...
IT客栈作者:大腰子 bmp.jpg.png.gif.svg常用图片格式之前为大家介绍了几种WEB前端常用的图片格式,对比了它们的特点,参见<前端基础系列之bmp.jpg.png.gif.s ...
前端基础知识整理汇总（中）
前端基础知识整理汇总(中) Call, bind, apply实现 // call Function.prototype.myCall = function (context) {context = ...
前端基础知识整理汇总（上）
前端基础知识整理汇总(上) HTML页面的生命周期 HTML页面的生命周期有以下三个重要事件: 1.DOMContentLoaded -- 浏览器已经完全加载了 HTML,DOM 树已经构建完毕,但是 ...

【前端基础】querySelector

【前端基础】querySelector相关推荐

最新文章

热门文章