JS操作BOM和DOM 

BOM(（Brower objrct model）浏览器对象模型),可以对浏览器窗口进行访问和操作
使用BOM，开发者可以移动窗口，改变状态栏中的文本以及执行其他与页面不直接
相关的动作，使javascript有能力与浏览器对话

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

windows对象下面的方法：
alert 显示带有一段消息和一个确认按钮的警告框 window.alert("hello world")
confirm 显示带有一段消息及确认按钮和取消按钮的对话框
// var ret=window.confirm("hello alex")//返回true和false
// console.log(ret);

prompt 显示可提示用户输入的对话框
// var text=prompt("hello")//返回文档内容
// console.log(text)

open打开网址  colse关闭窗口
//open("http://www.baidu.com");


setInterval()按照指示的周期(以毫秒计)来调用函数或计算表达
clearInterval()取消由setInterval()设置的timeout
setTimeout() 在指定的毫秒数后调用函数或计算表达式
clearTimeout() 取消由setTimeout() 方法设置的timeout
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #id1{
            width: 200px;
            height: 50px;
        }
    </style>
    <meta charset="utf-8">
</head>
<body>

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

<!-- <div onclick="f()">click</div> -->
<script>

// Date()日期事件对象 new Date

var clock1
function begin(){
    if(clock1==undefined){
        showTime();
        clock1=setInterval(showTime,1000)
    }
}


function showTime(){
    var cureent_time=new Date().toLocaleString();
    var ele=document.getElementById("id1")

    ele.value=cureent_time;
}

function end(){
    clearInterval(clock1);
    clock1=undefined
}

//setTimeout()
//
function f(){
    console.log("123")
}

var c=setTimeout(f,1000)
clearTimeout(c)
</script>
</body>
</html>
计时器实例

 

Histroy对象

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<button onclick="f()">刷新</button>

<a href="js_object.html">click</a>
<button onclick="history.forward()">>>></button>

<script type="text/javascript">
//History 对象
//History 对象包含用户(在浏览器窗口中)访问过的url
//History对象时windows对象的一部分，可通过windows.history属性·对其进行访问

//history.back() 加载history列表中的前一个URL
//forward() 加载history列表中的下一个URL
//go() 加载history列表中的某个具体页面

//Location对象
//Location对象包含有关当前url的信息
//Location对象是window对象的一个部分，可以通过window.location属性来访问
//
//

//location.assign("http://www.baidu.com")

function f(){
    // location.reload()
    location.replace("http://www.baidu.com")
}



</script>

</body>
</html>
history对象是例

 

 

JS操作DOM对象；

DOM是W3C的标准，DOM定义了访问HTML和XMl文档的标准
//"W3C"文档对象模型(DOM)是中立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档内容，结构和样式
//什么是HTML DOM--->html DOM定义了所有html元素的对象和属性，以及访问他们的方法
//根据W3C的html DOM标准，html文档中的所有内容都是节点(NODE):
//整个文档是一个文档节点(docunment对象)
//每个html元素是元素节点(element对象)
//html元素内的文本是文本节点(text对象)
//每个HTML属性是属性节点（attribute对象）
//注释是注释节点(comment对象)


//Node对象--自身属性
//getElementsByClassName返回一个Class(类名)属性数组
var ele=document.getElementsByClassName('p1')[0];//拿到元素对象
// console.log(ele.nodeType);///节点属性
//     console.log(ele.nodeValue);注意这里获取文本节点的方式
// console.log(ele.nodeName);
// console.log(ele.innerHTML);

// ele.innerHTML="hello world";
 
//导航属性
var p_ele=ele.parentNode;//查找父级节点
console.log(p_ele.nodeName);

// var b_ele=ele.nextSibling;//查找兄弟节点
var b_ele=ele.nextElementSibling;
console.log(b_ele.nodeName);
console.log(b_ele.innerHTML);

var ele3=document.getElementsByClassName('div1')[0];
console.log(ele3.children[1].children[0].children);


//children 所有子标签 数组
//parentElement父级元素
//firstElementchild 第一个子标签元素   注意这里获取文本节点的方式
//lastElementchild  最后一个子标签元素
//nextElementtSibling 下一个兄弟标签元素
//previousElementSibling 上一个兄弟标签元素

JS选中元素的四中方法
var obj=Document.getElementById("id名字")
var obj1=Document.getElementByClassName("class名字")
var obj2=Document.getElementByTagName("标签名字")

JSDOM事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="text" id="serach" value="请输入用户名" onfocus="f()" onblur="full()">

<script>
    //onclick 当用户点击某个对象时调用的事件句柄
    //ondbloclick 当用户双击某个对象时调用的事件句柄
    //onfocus 元素获得焦点
    //onblur 元素失去焦点  表单验证，用户离开输入框时，代表已经输入完成了
    //onchange 域的内容被改变  应用场景：通常用于表单元素，当元素内容被改变时触发（三级联动）
  
var ele =document.getElementById("serach");
function f(){
    if (ele.value=="请输入用户名")
    {
        ele.value="";
    };
    
};


function full(){
    if (!ele.value.trim()){
        ele.value="请输入用户名";
    };
};

</script>

</body>
</html>
JS_DOM事件

 



posted @ 2019-11-22 10:46  coldplaycode  阅读(599)  评论(0)  编辑  收藏  举报

coldplaycode