/**
* 在js中，获取DOM节点方式有如下五种
*/
//第一种方式，直接使用id获取，不建议，知道就行。
// console.info(container)
//第二种使用document.getElementById()获取，店家推荐，重点掌握
// var _div = document.getElementById("container");
// console.info(_div);
//
//第三种使用document.getElementsByClassName 比较重要，要求掌握
// 注意：返回值是一个数组。
// 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对象的内容
/** * 慎用 ，注意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']); //数组的方式一般用于获取或者修改id和title
// console.log(_box.getAttribute("src"))
// _box.setAttribute("title","天上飘着五个字，那都不是事");
//
操作DOM对象的样式
/**
* API（application programe interface）应用程序接口
*/
// var _app = document.getElementById("app");
/**
* 通过DOM对象.style.样式属性 获取样式，只能获取行内样式
* 无法获取行外样式
*/
// console.info(_app.style.height);
// console.info(_app.style.width);
/**
* w3c 规定行外样式获取使用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>
