浏览器为我们提供了文档节点对象，它是window的属性，可以直接使用，文档对象代表整个网页
事件：就是用户和浏览器之间的交互行为，我们可以在时间对应的属性设置一些js代码，这样当事件被触发的时候，这些代码就会执行
<button id="btn" οnmοusemοve="alert('事件被触发！！！');">我是一个按钮</button>可以为按钮对应的事件绑定处理函数的形式来相应事件，这样当时间被触发的时候，其对应的函数就会被调用
<button id="btn">我是一个按钮</button> <script type="text/javascript"> //获取按钮对象 var btn = document.getElementById("btn"); //绑定一个单击事件 //像这种为单击事件绑定的函数，我们称为单击响应函数 btn.onclick = function(){ alert("事件被触发"); }; </script>
浏览器在加载一个页面的时候，是按照自上而下的顺序进行加载的（这就可能导致获取不到DOM对象）
onload()事件会在整个页面加载完成之后才会触发
/* * 为window绑定一个onload事件 * 该事件对应的响应函数将会在页面加载完成之后执行， * 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了 * */ window.onload = function(){ //获取id为btn的按钮 var btn = document.getElementById("btn"); //为按钮绑定一个单击响应函数 btn.onclick = function(){ alert("hello"); }; };
innerHTML 通过这个属性可以获取到元素内部的html代码， innerHTML用于获取元素内部的HTML代码的， 对于自结束标签，这个属性没有意义
getElementById("");可以根据标签id属性来获取一个元素节点对象
getElementsByTagName(“”)可以根据标签名来获取一组元素节点对象
这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中，即使查询到的元素只有一个，也会封装到数组中返回
getElementsByName("");可以根据标签的name属性来获取一组元素节点对象
如果需要读取元素节点属性，直接使用 元素.属性名 注意：class属性不能采用这种方式，读取class属性时需要使用 元素.className 如：inputs[i].className
//查找#city下所有li节点 var lis = city.getElementsByTagName("li");
childNodes属性会获取包括文本节点在呢的所有节点，根据DOM标签标签间空白也会当成文本节点，在IE8及以下的浏览器中，不会将空白文本当成子节点，
firstChild可以获取到当前元素的第一个子节点（包括空白文本节点） var fir = phone.firstChild;
firstElementChild获取当前元素的第一个子元素 firstElementChild不支持IE8及以下的浏览器，
innerText 该属性可以获取到元素内部的文本内容 它和innerHTML类似，不同的是它会自动将html去除
返回#bj的父节点 var pn = bj.parentNode;
前一个兄弟节点（也可能获取到空白的文本） var ps = and.previousSibling;
previousElementSibling获取前一个兄弟元素，IE8及以下不支持
设置#username的value属性值 var um = document.getElementById("username"); um.value = "今天天气真不错~~~";
返回#bj的文本值 var bj = document.getElementById("bj"); bj.firstChild.nodeValue
全选：
/* * 全选按钮 * - 点击按钮以后，四个多选框全都被选中 *///为id为checkedAllBtn的按钮绑定一个单击响应函数 var checkedAllBtn = document.getElementById("checkedAllBtn"); checkedAllBtn.onclick = function(){ //遍历items for(var i=0 ; i<items.length ; i++){ //通过多选框的checked属性可以来获取或设置多选框的选中状态 //alert(items[i].checked); //设置四个多选框变成选中状态 items[i].checked = true; } //将全选/全不选设置为选中 checkedAllBox.checked = true; };
全不选：
/* * 全不选按钮 * - 点击按钮以后，四个多选框都变成没选中的状态 */ //2.#checkedNoBtn //为id为checkedNoBtn的按钮绑定一个单击响应函数 var checkedNoBtn = document.getElementById("checkedNoBtn"); checkedNoBtn.onclick = function(){ for(var i=0; i<items.length ; i++){ //将四个多选框设置为没选中的状态 items[i].checked = false; } //将全选/全不选设置为不选中 checkedAllBox.checked = false; };
反选：
/* * 反选按钮 * - 点击按钮以后，选中的变成没选中，没选中的变成选中 */ //3.#checkedRevBtn var checkedRevBtn = document.getElementById("checkedRevBtn"); checkedRevBtn.onclick = function(){ //将checkedAllBox设置为选中状态 checkedAllBox.checked = true; for(var i=0; i<items.length ; i++){ //判断多选框状态 /*if(items[i].checked){ //证明多选框已选中，则设置为没选中状态 items[i].checked = false; }else{ //证明多选框没选中，则设置为选中状态 items[i].checked = true; }*/ items[i].checked = !items[i].checked; //判断四个多选框是否全选 //只要有一个没选中则就不是全选 if(!items[i].checked){ //一旦进入判断，则证明不是全选状态 //将checkedAllBox设置为没选中状态 checkedAllBox.checked = false; } } //在反选时也需要判断四个多选框是否全都选中 };
全选checkbox：
/* * 全选/全不选 多选框 * - 当它选中时，其余的也选中，当它取消时其余的也取消 * * 在事件的响应函数中，响应函数是给谁绑定的this就是谁 */ //为checkedAllBox绑定单击响应函数 checkedAllBox.onclick = function(){ //alert(this === checkedAllBox); //设置多选框的选中状态 for(var i=0; i <items.length ; i++){ items[i].checked = this.checked; } }; /* * 如果四个多选框全都选中，则checkedAllBox也应该选中 * 如果四个多选框没都选中，则checkedAllBox也不应该选中 */ //为四个多选框分别绑定点击响应函数 for(var i=0 ; i<items.length ; i++){ items[i].onclick = function(){ //将checkedAllBox设置为选中状态 checkedAllBox.checked = true; for(var j=0 ; j<items.length ; j++){ //判断四个多选框是否全选 //只要有一个没选中则就不是全选 if(!items[j].checked){ //一旦进入判断，则证明不是全选状态 //将checkedAllBox设置为没选中状态 checkedAllBox.checked = false; //一旦进入判断，则已经得出结果，不用再继续执行循环 break; } } }; }
获取body元素：
//获取body标签 var body = document.getElementsByTagName("body")[0]; console.log(body); //在document中有一个属性body，它保存的是body的引用 var body = document.body; console.log(body);获取html元素
//document.documentElement保存的是html根标签 var html = document.documentElement; console.log(html);获取页面所有的元素
// document.all代表页面中所有的元素 var all = document.all; console.log(all.length); for(var i=0 ; i<all.length ; i++){ console.log(all[i]); } all = document.getElementsByTagName("*"); console.log(all.length);根据类获取元素
/* * 根据元素的class属性值查询一组元素节点对象 * getElementsByClassName()可以根据class属性值获取一组元素节点对象， * 但是该方法不支持IE8及以下的浏览器 */ var box1 = document.getElementsByClassName("box1"); console.log(box1.length); //获取class为box1中的所有的div //.box1 div /* * document.querySelector() * - 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象 * - 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替 * - 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个 */ var div = document.querySelector(".box1 div"); var box1 = document.querySelector(".box1") console.log(div.innerHTML); console.log(box1.innerHTML);/* * document.querySelectorAll() * - 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回 * - 即使符合条件的元素只有一个，它也会返回数组 */ box1 = document.querySelectorAll(".box1"); box1 = document.querySelectorAll("#box2"); console.log(box1);
转载于:https://www.cnblogs.com/lzb0803/p/9019915.html
相关资源：JavaScriptDOM编程艺术.pdf