/**
* 在js中，獲取DOM節(jié)點方式有如下五種
*/
//第一種方式，直接使用id獲取，不建議，知道就行。
// console.info(container)
//第二種使用document.getElementById()獲取，店家推薦，重點掌握
// var _div = document.getElementById("container");
// console.info(_div);
//
//第三種使用document.getElementsByClassName 比較重要，要求掌握
// 注意：返回值是一個數(shù)組。
// var _contents = document.getElementsByClassName("content");
// console.info(_contents.length);
//第四種，通過使用document.getElementsByTagName獲取 ，會用就行
// var _divs = document.getElementsByTagName("div");
// console.info(_divs.length);
// 通過name屬性來獲取，常見于獲取表單元素 ，會用就行
// var _pwd = document.getElementsByName("password")
// console.info(_pwd[0].value);
操作DOM對象的內(nèi)容
/** * 慎用 ，注意XSS攻擊 *
///var _container = document.getElementById("container");
//console.info(_container.innerHTML);
//_container.innerHTML = "青青河邊草，悠悠岸上人---author：劉帥哥";
//// innerText非w3c標準的寫法
//var _content = document.getElementById("content");
//console.log(_content.innerText);
//_content.innerText = "道可道，非常道--老子";
//w3c標準的寫法【站長推薦】
//_content.textContent = "道可道，非常道--老子";
/** * 遠程（跨站）腳本攻擊 xss * * csrf 跨站請求偽造 */
操作DOM對象的屬性
}// window.onload = init;
//
// function init() {
//javascript操作DOM屬性有三種案例
/**
* 1、DOM對象.屬性
* 2、DOM對象[屬性]
* 3、DOM對象.getAttribute("屬性") DOM對象.setAttribute("屬性","值")
*/
// var _box = document.getElementById("box");
// console.log(_box.id)
// console.log(_box.className)
// _box.className = "show-2";
// console.log(_box.title)
// _box.title = "劉建宏真帥"
// console.log(_box['id']); //數(shù)組的方式一般用于獲取或者修改id和title
// console.log(_box.getAttribute("src"))
// _box.setAttribute("title","天上飄著五個字，那都不是事");
//
操作DOM對象的樣式
/**
* API（application programe interface）應(yīng)用程序接口
*/
// var _app = document.getElementById("app");
/**
* 通過DOM對象.style.樣式屬性 獲取樣式，只能獲取行內(nèi)樣式
* 無法獲取行外樣式
*/
// console.info(_app.style.height);
// console.info(_app.style.width);
/**
* w3c 規(guī)定行外樣式獲取使用getComputedStyle方法獲取
* getComputedStyle(DOM對象).樣式
*/
// console.info(getComputedStyle(_app).width);
//
// 在低版本的IE瀏覽器中，標簽對象.currentStyle.樣式名稱 【低版本IE】
// console.info(_box.currentStyle.width);
// function changeBig() {
//// _app.style.height = parseInt(_app.style.height) + 200 + "px";
// _app.style.width = parseInt(getComputedStyle(_app).width) + 200 + "px";
// _app.style.height = _app.offsetHeight + 200 +"px";
// _app.style.width = _app.offsetWidth + 200 + "px";
//
}
/**
* 獲取沒有單位的樣式的值
* offsetHeight offsetWidth 獲取的值存在邊框
*/
// console.info(_app.offsetHeight);
// console.info(_app.offsetWidth);
//
// clientHeight clientWidth ,獲取的值沒有邊框
// console.info(_app.clientHeight);
//// console.info(_app.clientWidth);
抽獎案例
<script>
// var _content = document.getElementById("content");
// var _start = document.getElementById("start");
// var timer;
// var flag = false;
//
// function start() {
// if (!flag) {
// flag = true;
// _start.textContent = "停止抽獎";
// _content.className = "selected";
// var goods = ["再來一次","iPhone X","娃娃","電動車","牛肉面","購物券","Python從入門到吐血","蘇穗"]
// timer = setInterval(function() {
// if (index == 1) {
//
// } else {
// var index = Math.floor(Math.random()*goods.length);
// _content.textContent = goods[index];
// }
//
// },50);
//
// } else {
// _content.className = "content";
// clearInterval(timer);
// _start.textContent = "開始抽獎";
// flag = false;
// }
//
//
//
// }
</script>
