第九章 DOM和BOM

最新推荐文章于 2024-06-14 15:02:13 发布

W_Queen&

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量103

点赞数

文章标签： javascript dom

本文链接：https://blog.csdn.net/qq_45983879/article/details/109605780

版权

Broswer Object Model 浏览器对象模型

window 对象常用的属性和方法

三个弹出框:特点阻塞式代码执行

alert(“内容”) 弹出框;
confirm("提示信息,“默认值”) 确认返回true 取消返回false
prompt (“提示信息”,“默认值”) 输入框返回数值为字符串

   //弹出框且打印数据
 	alert("heihei");
 	console.log("xixi");
 	//注意:弹出框是具有阻塞行为的
 	//从页面接收数据
 	//prompt([描述信息],[默认值]);
 	var x = prompt("请输入价格",666);
 	console.log(+x+1);
 	//返回boolean值 
 	confirm([描述信息]);
 	var flag;
 	flag = confirm("确定要转账嘛");
 	console.log(flag);

两个定时器

setInterval(执行任务,间隔时间):连续执行定时器
clearInterval()停止执行时间
setTimeout(执行任务,间隔时间):用法同上只执行一次延时性
clearTimeout()停止定时器(一般用的不太多)
案例

<input type="button" value="开始" id="begin">
<input type="button" value="结束" id="end">
<div id="box></div>

#box{
    width:200px;
    height:200px;
    background-color:pink;
}

var d=document.getElementById("box");
var b=document.getElementById("begin");
var e=document.getElementById("end");
var t=null;//注意全局变量定时器的作用域
b.onclick=function(){
    t=setTimeout(function(){
        d.style.display="none";
    },3000);
}
e.onclick=function(){
    clearTimeout(t);
}

一个事件:onload事件(onload事件会在页面或图像加载完成后立即发生)

window.onload=function(){
    console.log("页面加载完成");
}
console.log("页面正在加载");

window对象的属性和方法都可以省略window,直接使用
所有全局变量都可以是window对象的属性
所有全局函数都是window对象的方法

var num=666;
document.write(window.num);
function fun(){
    document.write("heihei");
}
window.fun();

location地址对象

页面的跳转

    location.href  可读写
    //当前页面地址 读
    document.write(loaction.href);
    //页面在三秒后跳转到外网
    setTimeout(function(){
        location.href="http://www.baidu.com";
    },3000);
    //replace重新加载
    location.replace("url");
    //覆盖原来的网页,没有浏览痕迹
    location.replace("http://www.baidu.com");
    //页面刷新(没有太大的实际意义)
    location.reload();

document 文档对象 (每个载入浏览器的HTML文档多会成为Document对象,Document对象使我们可以从脚本中对HTML页面的所有元素进行访问,也是window对象的一部分,可以通过window.document属性对其进行访问)

    //document.write()
    //1.自带字符串解析
    //document.write("sdfsdf" + "<br/>" + "heihei");
    document.write("<font color='yellow'>"+666+"</font>");
    //2.如果该方法与事件连用，会直接覆盖原网页
    var oBtn = document.getElementById("btn");
    oBtn.onclick = function(){
        document.write("heihei");
    }

DOM 文档对象模型

根据层次关系访问节点:(包括文本和元素)
- parentNode 返回节点的父节点
- childNodes 返回子节点集合,childNode[i]
- fir stChild 返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点
- lastChild 返回节点的最后一个子节点
- nextSibling 下一个节点
- previousSibling 上一个节点
通过层级关系访问元素节点
- firstElementChild 返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点
- lastElementChild 返回节点的最后一个子节点
- nextElementSibling 下一个节点
- previousElementSibling 上一个节点
  var str=a.firstElementChild.innerHTML
注意文本节点和元素节点(文本节点中往往含有空格和换行,所以当你在使用childNodes[0]时,并不是你想想中获得body里面的第一个元素,而是返回的是undefind,原因是body的起始标签的后面并不是第一个元素,而是空格和换行,这是文本节点,不是我们认为的元素节点)
nodeType判断节点类型
- 元素节点
123
var oP=document.querySelector("#_p"); console.log(oP.nodeType);//返回值为1 - 文本节点 console.log(oP.firstChild.nodeType)//返回到控制台的是3

节点的操作

document.createElement(HTML标签名)//创建一个元素节点
node.appendChild(newChild)//newChild被添加到孩子列表中的末端
node.inserBefore(newChild,referenceNode)//将newChild节点插入到referenceNode之前
node.remove()//删除node子节点
node.replaceChild(newChild,oldChild)//用newChild节点替换oldChild节点

    var oW=document.creatElement("h2");
    oW.innerHTML="丢了你-井胧";
    //连接
    documnet.body.appendChild(oW);//document.body直接代表body的js形式
    var oP=document.createElement("p");
    oP.innerHTML="觉得自己傻得可以.";
    document.body.appendChild(oP);
    //流程:先创建,后追加

删除节点:

    <body>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>MySql</li>
            <li>PHP</li>
        </ul>
        <button type="button">删除</button>
    </body>
    <script>
    //删除的方法  元素.remove();
        var oBtn = document.querySelector("button");
        var oUl = document.querySelector("ul");
        //var arrLis = oUl.childNodes;
        var arrLis = oUl.children;//返回父元素的子元素，以数组形式返回
        
        oBtn.onclick = function(){
            arrLis[2].remove();
        }
    </script>
    //节点.remove(无参) 直接删除 以后这个用的更多一些 
    //list.lastElementChild.remove();

动态表格的创建

   //首先创建一个table
   var oTb=documnet.createElement("table");
   //声明表格的边框为1px
   oTb.border="1px";
   var count=0;
   //创建三个tr
   for(var i=0;i<3;i++){
       var oTr=document.createElement("tr");
       //每一个tr下面包含着三个td,这样构成一个树形结构
       for(var j=0;j<3;j++){
           var oTd=document.createElement("td");
           oTd.innerHTML=++count;
           //将oTd追加给oTr
           oTr.appendChild(oTd);
       }
       //向列表里面添加名叫"删除"的列4热热热
       var oDelTd=document.createElement("td");
       oDelTd.innerHTML="删除";
       oTr.appendChild(oDelTd);
       //this:一定出现在函数体内
       //与事件连用时,代表触发该事件的元素本身
       oDelTd.onclick=function(){
           this.parentNode.remove();
       }
       //将oTr追加给table
       oTb.appendChild(oTr);
   }
   //将oTb追加给body这样才算是完整的在js里面创建了表格
   document.body.appendChild("oTb");

W_Queen&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第九章 DOM和BOM

Broswer Object Model 浏览器对象模型window 对象常用的属性和方法三个弹出框:特点阻塞式代码执行alert(“内容”) 弹出框;confirm("提示信息,“默认值”) 确认返回true 取消返回falseprompt (“提示信息”,“默认值”) 输入框返回数值为字符串 //弹出框且打印数据 alert("heihei"); console.log("xixi"); //注意:弹出框是具有阻塞行为的 //从页面接收数据 //promp
复制链接

扫一扫