细看JS中的BOMDOM对象

Posted 好像在哪见过你

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了细看JS中的BOMDOM对象相关的知识,希望对你有一定的参考价值。

                                    DOM对象模型
 DOM(Document Object Model),是指文档对象模型,是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型。
【DOM树节点】
   DOM节点分为三大类:元素节点,文本节点,属性节点:
  文本节点,属性节点为元素节点的两个子节点;
  通过getElment系列方法,可以去到元素节点;
【查看节点】
1.getElementById:通过id获取唯一的节点;多个同名ID只会取到第一个;
2.etElementByName:通过name取到一个数组,包含1到多个节点;
   使用方式:通过循环取到每个节点,循环次数,从0开始<数组.length
   [查看设置属性节点]
  1.查看属性节点:getAttribute("属性名")
   2.设置属性节点:setAttribute("属性名""属性值")*/
   js修改样式总结】
 1、.className:为元素设置一个新的clas名字;
     div1.className="class1";
2、.style:为元素设置新的样式,注意驼峰命名法;
    div1.style.backgroundColor="red";
3、.style.cssText:为元素同时修改多个样式;
    div1.style.cssText="width:100px;height:100px";
     [查看节点]
1.tagname:获取节点的标签名;
2.innerhtml:设置或者获取节点内部的所有HTML代码;
3.innerText:设置或者获取节点内部的所有文字;
              获取行内样式的方法:var div=document.getElementsByTagName("div");
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DOM代码详述(一)</title>
        
        <script type="text/javascript">            

            
            window.onload = function(){
                var div1 = document.getElementById("div1");//通过ID获取唯一的节点;多个同名ID只会取第一个
                console.log(div1);
                
                console.log(div1.tagName);//查看节点:①属性;获取节点的标签名
                console.log(div1.innerHTML);//②设置或者获取节点内部的所有HTML代码
                console.log(div1.innerText);//③设置或者获取节点内部的所有文字
                
                console.log(window.getComputedStyle(div1,null));//查看所有属性(非IE属性)
                console.log(div1.currentStyle);//查看所有属性(IE属性)
                
            }
            function getById(){
                //取到元素节点的样式属性节点
                var div1 = document.getElementById("div1").style;//获取
                div1.backgroundColor = "#FF00FF";//行级样式表权重1000;所有节点属性,一律驼峰命名法
                
                //取到元素节点
                var divDoc = document.getElementById("div1");//获取
                divDoc.innerHTML = "<s>king_land</s>";//重置修改div中的HTML代码
            }
            
            //——————————————分割线——————————————————
            
            function getByName(){//通过Name取到一个数组,包含1到多个节点;
                
                var div = document.getElementsByName("div1");
                
                console.log(div.length);
                
                //使用方式:通过循环,取到每一个节点,循环次数从0开始,<数组.length
                for(var n = 0 ;n < div.length ; n++){
                    div[n].style.backgroundColor = "#FFFF00";
                }
                
                //div1.backgroundColor = "#FFFF00";
                //div[0].style.backgroundColor = "#FFFF00";//★
                
            }
            
            //——————————————分割线——————————————————
            
            //document.getElementsByTagName();//同Name

            function getByTagName(){
                
                var div = document.getElementsByTagName("div");
                
                div[0].style.backgroundColor = "#00FF00";
                
            }
            
            //——————————————分割线——————————————————
            
            //document.getElementsByClassName();//同Name

            function getByClass(){
                
                var div = document.getElementsByClassName("div1");
                
                div[0].style.backgroundColor = "#00FFFF";
                
            }
            //——————————————分割线——————————————————
            
            function getAttr () {
                
                var img1 = document.getElementById("img1");
                alert(img1.getAttribute("src"));
                
            }//查看属性节点 getAttribute("属性名");
            
            //——————————————分割线——————————————————
            
            function setAttr () {
                
                var img1 = document.getElementById("img1");
                img1.setAttribute("src","../../2-CSS基础语法/img/bg_flower_multi.gif");
                img1.setAttribute("style","width: 100px;height: 100px;");
                
            }//设置属性节点 getAttribute("属性名","属性值");
            
            //——————————————分割线——————————————————
            
            //JS修改样式总结
            //1、.className:为元素设置一个新的class名字   例如:div1.className = "div2";
            //2、.style:为元素设置新的样式   例如:div1.style.background-color = "blue";
            //3、.style.cssText:为元素同时修改多个样式   例如:div1.style.cssText = "width:100px;height:200px;";
            

            
            
            
        </script>
        
        <style type="text/css">
            
            .div1{
                height: 100px;
                width: 100px;
                background-color: #000000;
                color: #FFFFFF;
                line-height: 100px;
                text-align: center;
            }
            
        </style>
        
        
    </head>
    <body>
        
        <div id="div1" name="div1" class="div1">
            这里是测试区
        </div>
        <div id="div1" name="div1" class="div1">
            这里是测试区
        </div>
        <div id="div1" name="div1" class="div1">
            这里是测试区
        </div>
        <img src="../../2-CSS基础语法/img/bg_flower_multi.gif" id="img1"/>
        
        
        <br />
        <button onclick="getById()">通过ID修改divcolor</button>
        <br />
        <button onclick="getByName()">通过Name修改divcolor</button>
        <br />
        <button onclick="getByTagName()">通过TagName修改divcolor</button>
        <br />
        <button onclick="getByClass()">通过ClassName修改divcolor</button>
        <br />
        <button onclick="getAttr()">取到img的src属性值</button>
        <br />
        <button onclick="setAttr()">修改img的src属性值</button>
        
    </body>
