<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js新增选择器</title>
</head>
<body>
<h3>标题2</h3>
    <h2>标题1</h2>
    
    <ul id="u1">
        <li >列表项1</li>
        <li class="ll">列表项</li>
        <li class="bb">列表项</li>
        <li class="ll">列表项</li>
        <li class="ll">
            <p>u1里面的段落</p>
        </li>
    </ul>
<ul id="u2">
<li>列表项1</li>
<li class="bb">列表项2</li>
<li class="bb">列表项3</li>
<li class="bb">列表项4</li>
<li >列表项ls</li>
</ul>
<script>
    function myfun1(){
// document.querySelector("li").style.backgroundColor="red";
// document.querySelector("#u2").style.backgroundColor="red";
document.querySelector(".ll").style.backgroundColor="blue";
document.querySelector(".bb").style.backgroundColor="red";
    }
    function myfun2(){
document.querySelector("#u2>li+li+li").style.backgroundColor="green";
document.querySelector("#u1 li p").style.backgroundColor="green";
    }
        function myfun3(){

document.querySelector("h2,h3").style.backgroundColor="green";
    }
function myfun4(){
var x=document.querySelectorAll("#u2 .bb");
x[1].style.backgroundColor="orange";
// alert(x.length);
for (var i = 0; i < x.length; i++) {
    x[i].style.backgroundColor="green";
}
    }

function myfun5(){
var u1=document.getElementById('u1');
// var arr=document.querySelectorAll("#u1>li");
var arr=u1.getElementsByTagName('li');
alert(arr.length);
var newli=document.createElement("li");
u1.appendChild(newli);
newli.innerHTML="新增加的项目";
alert(arr.length);
    }

function myfun6(){
var x=document.getElementsByClassName("bb");
for (var i = 0; i < x.length; i++) {
    x[i].style.backgroundColor="green";
}
    }

myfun6();
</script>
</body>
</html>

html5 javascript 新增加的高级选择器更精准更实用的更多相关文章

  1. Karmada v1.3：更优雅 更精准 更高效

    摘要:最新发布的1.3版本中,Karmada重新设计了应用跨集群故障迁移功能,实现了基于污点的故障驱逐机制,并提供平滑的故障迁移过程,可以有效保障服务迁移过程的连续性(不断服). 本文分享自华为云社区 ...

  2. HTML5中新增加的结构元素、网页元素和全局属性

    HTML5新增的结构元素(新增的都是块元素,独占一行) 1) header 定义了文档的头部区域 <header> <h1>网站标题<h1> </header ...

  3. HTML5中新增加Input 的种类

    查询文本框 <input type="search"> 数字文本框 any 代表不设置 <input type="number" max=&q ...

  4. HTML5每日一练之input新增加的六种时间类型应用

    今天介绍一下input在HTML5中新增加的时间类型的应用,与昨天的练习一样,如果在以下这几种输入框中输入的格式不正确,也是无法提交的. 注意:此种类型的input在Opera10+中效果为佳,Chr ...

  5. JQuery_高级选择器

    在很多特殊的元素上,比如父子关系的元素,兄弟关系的元素,特殊属性的元素等等. 在早期 CSS 的使用上,由于 IE6 等低版本浏览器不支持,所以这些高级选择器的使用也不具备普遍性,但随着 jQuery ...

  6. css3新增加的选择器

    css3新增加的选择器 一.属性选择器: E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字 ...

  7. HTML5部分新标签属性及DOM扩展元素

    HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. ...

  8. HTML语义化：HTML5的新标签及IE5.5~9的部分兼容方案

    一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.t ...

  9. 学习HTML5之新特性标签一览（详细）

    HTML5又2008年诞生,HTML5大致可以等同于=html+css3+javascriptapi.... so --->支持css3强大的选择器和动画以及javascript的新的函数 先来 ...

随机推荐

  1. Laravel-mix 中文文档

    镜像地址 : https://segmentfault.com/a/1190000015049847原文地址: Laravel Mix Docs   概览   基本示例 larave-mix 是位于w ...

  2. 5迪米特法则LoD

    一.什么是迪米特法则 迪米特法则(Law of Demeter )又叫做最少知识 原则,也就是说,一个对象应当对其他对象尽可 能少的了解. 迪米特法则最初是用来作为面向对象的系统设 计风格的一种法则, ...

  3. Appium Server

    原理 我的是配置以下直接打开 报这个错是没按装apk { "platformName": "Android", "platformVersion&qu ...

  4. linux应用以及常用命令

    各目录作用"/" :Linux文件系统的入口.也是最高一级的目录."/bin":基本系统所需要的命令,功能和"/usr/bin"类似,这个目 ...

  5. hibernate配置二级缓存

    ehcache.xml: < ?xml version=”1.0″ encoding=”UTF-8″?>< !– defaultCache节点为缺省的缓存策略 maxElements ...

  6. Druid连接池（一）

    介绍 Druid首先是一个数据库连接池,但它不仅仅是一个数据库连接池,它还包含一个ProxyDriver,一系列内置的JDBC组件库,一个SQL Parser. 支持的数据库 Druid支持所有JDB ...

  7. oracle sqlplus命令详解

    涉及到的知识要点 a.带有一个&的替换变量的用法b.带有两个&的替换变量用法c.define命令用法d.accept命令用法e.定制SQL*Plus环境f.在glogin.sql文件中 ...

  8. OOD之问题空间到解空间—附FP的建模

    通常会被问到,什么事OOD,然后大部分人期待的答案比较死板,继承.封装.多态!懂这个的人多的去了,有什么好问?回答出来的人是否拿着Java又去做一些面向过程的勾当? 计算机革命起源于机器,因此编程语言 ...

  9. properties文件读取工具类

    项目中防止硬编码,经常会将一些与业务相关的数据存在properties文件中,根据不同的key加载不同的数据,所以就会有读取properties文件的东西,这篇文章仅为了以后copy方便写的. 1.添 ...

  10. swust oj 1068

    图的按录入顺序深度优先搜索     5000(ms)         10000(kb)   Tags: 深度优先     图的深度优先搜索类似于树的先根遍历,即从某个结点开始,先访问该结点, 然后深 ...