基礎DOM | children | offset | 表格 | 表單

背景

<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'  //新窗口背景为red

window.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;
    }

基礎DOM | children | offset | 表格 | 表單 | BOM 筆記

window.location.hash: url# 后面的内容

最新文章

最近回复

分类

归档

其它