DOM和BOM

DOM和BOM

微信图片_20210708204434.png

window

所有的对象或者属性,在访问的时候都必须有前缀
window是所有对象的祖宗,凡是省略前缀的对象,默认它的前缀就是window
只要是全局变量,它的前缀就是window

var i = 123;
var fun = function(){
    var i = 666;
    console.log(window.i);  //123
    }
window.fun();

三个弹出框

1、alert：将内容打印至弹出框上；

alert("确认要付款嘛?");

2、prompt([提示信息],[默认值]):返回一个字符串；

var x = prompt("请输入数据",666);
console.log(x+1); //6661

3、window.confirm([提示信息]):返回值为boolean

var flag = window.confirm("确认要付款嘛?");
console.log(flag);  //点击确定会打印true；点击取消会打印flase；

两个定时器：

1、循环定时器：setInterval clearInterval(执行的函数,时间间隔); ——祥见day8 02-日期Date
2、延时定时器：setTimeout（）设置延时定时器
clearTimeout（）取消延时定时器
见第九天——延时定时器案例；

onload：延迟加载，页面全部加载完毕后，在执行的代码

<script>
    window.onload = function(){
        var oBox = document.getElementById("box");
        console.log(oBox.innerHTML);
        }
</script>
<body>
    <p id="box">123</p>
</body>

location：地址对象

console.log(location.href);   //打印当前页面的地址；
location.href = "http://www.4399.com";   //修改当前页面地址
location.replace("http://www.baidu.com");   //修改当前页面地址
location.reload();  //刷新页面

点击按钮跳转页面案例：见第九天——location地址对象

document：

1、document.write的特点：
（1）字符串解析:能解析成HTML元素的字符串,就会按照HTML元素的功能执行效果

document.write("123");
document.write("<br>");
document.write("456");

（2）在与事件连用时,会直接覆盖原页面；

<body>
    <button type="button" id="btn">点击</button>
</body>
<script>
var oBtn = document.getElementById("btn");    
oBtn.onclick = function(){
    document.write("嘿嘿嘿");
    }
</script>

2、找对象的六种方法9
（1）document.getElementById(id名):返回id所对应的单个对象；

<div id="box"></div>
var oBox = document.getElementById("box");

（2）document.getElementsByTagName(标签名):返回标签名相同的所有元素,存入数组
中；

 <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    var oLis = document.getElementsByTagName("li");
    oLis[0].style.backgroundColor = color; //把颜色赋值给第一个li

（3）document.getElementsByClassName(类名):返回类名相同的所有元素,存入数组中

<input type="text" value="123" class="txt"></br>
<input type="text" value="456" class="txt"></br>
<input type="text" value="777" class="txt"></br>
<input type="text" value="888" class="txt"></br>
var oTexts = document.getElementsByClassName("txt");
for(var i=0; i<oTexts.length; i++){
    console.log(oTexts[i].value);
    }

（4）document.getElementsByName(name):返回name相同的所有元素,存入数组中

<input type="text" value="123" name="t"/></br>
<input type="text" value="456" name="t"/></br>
<input type="text" value="777" name="t"/></br>
<input type="text" value="888" name="t"/></br>
var oTexts = document.getElementsByName("t");

（5）document.querySelector(选择器):选择器,返回选择器对应的单个元素(标签,类,id)

<p>123</p>
<span id="s">666</span>
<div class="box">963</div>
var oP = document.querySelector("p");
console.log(oP.innerHTML);
var oSpan = document.querySelector("#s");
console.log(oSpan.innerHTML);
var oDiv = document.querySelector(".box");
console.log(oDiv.innerHTML);

（6）document.querySelectorAll():选择器,返回选择器对应的多个元素(标签,类)

<input type="text" value="123" class="txt"></br>
<input type="text" value="456" class="txt"></br>
<input type="text" value="777" class="txt"></br>
<input type="text" value="888" class="txt"></br>
var oTexts = document.querySelectorAll(".txt");