</html>

[获取层次节点的常用属性]:

  1、.childNodes:(数组)获取元素的所有子节点(元素节点:子标签、文本节点);
   2、 .firstChild:获取元素的第一个子节点;
   3、.lastChild:获取元素的最后一个子节点;
   4、.ownerDocument:获取当前文档根节点,在html中,为doucument节点;
   5、.parentNode::获取当前文档父节点;
   6、.previousSibling:获取当前节点的前一个兄弟节点
   7、.nextSibling:获取当前节点的后一个兄弟节点;
    8、.attributes:获取当前节点的所有属性节点;
【注意】:上述属性均会获得所有元素节点和文本节点,如果只需要元素节点,需要使用对应的Element属性,例如: .firstChild->.firstElementChild
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <script type="text/javascript">
            
                window.onload = function (){
                    
                    //获取层次节点的常用属性
                    
                    var ul1 = document.getElementById("ul1");
                    
//                    var lis = ul1.getElementsByTagName("li");  //只取到ul1中所有li
//                    var lis = document.getElementsByTagName("li");  //取到页面中所有的li

                    console.log(ul1.childNodes);//获取元素的所有子节点(包含元素节点、文本节点)
                    
                    console.log(ul1.firstChild);//获取元素的第一个子节点
                    
                    console.log(ul1.lastChild);//获取元素的最后一个子节点
                    
                    console.log(ul1.ownerDocument);//获取当前文档根节点,在html文档中为document节点
                    
                    console.log(ul1.parentNode);//获取当前节点的父节点
                    
                    console.log(ul1.previousSibling);//获取当前节点的前一个兄弟节点
                    
                    console.log(ul1.nextSibling);//获取当前节点的后一个兄弟节点
                    
                    //上述属性均会获得所有的元素节点和文本节点,如果只需要元素节点,需要使用对应Element属性,例如:firstChild→firstElementChild
                    
                    console.log(ul1.attributes);//获取当前节点的所有属性节点
                    
                }
                
                //——————————————创建并新增节点——————————————————
                    
                //方法一:.creatElement("标签名")创建一个新节点,需要配合setAttribute()方法设置属性;
                //方法二:.appendChild(节点名)在元素的最后追加一个新节点
                //方法三:.insertBefore(新节点名,目标节点名):将新节点插入到目标节点之前
                //方法四:克隆对象.cloneNode(true/false):需要克隆谁,就用谁去调用克隆节点;传递参数可以为true/false,true表示克隆当前节点及子节点;false表示只克隆当前节点,不克隆子节点。
                    
                function appendImg(){
                    
                    //1、创建一个图片节点
                    var img = document.createElement("img");
                    //2、给img节点设置属性
                    img.setAttribute("src","../../1-HTML基本标签/ivicon.png");
                    //3、将设置好的img节点追加到body最后
                    document.body.appendChild(img)//.setAttribute("src","../../img/2017-02-25_143342.png");
                    
                }
                
                function insertImg(){
                    
                    //1、创建一个图片节点
                    var img = document.createElement("img");
                    //2、给img节点设置属性
                    img.setAttribute("src","../../1-HTML基本标签/ivicon.png");
                    //3、在两个ul之间插入图片
                    var ul2 = document.getElementById("ul2");
                    document.body.insertBefore(img,ul2);
                    
                }
                var count = 2;
                function copyUl(){
                    
                    //1、取到ul2节点
                    var ul2 = document.getElementById("ul2");
                    //2、克隆节点
                    var ul2Clon = ul2.cloneNode(true);
                    count ++;
                    ul2Clon.setAttribute("id","ul"+count)
                    //3、在原ul2节点之前,插入新克隆节点
                    document.body.insertBefore(ul2Clon,ul2);
                    
                }
                
                //——————————————删除和替换节点——————————————————
                
                //1、.removeChild(需删除节点):从父容器中删除指定节点;
                //2、.replaceChild(新节点,被替换节点):用新节点替换被指定节点,如果新节点为页面中已有节点,会将此节点删除后替换到指定节点。
                
                function deleteUl1(){
                    
                    //取到ul1
                    var ul1 = document.getElementById("ul1");
                    if (ul1){
                        //从父容器body中删除ul1节点
                        document.body.removeChild(ul1);
                    }else{
                        alert("憋删了,早没了");
                    }
                    
                }
                
                function ul1ReplaceUl2(){
                    
                    var div = document.createElement("div");
                    div.setAttribute("style","width: 100px;height: 100px;background-color: #20B2AA;");
                    var ul2 = document.getElementById("ul2");
                    document.body.replaceChild(div,ul2);
                    
                }
                
        </script>
        
        <style type="text/css">
            
            ul{
                width: 600px;
                list-style: none;
                padding: 0;
                background-color: #20B2AA;
                display: flex;
                justify-content: space-around;
                margin-top: 20px;
            }
        
        </style>
        
    </head>
    <body>
        
        <ul id="ul1">
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
            <li>第四项</li>
        </ul>
        
        <ul id="ul2">
            <li>第1项</li>
            <li>第2项</li>
            <li>第3项</li>
            <li>第4项</li>
        </ul>
        
        <button onclick="appendImg()">在最后插入一幅图片</button>
        <button onclick="insertImg()">在两个ul之间插入一幅图片</button>
        <button onclick="copyUl()">copy一个ul2</button>
        <br />
        
        <button onclick="deleteUl1()">删除ul1</button>
        <button onclick="ul1ReplaceUl2() ">用ul1替换ul2</button>
        
        
        
        
    </body>
