es6-day04-操作DOM和BOM

最新推荐文章于 2025-05-07 08:00:00 发布

原创最新推荐文章于 2025-05-07 08:00:00 发布 · 585 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用JavaScript操作浏览器对象模型(BOM)和文档对象模型(DOM)，包括获取、更新、添加和删除DOM节点的方法，以及BOM的主要属性和方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作BOM和DOM</title>
</head>
<body>
<p id="x" class="xx">p标签</p>
<div id="y" class="xx">
    <span id="ww" class="xx">我的id是ww</span>
    <p id="zz"> 我的id是zz</p>
    <div><h1>我是h1</h1></div>
</div>
<p id="qq" >我被添加到。。。</p>
<script type="text/javascript">
    'use strict'
    //json：本质是个字符串
    //对象转化成json
    var person = {
        name: 'xiaoming',
        age: 18,
        home: 'beijing'
    }//{}代表是个对象
  var str =JSON.stringify(person);//{"name":"xiaoming","age":18,"home":"beijing"}
    //通过JSON.stringify（）可以将对象变成json字符串，str代表的是一个json字符串，
    var per=JSON.parse(str);//{name: "xiaoming", age: 18, home: "beijing"}
    //通过JSON.parse(）可以将json字符串转变成对象
    



    //BOM浏览器对象
    //（1）window:全局对象，表示浏览器窗口，主要两个属性：innerWidth,outerHeight
    //(2)navigator:表示浏览器信息，属性有appName(浏览器名称)，appversion(浏览器版本)
    //（3）screen：表示屏幕的信息
    //（4）location: 表示当前页面的URL信息，protocol(协议)
    //（5）document；表示当前页面，例如属性title就是<title><title>标签的内容
console.log(document.title);//输出：操作BOM和DOM
    //history:保存了浏览器的；历史纪录，调用back()或forward()方法可以返回上一页面或前进

    //DOM树
    /*
    操作DOM节点之前，首先要拿到这个DOM节点
   获取DOM节点常用的方法有两个：document.getElementById()
   和document.getElementByTagName()
   每个标签的id都是唯一的，可以通过id确定一个节点
   对DOM的操作：遍历，更新，添加，删除
     */

    //遍历
    var p1=document.getElementsByClassName("xx");//HTMLCollection(3) [p#x.xx, div#y.xx, span#ww.xx, x: p#x.xx, y: div#y.xx, ww: span#ww.xx],返回class=xx的标签
    var p2=document.getElementById('y');//返回id=y的标签
    var p3=document.getElementsByTagName('p');//返回p标签
    var childs=p2.children;//获取父节点下所有子节点
    //更新，拿了DOM节点再更新,两种方式：1,innerHTML;2,inberText或者textContext
    p1.innerHTML='通过innerHTML我改变了内容';
    p1.innerText='通过innerText我改变了内容';

    //插入 两种方式，一个是直接在父节点后添加，使用appendChild,二是从零创造一个新节点，然后插入指定位置
    //把<p>我被添加到。。。</p>添加到<div id='y'>的末尾
    var qq=document.getElementById('qq');
    p2.appendChild(qq);
    p
    //创造新节点
         var hh = document.createElement('p');//创造新的标签
    hh.id = 'mm';
    hh.innerHTML = '从零开始创造';
      p2.appendChild(hh);

      //删除DOM
    //1.先拿到该删除的节点
    var kk = document.getElementById('mm');
    //2,拿到待删元素的父节点
    var paent = kk.parentElement;
    //删除
    parent.removeChild(kk);





</script>

</body>
</html>