js小知识点6

多少次，寻着记忆的气息误入梦的缝隙，看见昔日的痕迹：一川烟草，一带秋水，隔江望那瞬间消逝的美丽。泛黄的日记，写满了雾的飘逸，笔下翻动的岁月，某年月，某年月，某年月里不见了你的身影。

一、获取

    （1） 通过id获取一个元素
        document.getElementById()   
    （2） 通过标签名获取一个元素
        oEle.getElementsByTagName()
    （3） 通过class获取一个元素
        oEle.getElementsByClassName()

2、通过节点关系获取

      
（1）获取子节点
            （a）获取第一层子节点
            oParent.children
            （b）获取标签和文本节点
            oParent.childNodes(不推荐)
        （2）获取父节点
            （a）获取结构上父级
            obj.parentNode 
                最大是document，再往上是null
            （b）获取定位上父级
            obj.offsetParent
                最大是body，再往上是null
        （3）获取兄弟节点
            （a）上一个兄弟节点
                兼容高级浏览器
                oEle.previousElementSibling
                兼容IE678
                oEle.previousSibling
                兼容写法
                oEle.previousElementSibling||oEle.previousSibling
            （b）下一个兄弟节点
                兼容高级浏览器
                oEle.nextElementSibling
                兼容IE678
                oEle.nextSibling
                兼容写法
                oEle.nextElementSibling||oEle.nextSibling
        （4）获取首尾子节点
            （a）获取首子节点
                兼容高级浏览器
                oParent.firstElementChild
                兼容IE678
                oParent.firstChild
                兼容写法
                var oFirst = oParent.firstElementChild||oParent.firstChild;
                oParent.children[0];
（b）获取尾子节点
                兼容高级浏览器
                oParent.lastElementChild
                兼容IE678
                oParent.lastChild
                兼容写法
                var oFirst = oParent.lastElementChild||oParent.lastChild;
                oParent.children[oParent.children.length-1]

二、创建

document.createElement('标签名');

三、添加

添加到父级的最后
父级.appendChild(子级);
在某个元素之前插入
父级.insertBefore(要插入的元素,谁之前);

四、删除

父级中删除子级
父级.removeChild(子级);

五克隆

oEle.cloneNode();           克隆元素
    只有标签，没有内容。
oEle.cloneNode(true);       深度克隆
    所有东西全都克隆

======================================

六、操作属性

.
[]
attribute
    （1）oEle.setAttribute(name,value);
    （2）oEle.getAttribute(name);
    （3）oEle.removeAttribute(name);

七、BOM 浏览器对象模型

window.location     包含地址信息
    .pathname
    .host
    .port
window.open();      打开新窗口
window.close();     关闭窗口

八、获取各种信息

（1）获取元素盒子模型的宽高
oEle.offsetWidth 盒子模型宽度
oEle.offsetHeight 盒子模型高度
（2）获取元素的位置
获取相对位置
oEle.offsetLeft 距离定位父级的左边距
oEle.offsetTop 距离定位父级的上边距
获取绝对位置
（3）可视区宽高
document.documentElement.clientWidth 可视区宽
document.documentElement.clientHeight 可视区高
（4）滚动距离
scrollTop 垂直方向
document.documentElement.scrollTop||document.body.scrollTop
scrollLeft 水平方向
document.documentElement.scrollLeft||document.body.scrollLeft

0.gif