4 BOM&DOM编程

BOM&DOM

 

BOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM对象</title>
</head>
<body>
    <!-- 浏览器对象模型  BOM-->
    <!-- 
        1.window
            alert()
            confirm()
            prompt()

            setInterval()
            setTimeout()
        2.location
            href
            hash
            url
            ...
            reload()
        3.screen
        4.history
            go()
     -->
</body>
</html>
BOM对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert| confirm| prompt</title>
</head>
<body>
    <script type="text/javascript">
        window.alert('mjj');
        var a = window.confirm('你确定要离开网站?');
        console.log(a);
        var name = window.prompt('请输入你早晨吃了什么?','mjj');
        console.log(name);
    </script>
</body>
</html>
window对象常用方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>setTimeout()| setInterval()</title>
</head>
<body>
    <script type="text/javascript">

        // 一次性定时器
        window.setTimeout(function(){
            console.log('mjj');
        },1000)
        console.log('xiongdada');
        
        //周期性循环定时器
        var num = 0;
        var timer = null;
        timer = setInterval(function(){
            num++;
            if (num > 5) {
                clearInterval(timer);
                return;
            }
            console.log('num:'+ num);
        },1000);

        
    </script>
    
</body>
</html>
定时器方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>location对象</title>
</head>
<body>
    <span>luffy</span>
    <form>
        <input type="text" name="user">
        <input type="password" name="pwd">
        <input type="submit">
    </form>
    <script type="text/javascript">
        // console.log(location.host);
        //             location.hostname;
        //             location.port;
        //             location.href;
        //             location.pathname;
        //             location.protocol;
        //             location.search;

    var oSpan = document.getElementsByTagName("span")[0];

    oSpan.onclick = function () {
        location.href = "http://www.luffycity.com";   //点击span时，跳转到指定链接
 //     window.open("http://www.luffycity.com"","_blank");  //方式二 跳转
    }

        

    </script>
</body>
</html>
location对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>如何访问每个查询字符串参数</title>
</head>
<body>
    <script type="text/javascript">
        // http://192.168.12.4:8080/04%20location%E5%AF%B9%E8%B1%A1.html?user=mjj&pwd=123
        // ?user=mjj&pwd=123 
        /*
            var args = {
                user:'mjj',
                pwd:'123'
            }
        */
        function getQueryString(){
            // 1.取得去掉问号查询字符串 user=mjj&pwd=123 
            var qs = location.search.length > 0 ?  location.search.substring(1): '';
            // 2.取得每一项 存放到数组中
            var items = qs.length ?  qs.split('&'): []; //["name=mjj", "pwd=123"]
            var item = null,name = null,value = null,args = {};
            for(var i = 0; i < items.length; i ++){
                item = items[i].split('='); //['name%20','mjj']
                name = decodeURIComponent(item[0]);
                value = decodeURIComponent(item[1]);
                if (name.length) {
                    args[name]  = value;
                }
            }
            return args;
        }
        var args  = getQueryString();
        console.log(args.name);
        console.log(args.pwd);



    </script>
</body>
</html>
访问每个查询字符串参数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>位置操作</title>
</head>
<body>
    <script type="text/javascript">
        console.log('mjj')
        // 2秒之后跳转小猿圈 的web页面
        setTimeout(function(){
            // location.href = 'https://www.apeland.cn/web'; //产生历史记录
            // location.replace('https://www.apeland.cn/web'); 
            // location.reload();
        },2000)
    </script>
</body>
</html>
位置操作
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>navigator对象</title>
</head>
<body>
    <script type="text/javascript">
        console.log(navigator.plugins);
        function hasPlugin(name){
            // 如果有插件 返回true 反之亦然
            name = name.toLowerCase();
            for(var i = 0; i < navigator.plugins.length; i++){
                if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
                    // 有此插件
                    return true;
                }else{
                    return false;
                }
            }
        }
        alert(hasPlugin('Flash'));
        alert(hasPlugin('Chrome PDF Plugin'));

    </script>
</body>
</html>
Navigator对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>history对象</title>
</head>
<body>
    <script type="text/javascript">
        // console.log(history);
        var count = 0;
        setTimeout(function(){
            count++;
            // console.log(count);
            history.go(-2);//0刷新 
        },2000)
    </script>
