基礎DOM | children | offset | 表格 | 表單 | BOM 筆記
背景
<ul id="ul">
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
</ul>1、childNodes包含文本、元素、属性、等节点；
2、children只包含元素节点
var ul = document.getElementById('ul')
console.log( ul.childNodes.length ) //9
console.log( ul.children.lenght ) //4
// alert(ul.childNodes[0].nodeType)
// alert(ul.attributes.length)
//alert(ul.attributes[0].name)
//alert(ul.attributes[0].value)使用children，IE7不会包含非法嵌套内容；
兼容写法：first/last/next/prev
var _first = ul.firstElementChild || ul.firstChild;
var _last = ul.lastElementChild || ul.lastChild;
var _next = _first.nextElementSibling || _first.nextSibling;
var _prev = _last.previousElementSibling || _last.previousSibling;parentNode 无兼容性问题，得到的父节点只有一个；
<ul id="ul">
<li>001 <a href="javascript:;">DEL</a></li>
<li>002 <a href="javascript:;">DEL</a></li>
<li>003 <a href="javascript:;">DEL</a></li>
<li>004 <a href="javascript:;">DEL</a></li>
</ul>var a = ul.getElementsByTagName('a')
for(var i=0;i<a.length;i++){
a[i].onclick = function(){
this.parentNode.style.display = 'none'
}
}offsetParent offsetLeft offsetTop
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div> var div1 = document.getElementById('div1')
var div2 = document.getElementById('div2')
var div3 = document.getElementById('div3')
console.log( div3.offsetLeft ) //自身无定位，则指向有定位父级，如果没有定位默认body
//自身有定位，父级无定位，则IE7指向html,其它指向body
//父级设置zoom，IE7指向html,其它指向body
console.log( div2.currentStyle.hasLayout ) //当前元素是否触发layout <div id='box' style='width:99px;height:99px;border:1px solid red;'></div>var box = document.getElementById('box')
console.log( box.style.width )
console.log( box.clientWidth ) //可視區寬度 樣式寬+padding
console.log( box.offsetWidth ) //可視區寬+border取得元素在頁面上left top方法
function getPos(obj) {
var pos = { left: 0,top: 0 };
while (obj) {
pos.left += obj.offsetLeft;
pos.top += obj.offsetTop;
obj = obj.offsetParent;
}
return pos;
}
getPos(box).left;
getPos(box).top;屬性操作
1、obj.attr 無法操作自定義屬性
2、obj['attr'] 無法操作自定義屬性
3、obj.getAttribute(attr) 可操作自定義屬性，如_a = '123'
4、_img.src _img['src'] 返回全鏈接值 _img.getAttribute('src') 返回相對鏈接值，IE7下還是返回全鏈接值
插入刪除
父級.appendChild( 要插入的元素 );
父級.removeChild( 要刪除的元素 );
父級.insertBefore( 新元素，被插入的元素 ) ；即在指定元素前面插入一個新元素；
父級.replaceChild( 新節點，被替換節點 );
obj.cloneNode( true ); 複製節點
兼容getClassName方法
function getClassName(parent, tagName, className) {
var aEls = parent.getElementsByTagName(tagName)
var arr = []
for (var i = 0; i < aEls.length; i++) {
var aClassName = aEls[i].className.split(' '); //当前classname拆分成数组
for (var j = 0; j < aClassName.length; j++) {
if (aClassName[j] == className) { //如果第j个class == classname
arr.push(aEls[i]) //则把当前第i个class push进来
break; //如果class='box box'相同名字，找到一个跳出for
}
}
}
return arr;
}
getClassName(document, 'li', 'box');兼容addClass方法
function addClass(obj, className) {
if (obj.className == '') { //原本无
obj.className = className;
}
else { //原本有
var arrClassName = obj.className.split(' ');
var _index = arrIndexOf(arrClassName, className);
if (_index == - 1) { //不存在
obj.className += ' ' + className;
}
}
}
//判斷一個數組裏是否存在元素
function arrIndexOf(arr, v) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == v) {
return i; //当前重複的值出现位置
}
}
return - 1;
}
addClass(box, 'box111');兼容removeClass方法
function removeClass(obj, className) {
if (obj.className != '') { //如果有class
var arrClassName = obj.className.split(' ');
console.log(arrClassName);
var _index = arrIndexOf(arrClassName, className);
if (_index != - 1) { //如果有需要移除的class
arrClassName.splice(_index, 1); //删除数组裏需要移除的
obj.className = arrClassName.join(' ');//再把處理完的數組class給obj
}
}
}
//判斷一個數組裏是否存在元素
function arrIndexOf(arr, v) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == v) {
return i; //当前重複的值出现位置
}
}
return - 1;
}
removeClass(box, 'box3')表格基本操作
tHead 表格頭
tHodie 表格正文 複合
tFoot 表格尾
rows 行 複合
cells 列 複合
數據操作：
var tb = document.getElementsTagName('table')[0];
console.log(tb.tBodies[0].rows[0].cells[0].innerHTML)
var data = [ //數組形式存放
{id: 1, username: 'elos1', sex: '男'},
{id: 2, username: 'edlo2', sex: '女'},
{id: 3, username: 'elfo3', sex: '女'},
{id: 4, username: 'elos4', sex: '男'}
]
for(var i=0;i<data.length;i++){
var tr = document.createElement('tr'); //創建一行
//隔行變色
if(i%2 == 0){
tr.style.background = '#fff';
}
else{
tr.style.background = '#ccc';
}
var td = document.createElement('td')//創建一列
td.innerHTML = data[i].id;//列加內容
tr.appendChild(td);//append到tr
var td = document.createElement('td')
td.innerHTML = data[i].username;
tr.appendChild(td);
var td = document.createElement('td')
td.innerHTML = data[i].sex;
tr.appendChild(td);
tb.tBodies[0].appendChild(tr);
}表單基本操作
重要屬性：name; form.name
onchange:當值發生改變時觸發，IE7下當值發生改變並且焦點離開時觸發
name屬性一個相同為單數，多個相同name則為複數，即[i]下標取值；
checked 選中屬性，都選中則以最後選中為准
onsubmit 提交時觸發
onreset reset時觸發
<form id="form1" action="">
<input type="text" id="txt1" name="text1" value="內容"/>
<input type="radio" name="sex" value="男" checked/> 男
<input type="radio" name="sex" value="女" /> 女
</form>var form = document.getElementById('form1')
console.log(form.text1.value);
ofrom.sex[0].onchange = function (){
...
}
if( ofrom.sex[i].checked ){
...
}
form.onsubmit = function(){
if(form.text1.value==''){
alert('please input something')
return false; //阻止提交
}
}
form.onreset = function(){
return confirm('are you sure to reset') //詢問對話
}BOM操作
window.open (页面地址url,打开方式)
页面地址url为空，默认打开空页面
打开方式为空，默认新窗口打开，自身：_self
var opener = null;
opener = window.open();
alert( opener = window );
opener.document.body.style.background = 'red' //新窗口背景为redwindow.close() //兼容性，ff无效，ie chrome有效
opener.close();//关闭新窗口，无兼容性;window.navigator.userAgent 浏览器信息，字符串
if(window.navigator.userAgent.indexOf('.NET') != -1){
alert('IE')
}else{ alert('NOT IE') }window.location 用户，浏览器地址信息
window.location.href
window.location.search: url? 问号后面的内容
window.location.hash: url# 后面的内容
可视区大小
document.documentElement.clientWidth;
document.documentElement.clientHeight
滚动距离
document.body.scrollTop / scrollLeft
document.documentElement.scrollTop / scrollLeft
内容高度
document.body.scrollHeight
文档高度
document.documentElement.offsetHeight
document.body.offsetHeight
//可视区宽
alert(document.documentElement.clientWidth)//可视区大小兼容，chrome认为滚动是body的
var sTop1 = document.body.scrollTop || document.documentElement.scrollTop;
var sTop2 = Math.max(document.body.scrollTop, document.documentElement.scrollTop)
var sTop3 = document.body.scrollTop + document.documentElement.scrollTop<div id="boxs" style = 'width: 100px;height: 100px;border: 1px solid red ;padding: 10px;margin: 10px;'>
<div style="width: 100px;height: 200px;background: #000;"></div>
</div>//内容高度:抛开边框，外面的padding+内容内容高度，包括父级被撑开的高度，加隐藏内容不加border
alert(document.getElementById('boxs').scrollHeight)
/*
boxs不加overflow:hidden: 210;
boxs + overflow:hidden:
chrome: 220
ff:210
IE8+ 210
IE8- 220
safari 220
opera 220
*/alert( document.getElementById('boxs').offsetHeight ) //122 height + padding + border
alert( document.body.offsetHeight ) //142 height + padding + border + margin //如果body取值则需要加上margin
//IE下，body style =" height: 2000px;" 兼容问题，IE取不到
所以获取body内容高时，推荐使用: document.body.offsetHeight;onscroll 当滚动条滚动时触发
onresize 当窗口大小发生改变时触发
//回到頂部 兼容寫法
var a = document.querySelector('a')
var timer = null;
window.onscroll = function () {
var Dsroll = document.body.scrollTop || document.documentElement.scrollTop
Dsroll >= 200?a.style.display = 'block':a.style.display = 'none'
a.onclick = function () {
var Dsroll = document.body.scrollTop || document.documentElement.scrollTop
timer = setInterval(function () {
Dsroll -= 30;
if (Dsroll <= 0) {
clearInterval(timer)
}
document.body.scrollTop = Dsroll
document.documentElement.scrollTop = Dsroll
}, 30)
}
}select操作：
<select name="" id="s">
<option value="0" selected>0</option>
<option value="100">text文本100</option>
<option value="200">text文本200</option>
</select>
<p>value是 <span id="sval"></span> text是 <span id="stxt"></span></p> var s = document.getElementById('s')
var sval = document.getElementById('sval');
var stxt = document.getElementById('stxt');
s.onchange = function () {
var sV = s.value;
var sT = s.options[s.selectedIndex].text;
sval.innerHTML = sV;
stxt.innerHTML = sT;
}
