JS的DOM

/**

* 在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);

抽奖案例

// 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;