</html>

[创建新增节点]:

1、.createElement("标签名"):创建一个新的节点,需要配合.setAttribute()方法设置新节点的相关属性;
2、.appendChild(节点名):在某元素的最后追加一个新节点;
3、.insertBefore(新节点名,目标节点名):将新节点插入到目标节点之前
4、克隆节点 .cloneNode(true/false):需要克隆谁,就用谁去调用克隆对象;
    传递参数可以是(true/false);
    true:为科隆当前节点和所有子节点;
    false:之科隆当前节点,不克隆子节点(默认);
[删除替换节点]
1、.removeChild(需删除节点):从父容器中,删除指定节点;
2、.replaceChild(,新节点,被替换节点):用新节点替换指定节点,如果新节点为页面中已有节点会删除后替换指定节点
function deleteUl1(){
//取到ul1
var ul1=document.getElementById("ul1");
//从ul的父容器删除ul1
if(ul1){
document.body.removeChild(ul1);
}else{
alert("ul1已经不存在");
}
}
 
【表格对象】
1、rows属性:返回表格中的所有行,数组;
2、insertRow(index):在表格的第index+1行,插入新行;
3.deleteRow():删除表格的第index+1行;
 
表格行对象】:
  1、cells属性:返回表格中的所有行,数组;
  2、rowIndex:返回当前行,在表格中的索引顺序,从0开始;
  3、indexCell(index):在表格的第index+1处插入一个<td>;
  4、deleteCell(index):删除当前行的第index+1个<td>;
 
  【表格的单元格对象】
  1.cellIndex属性:返回单元格在该行的索引顺序,从0开始;
  2、innerHTML属性:返回或设置当前单元格中的HTML代码;
  3、align属性:设置当前单元格的水平对齐方式;
  4、claaName属性:设置单元格的class属性;
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DOM操作表格</title>
        
        <script type="text/javascript">
            
            //表格对象:
            //1、rows属性:返回表格中的所有行,数组;
            //2、insertRow(index):在表格的第index+1行,插入一个新行;
            //3、deleteRow(index):删除表格的第index+1行;
            
            //表格的行对象:
            //1、cells属性:返回当前行中的所有单元格,数组;
            //2、rowIndex属性:返回当前行在表格中的索引顺序,从0开始;
            //3、insertCell(index):在当前行的index+1处插入一个td;
            //4、deleteCell(index):删除当前行的第index+1个td;
            
            //表格的单元格对象:
            //1、cellIndex属性:返回单元格在该行的索引顺序,从0开始;
            //2、innerHTML属性:设置或者返回当前单元格中的HTMl代码;
            //3、align(valign)属性:设置当前单元格的水平对齐方式;
            //4、className属性:设置单元格的class名称。
            
            function newRow(){
                
                var book = prompt("书名:");
                var price = prompt("价格:");
                
                var table = document.getElementsByTagName("table");
                //在表格的最后一行插入一个新行
                var newRow = table[0].insertRow(table[0].rows.length-1);
                //给新行设置单元格
                var cell0 = newRow.insertCell(0);
                cell0.innerHTML = book;
                var cell1 = newRow.insertCell(1);
                cell1.innerHTML = price;
                
                getSum();
                
            }
            
            function deleteRow(){
                
                var table = document.getElementsByTagName("table");
                if(table[0].rows.length>2){
                    table[0].deleteRow(table[0].rows.length-2);
                }else{
                    alert("删删删!删你妹啊删!")
                }
                getSum();
            }
            
            function changeTitle(){
                
                var color = prompt("请输入6位十六进制颜色值:");
                var table = document.getElementsByTagName("table");
                table[0].rows[0].style = "background-color:#"+color;
                
            }
            
            function copyRow(){
                
                var table = document.getElementsByTagName("table");
                var copyRow = table[0].rows[table[0].rows.length-2].cloneNode(true);
                var heJi = table[0].rows[table[0].rows.length-1];
                //由于浏览器,自动将表格的<tr>包裹在<tbody>中
                //所以<tr>实际并非<table>的子节点,故需取到<table>中的<tbody>进行插入;
                
                if(table[0].rows.length>2){
                    table[0].getElementsByTagName("tbody")[0].insertBefore(copyRow,heJi);
                }else{
                    alert("没有可以复制的行");
                }
                getSum();
            }
            
            function getSum(){
                //取到当前表格 表格所有行
                var table = document.getElementsByTagName("table");
                var rows = table[0].rows;
                //
                if(rows.length<=2){
                    rows[rows.length-1].cells[1].innerText = 0 + "元";
                    alert("没有可计算的行!");
                    return;
                }
                //求和
                var sum = 0 ;
                
                for(var i = 1 ; i <= rows.length-2 ; i++){//第0行与最后一行舍弃1  rows.length-2
                    
                    var cells = rows[i].cells;//取到单元格
                    sum += parseFloat(cells[cells.length-1].innerText);//最后一个单元格的  内容(innerText) 转化成数字并求和计算!
                    
                }
                
                rows[rows.length-1].cells[cells.length-1].innerText = sum.toFixed(2) + "元";
                
            }
            
            window.onload = function(){
                getSum();
            }
            
            
        </script>
        
        <style type="text/css">
            
            table{
                border-collapse: collapse;
                width: 400px;
                text-align: center;
                color: #585858;
            }
            td,th{
                border: 1px solid #8B8A8B;
            }
            table tr:last-child{
                color: #E70014;
            }
            
        </style>
        
    </head>
    <body>
        
        
        <table>
            <tr>
                <th>书名</th>
                <th>价格</th>
            </tr>
            <tr>
                <td>看得见风景的房间</td>
                <td>30.00元</td>
            </tr>
            <tr>
                <td>幸福从天而降</td>
                <td>18.50元</td>
            </tr>
            <tr>
                <td>60个瞬间</td>
                <td>32.00元</td>
            </tr>
            <tr>
                <td>合计</td>
                <td></td>
            </tr>
        </table>
        
        <br />
        
        <button onclick="newRow()">增加一行</button>
        <button onclick="deleteRow()">删除最后一行</button>
        <button onclick="changeTitle()">修改标题样式</button>
        <button onclick="copyRow()">复制最后一行</button>
        

    </body>
