DOM对象和可视区

文章目录

1. DOM:document object model文档对象模型。
2. 可视区：能够看到网页内容的区域

要记得东西太多，记性不好就要多背了！

DOM:document object model文档对象模型。

dom对象层级方式划分：兄弟节点，子级节点，父级节点
类型方式划分：元素节点、属性节点、文本节点、注释节点、document节点
作用于：html和xml。
dom是关于如何创建、添加、修改或者删除页面元素的标准。
所以与页面相关的操作都属于dom操作。

document//指html整个文档

innerHTML,title,URL,write;//可以修改hmtl里的内容

例如：
document.title=“草原";

document.getElementById;//获取所有ID名，所有浏览器都可以用，支持IE6、7、8
document.getElementsByTagName;//获取所有p标签，所有浏览器都可以用，支持IE6、7、8
document.getElementsByClassName;//获取所有class名，不是所有浏览器都可以用，支持IE9,不支持IE6、7、8
document.querySelector || document.querySelectorAll;//不支持IE6、7、8，只支持标准浏览器
getComputedStyle(); //获取非行间样式，标准浏览器使用
节点名.currentStyle.属性名; //获取非行间样式,IE浏览器用的

一、浏览器兼容的方式：

第一种 if else判断

var div1=document.getElementById(“div1");
function getStyle(ele,haha){
    if(window.getComputedStyle){
        return window.getComputedStyle(ele,null)
        [haha]
    }else if(ele.currentStyle){
        return ele.currentStyle[haha]
    }
    return null;
};
getStyle(节点名,”属性名");
console.log(getStyle(div1,"width"));
console.log(getComputedStyle(div1,null).width);

第二种三元运算符

var heihei=ele.currentStyle ? ele.currentStyle : window.getComputedStyle(ele,null);

第三种逻辑或

var heihei=ele.currentStyle || window.getComputedStyle(ele.null);

二、 childNodes;//子节点集合是个集合

console.log(document.childNodes);

console.log(document.childNodes[1].childNodes);//标准查找文本节点用法，不过会有多余的text的节点，没有空格和转行就可以消除text节点

console.log(document.childNodes[1].children);//非标准用法，快要废弃，不会有多余的text的节点

console.log(document.childNodes[1].children[1].children);

console.log(document.childNodes[1].children[1].innerHTML);//可以在IE浏览器使用

var div1=document.getElementsByTagName(“div”)[0];

console.log(div1.lastChild);

console.log(div1.firstElementChild);//标准属性但是IE678不支持简写firstChild

lastChild//找p节点支持所有的浏览器但是不能过滤掉text和空节点
lastElementChild//标准属性能过滤掉text节点但是IE678不支持简写lastChild
firstChild//找首个子节点支持所有的浏览器但是不能过滤掉text和空节点

firstElementChild//标准属性能过滤掉text节点但是IE678不支持简写firstChild

nextSibling//下一个兄弟节点 //支持所有的浏览器但是不能过滤掉text和空节点

nextElementSibling//标准属性能过滤掉text节点但是IE678不支持简写naxtSibling

previousSibling//上一个兄弟节点支持所有的浏览器但是不能过滤掉text和空节点

previousElementSibling//标准属性能过滤掉text节点但是IE678不支持简写previousSibling

parentNode//找父级节点支持所有的浏览器但是不能过滤掉text和空节点

parentNodeElement//标准属性能过滤掉text节点和空节点
但是IE678不支持简写parentNode

父级案例：
var btns = document.getElementsByTagName('span');
var length = btns.length;

for(var i = 0;i<length;i++){
    btns[i].onclick = function(){
        this.parentNode.style.display = 'none';
    }
};

三、attributes获取当前节点的所有属性集合

var div1 = document.getElementById(‘heihei’);
console.log(div1.attributes[0].nodeType);
console.log(div1.firstChild.nodeName);

nodeType//查看节点类型

9 document 对象节点

8 注释节点

3 空节点

2 属性节点

1 元素节点

console.log(btns[0].nodeType);

nodeName//查看节点名称

console.log(btns[0].nodeName);

console.log(btns[0].innerHTML);

nodeValue//查看节点的值

console.log(btns[0].nodeValue);

案例：
function first(ele){
    //firstChild 浏览器都支持
    //firstElementChild 非IE678都支持

    //一种方法
    var nodes=ele.children;
    if(nodes.length>0){
        return children[0];//返回第一个
        //return children[length];返回最后一个
    }

    //另一种方法
    var list=ele.childNodes;
    if(list.length>0){
        var length=list.length;
        for(var i=0;i<length;i++){
            if(list[i].nodeType==1){
                return list[i];
                break;
            }
        }
    }

    // 第三种方法
    var obj = ele.firstElementChild || ele.firstChild;
    if(obj.nodeType==3){
        return obj.nextsibling;
    }
    if(obj.nodeType==1){
        return obj;
    }
};

案例：
//查找p节点
function last(ele){
    if(!ele){
        return null;
    }else{
        var obj = ele.lastElementChild || ele.lastChild;
        if(ele.children.length >0){
            if(obj.nodeType == 3){
                return obj.previousSibling;
            }
            if(obj.nodeType == 1){
                return obj;
            }
        }else{
            return null;
        }
    }

}
var heihei = document.getElementById("heihei");
last(heihei);
console.log(last(heihei));

//查找首个子节点
function first(ele){
    if(!ele){
        return null;
    }else{
        var obj = ele.firstElementChild || ele.firstChild;
        if(ele.children.length>0){
            if(obj.nodeType == 3){
                return obj.nextSibling;
            }
            if(obj.nodeType == 1){
                return obj;
            }
        }else{
            return null;
        }
    }

}
first(heihei);
console.log(first(heihei));
//查找下一个兄弟节点
function next(ele){
    if(!ele){
        return null;
    }else{
        var obj = ele.nextElementChild || ele.nextSibling;
        if(ele.children.length>0){
            if(obj.nodeType == 3){
                return obj.nextSibling;
            }
            if(obj.nodeType == 1){
                return obj;
            }
        }else{
            return null;
        }
    }

}
next(heihei);
console.log(next(heihei));
//查找上一个兄弟节点
function previous(ele){
    if(!ele){
        return null;
    }else{
        var obj = ele.previousElementChild || ele.previousSibling;
        if(ele.children.length>0){
            if(obj.nodeType == 3){
                return obj.previousSibling;
            }
            if(obj.nodeType == 1){
                return obj;
            }
        }else{
            return null;
        }
    }

}
previous(heihei);
console.log(previous(heihei));

// 获取含有你需要的名字(hehe)的所有元素
function getClassName(name){
    var all = document.getElementsByTagName("*");//*是通配选择器
    var length = all.length;
    var arr = [];
    for(var i=0;i<length;i++){
        if(all[i].className == name){
            arr.push(all[i]);
        }
    }
    return arr;
}
console.log(getClassName("haha"))；
// 结束

获取属性:

getAttribute 获取节点属性

案例：
var div1 = document.getElementById("heihei");
//console.log(div1.getAttribute(“id或class”));//没有该属性的时候，返回null。

function getAt(ele,xixi){
    var list = ele.attributes;
    if(!list){
        return null;
    }
    for(var i=0;i<list.length;i++){
        if(list[i].nodeName == xixi){
            return list[i].nodeValue;
        }
    }
    return null;
}
console.log(getAt(div1,"id"));

setAttribute 设置节点属性

案例：
var div1 = document.getElementById("heihei");
div1.setAttribute("class","gaga xixi bibi”);//新建参数，可以直接在这里新建,修改参数属性
div1.setAttribute("style","border:10px blue solid");
removeAttribute 移除节点属性
案例：
div1.removeAttribute(“style");//移除参数，只能移除一个参数

hasClass("")? //判断是否有此class名
addClass()    //设置class名
removeClass()//移除class名
案例：
判断class名,并添加点击效果
function hasClass(ele,xixi){
    if(!ele.className){
        return null;
    }
    var list = ele.className;
    if(list.indexOf(xixi) != -1){
        return true;
    }
    return false;
}

console.log(hasClass,"haha");

点击效果
div1.onclick = function(){
    if(hasClass(this,"haha")){
        this.style.backgroundColor = "gold";
    }
}

设置class名，可以新建,修改属性
function addClass(ele,xixi){
    if(!ele.className){
        ele.setAttribute("class",xixi);
    }else{
        ele.className += " "+xixi;
    }
}
addClass(div1,"gaga");

移除class名
function removeClass(ele,xixi){
    if(!ele.className){
        return false;
    }
    var arr = ele.className.split(" ");
    for(var i=0;i<arr.length;i++){
        if(arr[i] == xixi){
            arr[i] = "";
            break;
        }
    }
    var name = arr.join(" ");
    return ele.className = name;
}
removeClass(div1,”haha");

createElement()//创建元素
insertBefore()//可以根据需求决定创建元素的位置，有两个参数，第一个是要添加的节点，第二个是位置

createElement() || insertBefore()不能同时使用

案例：
var newnode = document.createElement("a");
newnode.href = "http://www.baidu.com";
newnode.id = "gg";
newnode.className = "mm-bb-cc";
newnode.style.border = "1px red solid";
newnode.innerHTML = "12233487859";
div1.appendChild(newnode);//往div1容器最后一个子集位置添加元素
div1.insertBefore(newnode,div1.firstElementChild);//往div1里添加元素，newnode后面是添加元素的位置，这个是添加在第一个字节位置

removeChild()//删除元素
```
案例：
div1.removeChild(newnode);
```

offsetParent;//离当前节点最近的具有定位属性的祖先节点；

如果没有设置position以body为准，设置了position的以position为准

如果所有祖先节点都没有定位属性：

对于一个有定位属性的元素：

IE6、7:offsetParent 是HTML节点

其他浏览器：offsetParent 是body节点

对于一个没有定位的元素：

IE6、7：最近的一个触发了haslayout

属性的祖先节点，如果所有祖先节点都没有触发haslayout,默认为body节点。

其他浏览器为body.

如果当前节点有display:none;属性在iell

以上及标准浏览器，offsetParent为null;

IE10以上浏览器不受影响。

var div1 = document.querySelector("#div1");

console.log(div1.offsetParent);

console.log(div1.offsetLeft);//对象元素与offsetParent的左边距离
console.log(div1.offsetTop);//对象元素与offsetParent的上边距离
没有所谓的offsetRight和offsetBottom

console.log(div1.offsetWidth);//ele.width+padding+border

console.log(div1.offsetHeight);//ele.height+padding+border

console.log(div1.clientWidth);//ele.width+padding

console.log(div1.clientHeight);//ele.height+padding

可视区：能够看到网页内容的区域

可视区宽度：

标准：window.innerWidth
ie6/7/8:document.documentElement.clientWidth

可视区高度：

标准：window.innerHeight
ie6/7/8:document.documentElement.clientHeight

clientWidth:width+padding

window.onscroll 当页面发生滚动的时候触发的事件
window.rescroll 当页面窗口尺寸发生改变时触发的事件
window.onload 当html文档加载完成之后执行的事件

一、滚动的距离：页面向上或向左滚动的距离

滚动宽度：拉动滚动条向右时，页面向左滚动的尺寸

标准浏览器：window.pageXOffset
ie6/7/8:document.documentElement.scrollLeft

滚动高度：拉动滚动条向下时，页面向上滚动的尺寸

标准浏览器：window.pageYOffset
ie6/7/8:document.documentElement.scrollTop

二、内容标签元素：

scrollHeight:内容高度，由body内容所撑出来的高度
body元素:document.body.scrollHeight如果内容高度没有可视区域高度高 scrollHeight为可视区域
offsetHeight:文档高度，标签的样式高度
clientHeight 就是透过浏览器看内容的这个区域高度

scrollHeight / offsetHeight / clientHeight

TK-Person

The key person

DOM对象和可视区

DOM:document object model文档对象模型。

可视区：能够看到网页内容的区域