history：（见第九天——history）
（1）back() 加载 history 列表中的前一个 URL。
（2）forward() 加载 history 列表中的下一个 URL。
（3）go() 加载 history 列表中的某个具体页面，或者要求浏览器移动到指定的页面数量（负数为后退，正数为前进）

DOM

微信图片_20210708210207.png

1、根据层次关系访问节点： (包括文本和元素)
（1）firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
（2）lastChild 返回节点的最后一个子节点
（3）nextSibling 下一个节点
（4）previousSibling 上一个节点
2、通过层级关系访问元素节点：
（1）firstElementChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节
点
（2）lastElementChild 返回节点的最后一个子节点
（3）nextElementSibling 下一个节点
（4）previousElementSibling 上一个节点

<body>
    <p>你好!</p>
    <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
    </ul>
</body>
var str = document.body.firstElementChild.nextElementSibling.firstElementChild.nextElementSibling.innerHTML;
console.log(str);   //2

3、节点类型的判断 nodeType
元素节点返回1
文本节点返回3

<body>
    <p>你好!</p>
</body>
var oP = document.querySelector("p");
console.log(oP.nodeType);  //1
console.log(oP.firstChild.nodeType);  //3

4、节点的插入：（案例：见第九天——节点的插入）
（1）创建元素：document.createElement(标签名):返回一个创建的HTML元素；
（2）在父元素上追加子元素：父元素.appendChild(子元素):将子元素挂至父元素上；

<script type="text/javascript">
    var oH1 = document.createElement("h1");
    oH1.innerHTML = "静夜思";
    document.body.appendChild(oH1);
    var oP1 = document.createElement("p");
    oP1.innerHTML = "窗前明月光";
    document.body.appendChild(oP1);
</script>

与这个效果一致：
微信图片_20210708210524.png
5、节点的删除：（案例：见第九天——节点的删除）
目标节点.remove();

<body>
    <div id="box">嘿嘿嘿</div>
</body>
var oBox = document.getElementById("box");
oBox.remove();

动态创建表格

见第十天——动态创建表格案例
this是函数体内的内置对象
this在与事件连用时,this代表操作的元素本身

oDel.onclick = function(){
    this.parentNode.remove();
     }

childNodes和children

1、父节点.childNodes：返回父节点对应的所有子节点，包含文本节点和元素节点，返回一个数组；

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
var oUl = document.querySelector("ul");
var oLis = oUl.childNodes;
 //删除文本节点    
for(var i=0; i<oLis.length; i++){
    if(oLis[i].nodeType == 3){
        oLis[i].remove();
        } 
    }
for(var i=0; i<oLis.length; i++){
    console.log(oLis[i].innerHTML);  //1  2  3
    }

2、父节点.children：返回父节点对应的所有子节点，只包含元素节点，返回一个数组；

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
var oUl = document.querySelector("ul"); 
var oLis = oUl.children;
for(var i=0; i<oLis.length; i++){
    console.log(oLis[i].innerHTML);  //1  2  3
    }

innerText、outerHTML和innerHTML

（1）innerText：打印文本的内容，不包含任何标签；
（2）outerHTML：打印包含自身标签的所有内容；
（3）innerHTML：该标签中的所有内容；

<div id="box">
    我是<span>隔壁王叔叔</span>
</div>
var oDiv = document.querySelector("#box");
//1、innerText
console.log(oDiv.innerText);  //我是隔壁王叔叔
//2、outerHTML 
console.log(oDiv.outerHTML);  //全部打印
//3、innerHTML 
console.log(oDiv.innerHTML);  //我是<span>隔壁王叔叔</span>

使用innerHTML添加元素：

<body>
    <ul>            
    </ul>
</body>
var oUl = document.querySelector("ul");
oUl.innerHTML = "<li>heihei</li>";
oUl.innerHTML += "<li>xixi</li>"    
for(var i=0; i<10; i++){
    oUl.innerHTML += "<li class='test'>"+i+"</li>";
    }

添加元素之后：
clipboard (1).png
运行的效果：

属性和样式的读写

1、属性的读和写：
（1）通过打点的方式；

<body>
    <div id="box">            
    </div>