</body>
</html>
history对象

 

DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class list</title>
</head>
<body>
    <h2>你要买什么课程？</h2>
    <p title='请您选择购买的课程'>本课程是web全栈课程，期待你的购买！</p>
    <ul id='classList'>
        <li class='item'>JavaScript</li>
        <li class='item'>css</li>
        <li>DOM</li>
    </ul>
</body>
</html>
01 认识DOM
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02 节点</title>
</head>
<body>
    <p title="我是mjj" class="" id="">mjj</p>
    <ul>
        <li></li>
    </ul>
    <!-- 节点  node-->
    <!-- 1.元素节点(element node)  2.文本节点 (text node) 3.属性节点 (attribue node)-->

    <!-- 没有内容 的文档是没有任何价值的，而大多数内容都是有文本提供-->
    
</body>
</html>
02 节点
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class list</title>
</head>
<body>
    <h2>你要买什么课程？</h2>
    <p title='请您选择购买的课程'>本课程是web全栈课程，期待你的购买！</p>
    <ul id='classList'>
        <li class='item'>JavaScript</li>
        <li class='item'>css</li>
        <li>DOM</li>
    </ul>

    <!-- 节点类型：
        1.元素节点
        2.属性节点
        3.文本节点
     -->
     <script type="text/javascript">
         // 1.document.getElementById() 单个对象
         var eleNode = document.getElementById('classList');
         console.log(eleNode);
         console.log(typeof eleNode);
         // 2.document.getElementsByTagName()  获取出来的是一个节点对象集合  有点像数组  push()
         var olis = document.getElementsByTagName('li');
         var oTitle = document.getElementsByTagName('h2');
         console.log(oTitle[0]);
         console.log(olis.length);
         for(var i = 0; i < olis.length; i ++){
             console.log(olis[i]);
         }
         console.log(typeof olis);
         // 3.document.getElementsByClassName('item');获取出来的是一个节点对象集合  
         var oItems = document.getElementsByClassName('item');
         console.log(oItems);


     </script>
</body>
</html>
03 获取元素节点的方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class list</title>
    <style type="text/css">
        #box{
            color: red;
        }
    </style>
</head>
<body>
    <h2>你要买什么课程？</h2>
    <p title='请您选择购买的课程'>本课程是web全栈课程，期待你的购买！</p>
    <ul id='classList'>
        <li class='item'>JavaScript</li>
        <li class='item'>css</li>
        <li>DOM</li>
    </ul>

    <!-- 
     -->
     <script type="text/javascript">
         var oP = document.getElementsByTagName('p')[0];
         // 获取属性值 有一个必需的参数，这个节点对象的名字
         var title = oP.getAttribute('title');
         var className  = oP.getAttribute('class');
         console.log(title);
         console.log(className);

         // 设置属性值  setAttribute(name,value)
         oP.setAttribute('id', 'box'); //不改变源码，动态加载



     </script>
</body>
</html>
04 获取属性和设置属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点属性</title>
</head>
<body>
    <!-- nodeName   nodeValue  nodeType -->
    <div id="box" title="我是文本">我是一个文本节点<!--我是注释--></div>
    <script type="text/javascript">
        // 1.元素节点
        var oDiv =  document.getElementById('box');
        console.log(oDiv.nodeName + "| " + oDiv.nodeValue + "| " + 
            oDiv.nodeType);

        // 2.获取属性节点
        var attrNode = oDiv.attributes[0];
        console.log(attrNode.nodeName + "| " + attrNode.nodeValue + "| " + 
            attrNode.nodeType);
        // 3.获取文本节点
        var textNode = oDiv.childNodes[0];
        console.log(textNode.nodeName + "| " + textNode.nodeValue + "| " + 
            textNode.nodeType);

        // 4.获取注释节点
        var commentNode = oDiv.childNodes[1];
        console.log(commentNode.nodeName + "| " + commentNode.nodeValue + "| " + 
            commentNode.nodeType);

        console.log(document.nodeType);





    </script>
