js之DOM

let flag = confirm('确定删除吗？')

元素 - - - 标签
节点 - - - 标签或者标签内部文本
节点包含元素，比元素多出了文本。

DOM查询

获取元素

• document.getElementById()
• document/node.getElementsByTagName()
• document.getElementsByName()：专门用于 操作表单。
• document.getElementsByClassName()
• document.body
• document.documentElement：获取html标签。
• document.all：获取页面中所有标签。
• document.querySelector()：根据css选择器找元素，返回第一个。
• document.querySelectorAll()

获取元素的节点

• 元素.childNodes：包括 文本节点(标签间的空白)在内 的所有 节点；元素.children：所有 子元素。
• 元素.firstNode：第一个 子节点；元素.firstElementChild：第一个 子元素。
• 元素.lastNode
• 元素.parentNode：父 元素。
• 元素.previousSibling：兄弟 节点；元素.previousElementSibling：兄弟 元素。
• 元素.nextSibling

获取元素的属性

• 元素.innerHTML：包含元素标签； node.innerText：只有文本节点。
• 元素.className
• 表单
  • 元素.name
  • 元素.id
  • 元素.value

获取节点属性

DOM增删改

• 创建元素和节点
  tr = document.createElement('tr')：创建tr标签。
  gzText = document.createTextNode('广州')：
• 拼接/插入/替换/删除
  tbody.appendChild(tr)：将tr标签添加到tbody中。
  city.insertBefore(pre, next)：父节点调用。
  city.replaceChild(new, old)：父节点调用。
  city.removeChild(bj)：父节点调用
• 或者直接获取父元素，父元素.innerHTML += '<li>广州<li>'实现子元素的添加。

tdody虽然看不见，但内存中存在。

读写样式

• 读写
  • 元素.style.样式名：读取和 修改 的都是 内联样式。
• 只读
  • attrObj = window.getComputedStyle(元素, 伪类)：读取 当前正在显示的样式，返回样式对象(非IE)。
• 元素.style和window.getComputedStyle返回类型都是CSSStyleDeclaration 对象。
  • 元素.currentStyle.样式名：读取 当前正在显示的样式(仅IE8及以下支持)。
  • clientWidth、clientHeight：无单位，content+padding;
  • offsetWidth、offsetHeight: content+padding+border;
  • scrollWidth、scrollHeight: 滚动区域的宽高，包含溢出部分；scrollLeft、scrollTop：水平/垂直滚动条滚动的距离(可视顶部与真正顶部的距离)。
  • scrollHeight == scrollTop + clientHeight：说明滚到底了。
  • offsetParent: 定位父元素; offsetLeft、offsetTop: 边偏移。offsetX、offsetY：client-offset
• 案例：法律条款右侧滑动到底。

window.onload = function () {

    let p = document.getElementsByTagName('p')[0];
    let btn = document.getElementsByTagName('button')[0];
    
    p.onscroll = function () {
        if (this.scrollTop + this.clientHeight == this.scrollHeight) {
            let input = document.getElementsByTagName('input')[0];
            // 属性名和状态, 无需加style.
            input.disabled = false;
            btn.disabled = false;
            // btn.style.color = 'green';
        }
    }
    btn.onclick = function () {
        alert('注册成功');
    }
}

兼容IE8及以下

• 根据 方法有无， 解决兼容性。

/*
参数：
    ele: 要获取样式的元素
    name: 样式名
*/
function getStyle(ele, name) {
    // IE9及以上，或正常浏览器
    // var cssObj = getComputedStyle(box, null).width;

    // IE8及以下
    // console.log(box.currentStyle.backgroundColor)

    return window.getComputedStyle ? getComputedStyle(ele, null)[name] : ele.currentStyle[name];
}