1质况、通過(guò)ByTagName()來(lái)獲取元素
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() 的時(shí)候囤捻，必須加上：[];
aLi[0] // 第一個(gè)'li'
區(qū)別：ById()是獲取一個(gè)元素视哑、ByTagName()是獲取一堆元素的集合
2、for循環(huán)
循環(huán)語(yǔ)句：就是重復(fù)執(zhí)行一段代碼指代遇見(jiàn)某個(gè)指令時(shí)結(jié)束該循環(huán)。
語(yǔ)法
for（循環(huán)變量的初始值薇溃；最大值琉用；步長(zhǎng)）{
? ????? ? ? ? 循環(huán)體...
}
小案例：
for(var i = 3; i <= 15; i += 4){
console.log("這是第" + i + "輸出");
}
2.1、for循環(huán)の計(jì)算順序：
20171201135410029.jpeg
2.2浅浮、for循環(huán)生成坐標(biāo)
2.3专执、for循環(huán)遍歷2維數(shù)組桐腌、嵌套元素
for循環(huán)可以嵌套for循環(huán)凿叠，兩個(gè)變量不可以相同
var arr = [[1,2,3,4],[5,6],[7,8,9]];
alert(arr[0][0]) // 1
alert(arr[2][1]) // 8
// 如果我要是想獲取說(shuō)有元素呢 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 的本質(zhì)就是設(shè)置 HTML 元素的 style 屬性值里伯。
cssText 寫(xiě)法
document.getElementById("d1").style.cssText = "color:red; font-size:13px;";
例題3
WechatIMG210.jpg
<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> <!-- 內(nèi)聯(lián)式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;'; // 相當(dāng)于在div身上加內(nèi)聯(lián)式css樣式弦蹂。
}
oBtn.onclick = function () {
oDiv.style.cssText = ''; // 雖然這里什么都沒(méi)寫(xiě)，但是會(huì)遵循嵌入式css樣式强窖。
}
</script>
</body></html>
3.1凸椿、CSS樣式分為：內(nèi)聯(lián)式css樣式、嵌入式css樣式翅溺、外部式css樣式脑漫。
（1）內(nèi)聯(lián)式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生成一組新聞及思路分析
知識(shí)點(diǎn)：數(shù)組 + 自定義變量onOff + if語(yǔ)句 + for循環(huán)
WechatIMG211.jpg
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<input id="btn" type="button" value="自動(dòng)生成5條新聞">
<ul id="list"></ul>
<script type="text/javascript">
var arr = [
'中紀(jì)委機(jī)關(guān)報(bào):掃黑除惡打準(zhǔn)"七寸"即打掉"保護(hù)傘"',
'中東部“冰凍模式”仍將持續(xù)一周 將影響春運(yùn)交通',
'科技部:2025年將布局近30家農(nóng)業(yè)高新技術(shù)產(chǎn)業(yè)示范區(qū)',
'關(guān)注基層干部隊(duì)伍建設(shè):全流程規(guī)范,選人用人嚴(yán)起來(lái)',
'一批新規(guī)2月施行 8項(xiàng)惠民措施便利辦證出行'
];
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>
