DOM与BOM操作详解-CSDN博客

本文链接：https://blog.csdn.net/oYueMiJinDu/article/details/43604537

8.DOM对象控制HTML元素详解

DOM对象控制HTNL
1.方法
getElementsByName() --获取name
getElementsByTageName() --获取元素
getAttribute() --获取元素属性
setAttribute() --设置元素属性
childNodes() --访问子节点
parentNode() --访问父节点
createTextNode --创建文本节点
insertBefore() -- 插入节点
removeChild() --删除节点
offsetHeight --网页尺寸不包含滚动条
scrollHeight --网页尺寸包含滚动条

<p name="pn">Hello</p>

<p name="pn">Hello</p>

<p name="pn">Hello</p>

<p name="pn">Hello</p>

<a id="aid" title="得到了a标签的属性"></a>

<ul>
    <li>1</li>
    <li>11</li>
    <li>111</li>
</ul>

<div id="div">
    <p id="pid">div的p元素</p>
</div>
<script>
    function getName() {
        var count = document.getElementsByName("pn");//集合
        //       alert(count.length)//4

        var count2 = document.getElementsByTagName("p");//集合
    }
    //    getName()

    function getAttr() {
        var anode = document.getElementById("aid");
        var attr = anode.getAttribute("title");
//        alert(attr)//得到了a标签的属性
    }
    //   getAttr()

    function setAttr() {
        var anode = document.getElementById("aid");
        anode.setAttribute("title", "设置成这个了");
        alert(anode.getAttribute("title"));
    }
    //    setAttr();//设置成这个了

    function getChildNode() {
        var childnode = document.getElementsByTagName("ul")[0].childNodes;
//        alert(childnode.length);//7 有4个空白项
//        alert(childnode.length);//3   <ul><li>1</li> <li>11</li><li>111</li></ul>
        alert(childnode[0].nodeType);//3   或1   <ul><li>1</li> <li>11</li><li>111</li></ul>
    }
//    getChildNode()

    function getParentNode(){
        var div = document.getElementById("pid");
        alert(div.parentNode.nodeName);//DIV
    }
 //   getParentNode()

    function createNode(){
        var body = document.body;
        var input = document.createElement("input");
        input.type="button";
        input.value = "按钮";
        body.appendChild(input);//添加一个节点,在最后
    }
 //   createNode();

    function addNode(){
        var div = document.getElementById("div");
        var node = document.getElementById("pid");
        var input = document.createElement("input");
        input.type="button";
        input.value = "动态添加元素";
        div.insertBefore(input,node)
    }
//    addNode();

    function removeNode(){
        var div = document.getElementById("div");
        var p = div.removeChild(div.childNodes[1])
    }
//    removeNode()

    function getSize(){
        var width = document.documentElement.offsetWidth;
        var width2 = document.body.offsetWidth;
        var width3 = document.body.offsetWidth||document.documentElement.offsetWidth;//所有浏览器兼容
        alert(width)
    }
    getSize()

9.浏览器对象

Window对象
1.Window对象:
Window对象是BOM的核心,window对象指当前的浏览器窗口
所有JavaScript全局对象,函数以及变量均自动成为window对象的成员
全局变量是window对象的属性
全剧函数是window对象的方法
甚至HTML DOM 的document也是window对象的属性之一
2.window尺寸
window.innerHeight - 浏览器窗口的内部高度 //不包含滚动条,工具栏
window.innerWidth - 浏览器窗口的内部宽度
3.window方法
window.open() - 打开新窗口
window.close() - 关闭当前窗口

<button id="btn" onclick="btnc()">按钮</button>
<script>
//    window.document.write("Hello");//和document.write("Hello")相同
//    document.write(window.innerHeight);
    function btnc(){
//        window.open("index2.html","打开页面的名字","height=200,width=200,top=100,left=100,toolbar=no,menubar=no");
          window.close();
    }
</script>

计时器
1.计时事件
通过使用JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,
而不是在函数被调用后立即执行,我门称之为计时事件
2.计时方法
1):setInterval() - 间隔指定的毫秒数不停地执行指定的代码
clearInterval() 方法用于停止setInterval()方法执行的函数代码
2):setTimeout() - 暂停指定的号描述后只i系那个指定的代码
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码

<body onload="myWin()">
setInterval
<p id="ptime"></p>
<button onclick="stopTime()">停止</button>
    <script>
        var mytime = setInterval(function(){
            getTime();
        },1000)

        function getTime(){
            var d = new Date();
//            var t = d.toLocaleDateString();//‎2015‎年‎2‎月‎7‎日
            var t = d.toLocaleTimeString();
            document.getElementById("ptime").innerHTML = t;
        }
        function stopTime(){
            clearInterval(mytime);
        }
    </script>
<hr>
setTimeout<br>
<button onclick="stopWin()">clearTimeout</button>
<script>
    var win;
    function myWin(){
        win = setTimeout(function(){
            alert("hello");
        },3000)
    }
    function stopWin(){
        clearTimeout(win);
    }
</script>
</body>

History对象
1.History对象
window.history对象包括浏览器的力士(url)的集合
2.History方法:
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器点击向前按钮相同
history.go() - 进入历史中的某个页面

<form>
    <input type="text" id="username">
</form>
    <button id="btn" onclick="safe()">输入hello</button>
    <script>
        function safe() {
            var name = document.getElementById("username").value;
            if (name == "hello") {

                history.go(-1);//上个界面
            } else {
                alert("输入错误")
            }
        }
    </script>