</body>
</html>
05 节点属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点对象的其它常用属性</title>
</head>
<body>
    <div class="previous">我是上个兄弟</div>
    <div id="father">
        <p>mjj</p>
        <p>mjj2</p>
    </div>
    <div class="sibling">我是下个兄弟</div>

    <script type="text/javascript">
        var oFather = document.getElementById('father');
        console.log(oFather.childNodes);
        // console.log(oFather.childNodes[0]);
        // console.log(oFather.firstChild);
        // console.log(oFather.childNodes[oFather.childNodes.length - 1]);
        // console.log(oFather.lastChild);
        // console.log(oFather.parentNode.parentNode);
        console.log(oFather.nextSibling);//下一个兄弟
        // console.log(oFather.previousSibling); //上一个兄弟

        function get_childNodes(fatherNode){
            var nodes = fatherNode.childNodes;
            var arr = [];//保存已经获取的元素节点对象
            for(var i = 0; i < nodes.length; i++){
                if (nodes[i].nodeType === 1) {
                    arr.push(nodes[i]);
                }
            }
            return arr;

        }
        var childnodes = get_childNodes(oFather);
        console.log(childnodes[0]);

        function get_nextSibling(n){
            var x = n.nextSibling;
            while(x  && x.nodeType != 1){
                x = x.nextSibling;
            }
            return x;
        }
        console.log(get_nextSibling(oFather));
        

    </script>
