1、通过ByTagName()来获取元素
var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
或者
var oUl = document.getElementsByTagName('ul');
var aLi = oUl[0].getElementsByTagName('li');
// aLi => [li,li,li] 元素的集合
alert(aLi.length) // 3
// 在使用ByTagName() 的时候,必须加上:[];
aLi[0] // 第一个'li'
区别:ById()是获取一个元素、ByTagName()是获取一堆元素的集合
2、for循环
循环语句:就是重复执行一段代码指代遇见某个指令时结束该循环。
语法
for(循环变量的初始值;最大值;步长){
循环体...
}
小案例:
for(var i = 3; i <= 15; i += 4){
console.log("这是第" + i + "输出");
}
2.1、for循环の计算顺序:
2.2、for循环生成坐标
2.3、for循环遍历2维数组、嵌套元素
for循环可以嵌套for循环,两个变量不可以相同
var arr = [[1,2,3,4],[5,6],[7,8,9]];
alert(arr[0][0]) // 1
alert(arr[2][1]) // 8
// 如果我要是想获取说有元素呢 1,2...9
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr[i].length; j++) {
alert(arr[i][j]) // 1 ~ 9 alert 弹 9次
}
}
3、cssText文本格式化
cssText 的本质就是设置 HTML 元素的 style 属性值。
cssText 写法
document.getElementById("d1").style.cssText = "color:red; font-size:13px;";
例题3
<html lang="en">
<head>
<meta charset="UTF-8">
<style media="screen">
#div1 { width: 100px; height: 100px; border: 1px solid #333; } /*嵌入式css样式。*/
</style>
</head>
<body>
<div id="div1"></div> <!-- 内联式css样式。 -->
<input id="btn1" type="button" value="按钮">
<script type="text/javascript">
var oDiv = document.getElementById('div1');
var oBtn = document.getElementById('btn1');
oDiv.onclick = function () {
// oDiv.style.width = '200px';
// oDiv.style.height = '200px';
oDiv.style.cssText = 'width:200px; height:200px;'; // 相当于在div身上加内联式css样式。
}
oBtn.onclick = function () {
oDiv.style.cssText = ''; // 虽然这里什么都没写,但是会遵循嵌入式css样式。
}
</script>
</body></html>
3.1、CSS样式分为:内联式css样式、嵌入式css样式、外部式css样式。
(1)内联式css样式。
<p style="color:red">这里文字是红色。</p>
(2)嵌入式css样式。
<style type="text/css">
span{color:red;}
</style>
(3)外部式css样式。
<link href="style.css" rel="stylesheet" type="text/css" />
例题4:用JS生成一组新闻及思路分析
知识点:数组 + 自定义变量onOff + if语句 + for循环
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<input id="btn" type="button" value="自动生成5条新闻">
<ul id="list"></ul>
<script type="text/javascript">
var arr = [
'中纪委机关报:扫黑除恶打准"七寸"即打掉"保护伞"',
'中东部“冰冻模式”仍将持续一周 将影响春运交通',
'科技部:2025年将布局近30家农业高新技术产业示范区',
'关注基层干部队伍建设:全流程规范,选人用人严起来',
'一批新规2月施行 8项惠民措施便利办证出行'
];
var oBtn = document.getElementById('btn');
var oUl = document.getElementById('list');
var onOff = true;
oBtn.onclick = function () {
if (onOff) {
for (var i = 0; i < arr.length; i++) {
oUl.innerHTML += '<li>'+ arr[i] +'</li>';
}
onOff = false;
}
}
</script>
</body></html>