Location对象
1.Location对象
window.location对象用于获取当前页面的地址(URL),并把浏览器重新定向到新的页面
2.Location对象的属性:
location.hostname 返回web逐级的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回web主机的端口
location.protocol 返回所使用的web协议(http://或https://)
location.href 属性返回当前页面的URL
location.assign() 方法加载新的文档

<button id="btn" onclick="getLoc()">按钮</button>
<p id="ptime"></p>
<script>
    function getLoc() {

        //      document.getElementById("ptime").innerHTML =   window.location.hostname;//localhost
        //        document.getElementById("ptime").innerHTML =   location.port;//可以没window
        //       location.assign("http://www.baidu.com");
    }
</script>

Screen对象
1.Screen对象:
window.screen对象包含有关用户屏幕的信息
2.属性:
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
screen.Height - 屏幕高度
screen.Width - 屏幕宽度

10.面相对象详解

/*function People(){
 //    this.name = name;
 }
 People.prototype.say = function(){
 alert("say方法" + this.name);
 }*/

(function () {
    var n = "内部";
    function People(name){
   this.name = name;
    }
    People.prototype.say = function(){
        alert("say方法" + this.name);
    }
    window.People = People;
}());

/*function Student(name){
    this.name = name;
}
Student.prototype = new People("4");//继承
var superSsay = Student.prototype.say;
Student.prototype.say = function(){
    superSsay.call(this);//say方法
    alert("复写方法"+this.name);
}*/

(function(){
    function Student(name){
        this.name = name;
    }
    Student.prototype = new People("4");//继承
    var superSay = Student.prototype.say;
    Student.prototype.say = function(){
        superSay.call(this);//say方法
        alert("复写方法"+this.name);
    }
    window.Student = Student;
}());



var s = new Student("mm");
s.say();

/*function Person(name){
    var _this = {};
    _this.sayHello = function(){
        alert("Hello")
    }
    _this.name = name;
    return _this;
}*/

(function(){
    var n = "迷"
    function Person(name){
        var _this = {};
        _this.sayHello = function(){
            alert("Hello"+n)
        }
        _this.name = name;
        return _this;
    }
    window.Person = Person;
}());


function Teacher(name){
    var _this2 = Person(name);
   /* _this2.sayHello = function(){
        alert("复写")
    }*/

    var superSay = _this2.sayHello;
    _this2.sayHello = function(){
        superSay.call(this);//父类的
        alert(name)
    }

    return _this2;
}

var t = Teacher("NAME");
t.sayHello();

11.瀑布流

index.html 加粗部分有好多部分,对应不同图片

<body>
    <div id="container">
       <strong> <div class="box">       
            <div class="box_img">
                <img src="image/1.png">
                <p>2222</p>
            </div>
        </div></strong>
      </div>

css

*{
    margin: 0px;
    padding: 0px;
}

#container{
    position: relative;
}

.box{
    padding: 5px;
    float: left;
}
.box_img{
    padding: 5px;
    border: 1px solid gray;
    box_shadow:0 0 5px #ccc;
    border-radius: 5px;
}

.box_img img{
    width: 150px;
    height: auto;
}

js:

window.onload = function(){
    imgLocation("container","box");
    var imgData = {"data":[{"src":"image/8.png"},{"src":"image/8.png"},{"src":"image/3.png"},{"src":"image/5.png"}]};//JSON
    window.onscroll = function () {//监听滚动条,滚动条运动时触发
        if(checkFlag()){
            var cparent = document.getElementById("container");
            for(var i = 0;i<imgData.data.length;i++){//动态加载
                var ccontent = document.createElement("div");
                ccontent.className="box";
                cparent.appendChild(ccontent);
                var boximg = document.createElement("div");
                boximg.className="box_img";
                ccontent.appendChild(boximg);
                var img = document.createElement("img");
                img.src = imgData.data[i].src;
                boximg.appendChild(img);
            }
            imgLocation("container","box");
        }
    }
}

function checkFlag(){
    var cparent = document.getElementById("container");
    var ccontent = getChildElement(cparent,"box");
    var lastContetnHeight = ccontent[ccontent.length-1].offsetTop;
//    alert(lastContetnHeight);
    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;//到上面的高度
    var pageHeight = document.documentElement.clientHeight;
    if(lastContetnHeight<scrollTop+pageHeight){
        return true;
    }
}




function imgLocation(parent,content){
    //将parent下的所有content取出
    var cparent = document.getElementById(parent);
    var ccontent = getChildElement(cparent,content);
    var imgWidth = ccontent[0].offsetWidth;
    var cols = Math.floor(document.documentElement.clientWidth/imgWidth);
    cparent.style.cssText = "width:"+imgWidth*cols+"px; margin:0 auto";

    //找到合适的地方放图片使其连续
    var BoxHeightArr = [];
    for(var i = 0;i<ccontent.length;i++){
        if(i<cols){
            BoxHeightArr[i] = ccontent[i].offsetHeight;
        }else{
            var minHeight = Math.min.apply(null,BoxHeightArr);
            var minIndex = getminhightLocation(BoxHeightArr,minHeight);

            ccontent[i].style.position = "absolute";
            ccontent[i].style.top = minHeight+"px";
            ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px";

            BoxHeightArr[minIndex] = BoxHeightArr[minIndex]+ccontent[i].offsetHeight
        }
    }
}

function getminhightLocation(BoxHeightArr,minHeight){
    for(var i in BoxHeightArr){
        if(BoxHeightArr[i] == minHeight){
            return i;
        }
    }
}

function getChildElement(parent,content){
    var contentArr = [];
    var allcontent = parent.getElementsByTagName("*");
    for(var i = 0;i<allcontent.length;i++){
        if(allcontent[i].className == content){
            contentArr.push(allcontent[i]);
        }
    }
    return contentArr;
}