</body>
</html>
06 节点对象的其他属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07 节点方法</title>
    <style type="text/css">
        .active{
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="box">

        <p id="active">mjj</p>

    </div>

    <!-- 
        动态的操作节点
        1.创建节点  createElement()
        2.插入节点 appendChild()
                   insertBefore(newNode,node)
             3.删除节点 removeChild(childNode)
             4.替换节点 replaceChild(newNode,node)
             5.创建文本节点 createTextNode()
             6.标签文本内容值的操作使用的是 " innerHTML 或 innerText"    input输入框是：value
     -->
     <script type="text/javascript">
         var oDiv = document.getElementById('box');
         var oAtive = document.getElementById('active');

         var newNode = document.createElement('p');
         var newNode2 = document.createElement('p');
         var newNode3 = document.createElement('a');

         console.log(newNode === newNode2);

         newNode.innerHTML = '<a href="#">alex@qq.com</a>';
         newNode2.innerHTML = '<a href="#">mjj@qq.com</a>';
         newNode3.setAttribute('href','http://www.baidu.com');
         newNode3.innerHTML = '百度一下';

         newNode.setAttribute('class', 'active');
         oDiv.appendChild(newNode);
         // 第一个参数是新插入的节点，第二个参数是参考的节点
         oDiv.insertBefore(newNode2,oAtive);

         

         /*
         var textNode = document.createTextNode('alex');
         newNode.appendChild(textNode);
         */
         newNode = null;//释放对象 

         // oDiv.removeChild(oAtive); 删除操作
         oDiv.replaceChild(newNode3, oAtive)


         // newNode.innerText = '<a href="#">alex@qq.com</a>';


         
     </script>
    
</body>
</html>
07 节点方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态操作样式</title>
    <style type="text/css">
        .highLight{
            background-color: black;
            color: white;
            width: 250px;
            height: 250px;
            line-height: 250px;
            text-align: center;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p id='box'>MJJ</p>
    <script type="text/javascript">
        // nodeObj.style
        var para = document.getElementById('box');
        /*
        1、直接操作样式属性
        console.log(para.style);
        para.style.color = 'white';
        para.style.backgroundColor = 'black';
        para.style.width = '250px';
        para.style.height = '250px';
        para.style.textAlign = 'center';
        para.style.lineHeight  = '250px';
        para.style.fontSize  = '30px';
        */

        // 2、通过控制属性的类名来控制样式
        para.setAttribute('class', 'highLight');





        
    </script>
</body>
</html>
08 操作元素节点对象的样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <style type="text/css">
        #box{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
     <!-- <div id="box" onclick="add();"></div> -->
     <div id="box" ></div>

     <script type="text/javascript">
         var oDiv = document.getElementById('box');

         var isBlue = true;
         oDiv.onclick = function(){
             if (isBlue) {
                 // this 指向了当前的元素节点对象
                 this.style.backgroundColor = 'red';
                 isBlue = false;
             }else{
                this.style.backgroundColor = 'blue';
                 isBlue = true;
             }
         };
         // function add(){
         //     alert(1111);
         // }
         
     </script>

</body>
</html>
09 事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onmouseover()和onmouseout()事件</title>
    <style type="text/css">
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box">
    </div>
    <script type="text/javascript">
        // 1.找开关   2.摁一下   3.灯亮了
        // 1.找到触发的事件对象    
        var oDiv = document.getElementById('box');
        // 2.鼠标滑过事件  
        oDiv.onmouseover = function(){
            console.log(111);
            // 3.事件处理程序
            this.style.backgroundColor = 'green';
        }
        // 2.鼠标移开事件  
        oDiv.onmouseout = function(){
            // 3.事件处理程序
            this.style.backgroundColor = 'red';
        }

    </script>
    
</body>
</html>
10 鼠标悬浮事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>光标聚焦和失焦事件</title>
    <style type="text/css">
        .text{
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <form action="">
        <p class="name">
            <label for="username">用户名：</label>
            <input type="text" name="user" id="username">

        </p>
        <p class="pwd">
            <label for="pwd">密码：</label>
            <input type="password" name="wpd" id="pwd">
        </p>
        <input type="submit" name="">
    </form>
    <script type="text/javascript">
        var userName = document.getElementById('username');
        var newNode = document.createElement('span');
        //光标聚集
        userName.onfocus = function(){
            newNode.innerHTML = '请输入用户名';
            newNode.setAttribute('class', 'text')
            userName.parentNode.appendChild(newNode);
        }
        //失焦
        userName.onblur = function(){
            newNode.innerHTML = '请输入正确的用户名';
            newNode.setAttribute('class', 'text')
            userName.parentNode.appendChild(newNode);
        }
    </script>
</body>
</html>
11 表单上控制事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容选中事件和内容改变事件</title>
</head>
<body>
    <!-- onselect onchange -->
    <textarea cols="30" rows="10">请写入个人简介，字数不少于200字</textarea>
    <input type="text" name="" value="mjj">
    <script type="text/javascript">
        var textArea = document.getElementsByTagName('textarea')[0];
        var inputObj = document.getElementsByTagName('input')[0];

        textArea.onselect = function(){
            console.log('内容被选中');
        }
        inputObj.onchange = function(){
            console.log('内容被改变了');
        }
        /*
        inputObj.oninput = function(){
            console.log('内容被实时改变了');
            console.log(this.value);
        }
        */
    </script>
</body>
</html>
12 内容选中事件和改变事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>窗口加载事件</title>
    <script type="text/javascript">
        /*
        setTimeout(function(){
            var oDiv = document.getElementById('box');
            console.log(oDiv);
            oDiv.onclick = function(){
                this.innerHTML = 'alex';
            }
        }, 0)
        */
        // 等待文档元素加载完成才会调用onload()
        window.onload = function(){
            var oDiv = document.getElementById('box');
            console.log(oDiv);
            oDiv.onclick = function(){
                this.innerHTML = 'alex';
            }
        }
        // window.onload = function(){
        //     console.log(11111);
        // }

    </script>
</head>
<body>
    <div id="box">MJJ</div>
    
</body>
</html>
13 窗口加载事件
DOM  
Document  Object Model 文档对象模型
var person = {
    name:'mjj',
    fav:function(){

    }
}
js中对象分类三种：
1.用户定义对象 
2.内建对象 Array Date Math
3.宿主对象


Model  Map(地图)


DOM 看作一颗“树”

DOM把文档看作一颗“家谱树”

parent child  sibling

    爷爷 

 爸爸             叔叔
你   妹妹       表兄弟
DOM介绍.txt

 

练习一下

1.声明一个add函数，要求函数有返回值，并打印结果

<script type="text/javascript">
function add(x,y){
var result = x * y;
return result;
}
var r = add(10,20);
console.log(r)
</script>

 

2.对“hello world”进行翻转处理 要求变为："dlorw olleh"

<script type="text/javascript">
function reverseString(str){
array =str.split("")
array = array.reverse()
str=array.join("")
return str;

}

console.log(reverseString("hello world"))
</script>

3.如何定义一个对象？使用字面量方式 要求：该对象有名字、年龄、爱好多个

<script type="text/javascript">
var andy = {
name:'andyzhang',
age:34,
hobby:"lookMovie,ball,eat"
}
console.log(andy)
</script>

 

4.setTimeout()和setInterval()的区别？如何理解他们的作用

在js中有两种定时器：

一次性定时器：setTimeout()

周期性循环定时器: setInterval()

对于这两个方法，需要注意的是如果要求在每隔一个固定的时间间隔后就精确地执行某动作，那么最好使用setInterval，而如果不想由于连续调用产生互相干扰的问题，尤其是每次函数的调用需要繁重的计算以及很长的处理时间，那么最好使用setTimeout
5.对于标签文本内容值的操作使用的是哪个属性？input输入框呢？

标签文本内容值的操作使用的是 " innerHTML 或 innerText"    input输入框是：value

 

6.获取DOM的三种方式？

var oDiv1 = document.getElementById("box1");      //方式一：通过id获取单个标签
 
var oDiv2 = document.getElementsByTagName("div")[0];     //方式二：通过 标签名 获得 标签数组，所以有s
 
var oDiv3 = document.getElementsByClassName("box")[0];  //方式三：通过 类名 获得 标签数组，所以有s
7.如何设置标签属性的值？比如类名如何设置？如何设置多个类型

双闭合标签： innerText或者innerHTML
单闭合标签：除了img标签，就剩input了，使用value进行赋值
所谓标签属性,就是对标签中（字面上看到的）属性的操作。比如像每个标签中id，class，title、img

标签的src属性和alt属性、a标签的href属性、input标签中的name、type属性等等

设置类名例： 
//获取事件源 
<p id="oP">练习</p>
var opClass = document.getElementById('oP')
var opClass.οnmοuseοver=function(){
　    opClass.className = "className"
}
所谓标签属性，就是对标签中（字面上看到的）属性的操作。比如像每个标签中id,class,title,img标签的src属性和

alt属性、a标签的href属性、imput标签中的name、type属性等等 

 

8.列举你知道的js事件

onclick  　　鼠标单击

ondblclick　　鼠标双击

onkeyup　　按下并释放键盘上的一个键时触发

onchange 　文本内容或下拉菜单中的选项发生改变

onfocus　　获得焦点，表示文本框等获得鼠标光标

onblur　　  失去焦点，表示文本框等失去鼠标光标

onmouseover  鼠标悬停，即鼠标停留在图片等的上方

onmouseout    鼠标移出，即离开图片等所在的区域

onload  　　    网页文档加载事件

onunload　　  关闭网页时

onsubmit　　 表单提交事件

onreset 　　   重置表单时

 

9.如何设置样式属性？比如设置该div的背景颜色为红色

例 :   

<style>
.inp{
background-color:red;
}
</style>

<body>
<input type="text" value =" 测试" class="inp">
</body>

10.使用DOM操作，创建一个p标签，设置内容为alexsb，将p标签插入到div中。

然后点击某个删除按钮，移除当前创建的p标签（练习dom的创建，修改内容，追加，删除）

 

<body>
<button id = 'btn'> 按钮添加</button>
<button id="btn1">按钮删除</button>

</body>
<script type="text/javascript">
var oBtn = document.getElementById('btn')
var oBtn1 = document.getElementById('btn1')

//定义div,p标签
var oDiv = document.createElement('div')
var oP = document.createElement('p')
oDiv.appendChild(oP)

oDiv.id = "box";
oP.id='content';

oP.innerText = "alexsb"
oBtn.onclick = function(){
//动态添加div 标签到页面
this.parentNode.insertBefore(oDiv,oBtn)

}

oBtn1.οnclick=function(){
oBtn1.parentNode.removeChild(oDiv)

}


</script>

11.如何打开一个新的网站，比如打开路飞学城官网

1、设置 a 标签，点击触发。

<a id="text" href="https://www.luffycity.com">路飞学城</a>

 

posted @ 2021-06-14 12:31  风hua  阅读(62)  评论(0)  编辑  收藏  举报