</body>
var oBox = document.querySelector("#box");
//写
oBox.id = "heihei";
//读
console.log(oBox.id);  //heihei

（2）通过getAttribute / setAttribute：

<body>
    <div id="box">            
    </div>
</body>
var oBox = document.querySelector("#box");
//写
oBox.setAttribute("id","haha");
//读
console.log(oBox.getAttribute("id"));  //haha

2、为元素添加自定义属性
（1）通过打点的方式

<body>
    <div id="box">            
    </div>
</body>
var oBox = document.querySelector("#box");
oBox.a = "hehe";
console.log(oBox.a);  //hehe

（2）通过getAttribute / setAttribute

<body>
    <div id="box">            
    </div>
</body>
var oBox = document.querySelector("#box");
oBox.setAttribute("b","yingyingying");
console.log(oBox.getAttribute("b"));  //yingyingying

3、样式的读和写：
（1）行内样式的读写：

<body>
    <div id="box" style="color: red;"></div>
</body>
var oBox = document.querySelector("#box");
//写
oBox.style.color = "blue";
//读
console.log(oBox.style.color);  //blue

（2）非行内样式的读写：

<style type="text/css">
    #box1{
        font-size: 22px;
    }
</style>
<body>
    <div id="box1"></div>
</body>
var oBox1 = document.querySelector("#box1");
//写
oBox1.style.fontSize = "100px";
//读
console.log(getComputedStyle(oBox1,false)["fontSize"]);  //100px

insertBefore

父节点.insertBefore(目标节点,参照节点):将目标节点插入到参照节点之前

<body>
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
    </ul>
    <button type="button">添加</button>
</body>
var oBtn = document.querySelector("button");
var oUl = document.querySelector("ul");
oBtn.onclick = function(){
    var oLi = document.createElement("li");
    oLi.innerHTML = "晶晶";
    oUl.insertBefore(oLi,oUl.children[2]);//将oLi插入到<li>3333</li>之前
    // oUl.insertBefore(oLi,null); //将oLi插入到<li>3333</li>之后
}

DOM和BOM - 图7

offsetTop

DOM和BOM - 图8

<style type="text/css">
    #box{
        width: 200px;
        height: 100px;
        position: absolute;
        left: 200px;
        top: 200px;
        background-color: deepskyblue;
    }
</style>
<body>
    <div id="box"></div>
</body>
var oBox = document.querySelector("#box");    
//写 写必须是以px为单位的字符串
    oBox.style.width = 300 + "px";
    oBox.style.height = "500px";
    oBox.style.left = "400px";
    oBox.style.top = "600px";
//读 offset相关的属性只能读,返回的是数字
    console.log(oBox.offsetWidth);  //数字  300
    console.log(oBox.offsetHeight);  //数字  500
    console.log(oBox.offsetLeft);  //数字  400
    console.log(oBox.offsetTop);  //数字  600
    console.log(getComputedStyle(oBox,false)["width"]);  //字符串 300px
    console.log(getComputedStyle(oBox,false)["height"]);  //字符串 500px
    console.log(getComputedStyle(oBox,false)["left"]);  //字符串 400px
    console.log(getComputedStyle(oBox,false)["top"]);  //字符串 600px

获取滚动条高度：兼容写法

                                  非IE                                                   IE<br />var _top = document.documentElement.scrollTop || document.body.scrollTop;

<style type="text/css">
    body {
        height: 1000px;    //使页面出现滚动条
    }
</style>
<script type="text/javascript">
    window.onscroll = function(){
        var _top = document.documentElement.scrollTop || document.body.scrollTop;
        console.log(_top);   //拖动滚动条时会打印滚动条的高度
    }
</script>

<style type="text/css">
    body {
        height: 1000px;
    }
    #btn {
        position: absolute;
        top: 900px;
        left: 0;
    }
</style>
<body>
    <button type="button" id="btn">回到顶部</button>
</body>
var oBtn = document.querySelector("#btn");
oBtn.onclick = function(){
    document.documentElement.scrollTop = document.body.scrollTop = 0;
}  //点击按钮（回到顶部）就会回到顶部