web前端基础之JS（三）

BOM对象

window对象
所有浏览器都支持 window 对象。
概念上讲.一个html文档对应一个window对象.
功能上讲: 控制浏览器窗口的.
使用上讲: window对象不需要创建对象,直接使用即可.

Window 对象方法

alert()            显示带有一段消息和一个确认按钮的警告框。
confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           显示可提示用户输入的对话框。

open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。

setInterval()      按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。

方法使用

1~ alert confirm prompt以及open函数

//----------alert confirm prompt----------------------------
    //alert('aaa');
    
    
    /* var result = confirm("您确定要删除吗?");
    alert(result); */

    //prompt 参数1 : 提示信息.   参数2:输入框的默认值. 返回值是用户输入的内容.

    // var result = prompt("请输入一个数字!","haha");
    // alert(result);


    方法讲解:    
        //open方法 打开和一个新的窗口 并 进入指定网址.参数1 : 网址.
        //调用方式1
            //open("http://www.baidu.com");
        //参数1 什么都不填 就是打开一个新窗口.  参数2.填入新窗口的名字(一般可以不填). 参数3: 新打开窗口的参数.
            open('','','width=200,resizable=no,height=100'); // 新打开一个宽为200 高为100的窗口
        //close方法  将当前文档窗口关闭.
            //close();

示例：

var num = Math.round(Math.random()*100);
    function acceptInput(){
    //2.让用户输入(prompt)    并接受 用户输入结果
    var userNum = prompt("请输入一个0~100之间的数字!","0");
    //3.将用户输入的值与 随机数进行比较
            if(isNaN(+userNum)){
                //用户输入的无效(重复2,3步骤)
                alert("请输入有效数字!");
                acceptInput();
            }
            else if(userNum > num){
            //大了==> 提示用户大了,让用户重新输入(重复2,3步骤)
                alert("您输入的大了!");
                acceptInput();
            }else if(userNum < num){
            //小了==> 提示用户小了,让用户重新输入(重复2,3步骤)
                alert("您输入的小了!");
                acceptInput();
            }else{
            //答对了==>提示用户答对了 , 询问用户是否继续游戏(confirm).
                var result = confirm("恭喜您!答对了,是否继续游戏?");
                if(result){
                    //是 ==> 重复123步骤.
                    num = Math.round(Math.random()*100);
                    acceptInput();
                }else{
                    //否==> 关闭窗口(close方法).
                    close();
                }
            }
    }

2、setInterval，clearInterval

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法：<br>     setInterval(code,millisec)

其中，code为要调用的函数或要执行的代码串。millisec周期性执行或调用 code 之间的时间间隔，以毫秒计。

示例：

<input id="ID1" type="text" onclick="begin()">
<button onclick="end()">停止</button>

<script>
    function showTime(){
           var nowd2=new Date().toLocaleString();
           var temp=document.getElementById("ID1");
           temp.value=nowd2;

    }
    var ID;
    function begin(){
        if (ID==undefined){
             showTime();
             ID=setInterval(showTime,1000);
        }
    }
    function end(){
        clearInterval(ID);
        ID=undefined;


    }

</script>

DOM对象

什么是HTML DOM

•     HTML  Document Object Model（文档对象模型）

•     HTML DOM 定义了访问和操作HTML文档的标准方法

•     HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树)

DOM树

        

 画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。

DOM节点

节点类型

HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的：     

• 整个文档是一个文档节点     

• 每个 HTML 标签是一个元素节点     

• 包含在 HTML 元素中的文本是文本节点     

• 每一个 HTML 属性是一个属性节点

其中，document与element节点是重点。

节点关系

节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

•     在节点树中，顶端节点被称为根（root）
•     每个节点都有父节点、除了根（它没有父节点）
•     一个节点可拥有任意数量的子
•     同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分，以及节点之间的关系：

访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素。

节点查找

直接查找节点

document.getElementById('idname')                # id='idname'
document.getElementsByTagName('input')       # 标签为input的标签对象
document.getElementsByName('name')            #name='name'
document.getElementsByClassName('name')     #class='name'

<div id="div1">

    <div class="div2">i am div2</div>
    <div name="yuan">i am div2</div>
    <div id="div3">i am div2</div>
    <p>hello p</p>
</div>

<script>

   var div1=document.getElementById("div1");

////支持;
//   var ele= div1.getElementsByTagName("p");
//   alert(ele.length);
////支持
//   var ele2=div1.getElementsByClassName("div2");
//   alert(ele2.length);
////不支持
//   var ele3=div1.getElementById("div3");
//   alert(ele3.length);
////不支持
//   var ele4=div1.getElementsByName("yuan");
//   alert(ele4.length)

</script>

parentElement       // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

注意，js中没有办法找到所有的兄弟标签！

节点操作

创建节点：

createElement(标签名) ：创建一个指定名称的元素。

例：var  tag=document.createElement(“input")
            tag.setAttribute('type','text');

添加节点：

追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)

 
把增加的节点放到某个节点的前边
somenode.insertBefore(newnode,某个节点);

删除节点：

removeChild()：获得要删除的元素，通过父元素调用删除

替换节点：

somenode.replaceChild(newnode, 某个节点);

节点属性操作：

1、获取文本节点的值：innerText    innerHTML

2、attribute操作

elementNode.setAttribute(name,value)    

elementNode.getAttribute(属性名)        <-------------->elementNode.属性名(DHTML)

elementNode.removeAttribute(“属性名”);

3、value获取当前选中的value值

input   
select （selectedIndex）
textarea  

4、innerHTML 给节点添加html代码：
        该方法不是w3c的标准，但是主流浏览器支持    
        tag.innerHTML = “<p>要显示内容</p>”;

5、关于class的操作：

elementNode.className      #设置或者查找类名为xxx的节点    
#例：查找id为myid的节点，它的类名为什么
console.log(document.getElementId('myid').className);
#例：设置这个节点。它的类名
document.getElementId('myid').className='zzz';


elementNode.classList.add('xxx')   添加节点的'xxx'类属性
elementNode.classList.remove('xxx')   移除节点的'xxx'类属性

 6、改变css样式：

<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontSize=60px;
</script>