</html>

 

                             BOM(Browser Object Model) 是指浏览器对象模型
【screen对象】
console.log(screen);
console.log(screen.width);   //屏幕宽度;
console.log(screen.height);    //屏幕高度;
console.log(screen.availWidth);//屏幕可用宽度;
console.log(screen.availHeight);//屏幕可用高度=屏幕高度-底部任务栏高度;
 
 
 location对象
  location完整的URL路径:
  1.协议://主机名(IP地址):端口号(默认80端口)/文件路径?传递参数(参数名=参数值name1=value1&name2=value2)#锚点*/
console.log(location.href);//完整路径
console.log(location.protocol);//使用的协议http:https:ftp:file:mailto:
console.log(location.pathname);//文件路径
console.log(location.port);//端口号
console.log(location.search);//从?开始的部分
console.log(location.hostname);//主机名(IP地址)
console.log(location.host);//主机名+端口号
console.log(location.hash);//从#开始的锚点
window.location="http://www.baidu.com";//使用JS跳转页面
function locationAssign(){
location.assign("http://www.baidu.com");
加载新文档,加载之后,可以回退;
}
function locationReplace(){
location.replace("http://www.baidu.com");
使用新的文档,替换当前文档,替换之后不能回退;
}
function locationReload(){
重新加载当前页面
reload(true):从服务器重新加载页面
reload():在本地刷新当前页面*/
        location.reload(true);
}
console.log(history.length);
浏览历史列表的个数
history.forward();前进到前一个页面;
  history.back();前进到后一个页面;
  history.go(-1);跳转到任意页面:前一个页面为第一个,后一个页面为-1个
