小结

document对象，根据id获取标签对象
document.getElementById(ID值)document对象，根据标签获取对象们
document.getElementsByTagName(标签名)for循环语句，写一个for循环，在控制台输出0到9之间的值
for(var i=0;i<10;i++){console.log(i);
}while循环，在控制台输出0到9之间的值
while(i<10){console.log(i);i++;
}

for循环

for（定义初始值；定义条件；初始值变化）{循环代码}js循环对比py循环
python中while循环的条件：
1，循环外要有初始条件
2，要有循环的判断条件
3，循环内部要对判断条件进行修改

while循环

外部定义初始值while（条件）{执行代码初始值修改
}

获取标签的方法新增

之前我们只用

document.getElementById(strID)

强调

此法获得的标签是一个成员对象

它是一个对象，而不是一个容器

其它的方式，获取的是多个成员对象

即数组包成员对象

认识新的标签获取方法

提示英文

带s带表复数

apple 一个苹果

two apples 两个苹果

新的获取标签方法

document.getElementsByTagName("li")

通过li标签来获取，获取多个元素

注意

此法获取的是一个集合（数组）

如果需要操作具体的每一个标签对象

需要进行遍历

<script>window.onload = function () {var oLi1 = document.getElementById("list1")var oLis = document.getElementsByTagName("li")// alert(oLis) // [第一个li对象，第二个li对象]// alert(oLis.length)var iLen = oLis.lengthfor(var i=0;i<iLen;i++){var oLi = oLis[i]oLi.style.backgroundColor = "red";oLi.style.width = 300;oLi.style.height = 100;oLi.style.marginBottom = 5;oLi.style.border = "1px solid black";oLi.style.listStyle = "none";}}
</script><div ><ul><li id="list1">标签1</li><li>标签2</li><li>标签3</li><li>标签4</li><li>标签5</li><li>标签6</li></ul>
</div>

效果

小结常用的标签获取方式

getElementById（strID名称）

getElementsByTagName（str标签名称）

getElementsByClassName（str类的名称）

注意

只有通过id获取的，是标签对象，是可以直接操作的

其它Elements方式拿的都是数组的形式，标签对象在数组里面，需要通过遍历或者通过数组【下标】来获取到标签对象

只修改ol标签中的li元素的样式

思路

先锁定ol标签对象

然后再向下找到所有的li标签

知识点

对象.getElementsByTagName（标签名称）

<script>window.onload = function () {var oOlist = document.getElementById("olist")  //<ol>// document文档对象的元素（通过ID获取的）var oLis = oOlist.getElementsByTagName("li")// oOlist对象的元素(通过li标签获取到的)var iLen = oLis.lengthfor(var i=0;i<iLen;i++){var oLi = oLis[i]oLi.style.border="1px solid green"}}
</script><div ><ul><li id="list1">标签1</li><li id="list1">标签2</li></ul><ol id="olist"><li>ol1</li><li>ol2</li><li>ol3</li></ol>
</div>

隔行换色

思路

判断行数，如果是偶数行，就给样式，否则不变。

效果

代码

<style>ol li{width:800px;height: 30px;border:1px solid black;margin-top:-1px;list-style: none;}
</style><script>window.onload = function () {var oOlist = document.getElementById("olist")  //<ol>// document文档对象的元素（通过ID获取的）var oLis = oOlist.getElementsByTagName("li")// oOlist对象的元素(通过li标签获取到的)var iLen = oLis.lengthfor(var i=0;i<iLen;i++){var oLi = oLis[i];if(i%2 != 0){oLi.style.backgroundColor = "pink";}}}
</script><div ><ul><li id="list1">标签1</li><li id="list1">标签2</li></ul><ol id="olist"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ol>
</div>

javascripts-for循环-while循环-标签的选择与操作相关推荐

js循环解析html标签,riot.js教程【六】循环、HTML元素标签
循环可以通过each属性来达到标签循环,如下: { title } this.items = [ { title: 'First item', done: true }, { title: 'Sec ...
linux shell 流程控制（条件if,循环【for,while】,选择【case】语句实例 --转载
http://www.cnblogs.com/chengmo/archive/2010/10/14/1851434.html nux shell有一套自己的流程控制语句,其中包括条件语句(if),循环 ...
linux shell 流程控制（条件if,循环【for,while】,选择【case】语句实例
linux shell有一套自己的流程控制语句,其中包括条件语句(if),循环语句(for,while),选择语句(case).下面我将通过例子介绍下,各个语句使用方法. 一.shell条件语句(if ...
thinkphp6 循环视图_ThinkPHP模板循环输出Volist标签用法实例详解
本文实例讲述了ThinkPHP模板循环输出Volist标签用法.分享给大家供大家参考,具体如下: volist 标签用于在模板中循环输出数据集或者多维数组. volist 标签在模块操作中,sele ...
java 循环标记_Java循环中使用标签
java中的标号是用于的continue和break语句的,请看下面的程序: class xxx { outer: for(;;) { inner: for(;;) { xxxx; xxxxx; co ...
使用js设定标签属性，利用循环遍历给标签添加事件
设定标签属性给标签添加属性语法标签对象.setAttribute('属性名称' , 属性值); 一次只能定义一个属性,如果要定义多个属性,要执行多次.例如: 标签对象.setAttribute( ...
利用循环栏目导航标签及自定义页面制作帝国CMS网站地图
网站地图,又称站点地图,它就是一个页面,上面放置了网站上所有页面的链接.也简洁地表现了网站栏目关系,一般就包含顶级栏目和二级栏目.搜索引擎蜘蛛非常喜欢网站地图.在帝国CMS中没有生成网站地图的功能,所 ...
java 如何循环执行一个对象_养猪场循环生态循环模式及其效益分析，当前牧草成为生态循环猪场效益更好的选择，如何打造一个现代生态循环的高效益猪场？...
养猪场循环生态循环模式及其效益分析 2010年前的推广模式参考随着国民经济的快速发展,人民的生活水平在不断提高,民众对环境的要求也越来越高,包括人文环境和自然环境.同时,农村地区的环境治理工作也逐渐 ...
深度学习入门（五十六）循环神经网络——循环神经网络RNN
深度学习入门(五十六)循环神经网络--循环神经网络RNN 前言循环神经网络--循环神经网络RNN 课件潜变量自回归模型循环神经网络使用循环神经网络的语言模型困惑度(perplexity) 梯 ...

javascripts-for循环-while循环-标签的选择与操作

小结