<!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. MyBatis Plus:No qualifying bean of type 'com.baomidou.mybatisplus.mapper.BaseMapper<?>' available: expected single matching bean but found 4

    场景: 应用MyBatis Plus 和通用Mapper 继承自ServiceImpl实现对Service里的方法进行包装再处理. public interface IServiceBase2< ...

  2. webpack模块化原理

    https://segmentfault.com/a/1190000010349749     webpack模块化原理-commonjs https://segmentfault.com/a/119 ...

  3. [原][openstack-pike][controller node][issue-2][glance] Could not parse rfc1738 URL from string 'mysql+pymysql=http://glance:glance@controller/glance'

    问题点 在手动上传镜像的时候:出现错误 Could not parse rfc1738 URL from string 'mysql+pymysql=http://glance:glance@cont ...

  4. java 的访问权限控制

    package test06; public class PermissionModel { private int age; public String name; public int getAg ...

  5. 实现Ajax异步的layui分页

    https://www.e-learn.cn/content/java/1084522

  6. 树pao(雾)

    今天难得睡醒了,大概睡了13个小时,打算今晚把树剖学了. 嘿嘿嘿雀魂真好玩,这篇文章咕了 有学上了,找到了水平远高于我的队友,好开心的说,,, 卡空间感觉治不了了... 板子题是洛谷P3384 实在不 ...

  7. oracle 自定义比较函数

    1>自定义比较函数,targetVal的值为字符串,例如:“>=90”,"2~8"等范围格式,dataVal值为字符串. create or replace funct ...

  8. web端MSF搭建

    去购买一个廉价VPS  阿里X/tx学生服务器然后选择Ubuntu系统http://jingyan.baidu.com/article/2c8c281dabacad0008252aa6.html安装M ...

  9. 19、AJAX

    1.Ajax的概念 Ajax是一种在无需重新加载整个网页(刷新页面)的情况下,能够更新部分网页的技术. Ajax的全称是AsynchronousJavaScript and XML,即异步JavaSc ...

  10. vue-router 进阶

    简单回顾一下vue基础部分 动态路由匹配 路由配置方法 export default new Router({ routes: [ { path: '/router01/:name', name: ' ...