Navigator 了解
console.log(navigator.appName); //产品名称
console.log(navigator.appVersion); //产品版本号
console.log(navigator.userAgent); //用户代理信息
console.log(navigator.platform); //系统平台
navigator.plugins。返回一个数组,检测浏览器安装的所有插件
>>>主要的属性:
description:插件的描述信息
        filename:插件在本地磁盘的文件名
        length:插件的个数
name:插件名
console.log(navigator.plugins);//检查浏览器安装的插件信息
navigator.mimeTypes 浏览器插件,所支持的文件类型
>>>主要属性
description:MIME类型描述
enabledPlugin:支持此类型的浏览器插件
suffixes:此类型可能的后缀名
type:MIME类型的写法,例如: image/x-icon text/css
console.log(navigator.mimeTypes);//检查浏览器安装的插件支持的文件类型
 
【重点】window对象的常用方法:
>>>window对象中的所有方法,均可以省略前面的window,比如close();
                1.prompt:弹窗接受用户输入;
                2.alert:弹窗警告;
                3.confirm:带有确认/取消按钮的提示框;
                4.close:关闭窗口;
                5.open:重新打开一个窗口,传入参数URL/窗口名称/窗口特征;
                6.setTimeout:设置延时执行,只会执行一次;
                7.setInterval:设置定时器,循环每个N毫秒执行一次;
                         两个参数:需要执行的function/毫秒
                8.clearTimeout:清除延时;
                9.clearInterval:清除定时器
传入参数:调用setInterval时返回一个ID,通过变量接受ID,传入clearInterval;