Javascript BOM,DOM 知识简介

news2025/4/16 23:32:38

JSON

一种数据交换格式,作为数据载体,传输数据, Json比xml 更简单,可读性更高.
js的对象和Json可以相互转换.

//json定义格式:
var varName='{"key1":value1,"key2":value2}';

value的数据类型为数字,字符串(在双引号中),布尔值,数组(在方括号中),对象(在花括号中),null.
外面用单引号包裹,里面的键key用双引号.

    var json = '{"name":"warren","age":1}';  
    var w=JSON.parse(json)//将json字符串转化为js对象.  
    
    console.log(w.name);
    console.log(JSON.stringify(w));;//将js对象转化为json字符串

BOM

是一套操作浏览器窗口的 API,用于控制浏览器的行为
组成：
window（窗口对象）
navigator（浏览器信息）
screen（屏幕信息）
history（历史记录）
location（地址栏）
window是所有BOM对象的顶级对象.

常见的 `window` 方法

方法	作用
`window.open(url, name, features)`	打开新窗口
`window.close()`	关闭当前窗口
`window.alert(msg)`	弹出警告框
`window.confirm(msg)`	弹出确认框（返回 `true/false`）
`window.prompt(msg, defaultText)`	弹出输入框
`window.setTimeout(fn, delay)`	延迟执行代码
`window.setInterval(fn, interval)`	循环执行代码
`window.clearTimeout(id)`	清除 `setTimeout`
`window.clearInterval(id)`	清除 `setInterval`

// 弹出提示框
window.alert("你好，BOM！");

// 3 秒后执行代码
setTimeout(() => {
    console.log("3秒后执行");
}, 3000);

// 每 2 秒打印一次
let interval = setInterval(() => {
    console.log("每2秒执行一次");
}, 2000);

// 5 秒后停止循环
setTimeout(() => {
    clearInterval(interval);
}, 5000);

//地址栏对象
location.href="https://www.bilibili.com/";//为href属性赋值,浏览器会自动跳转到新页面.

DOM

基本概念:

文档对象模型, 将标记语言的各个组成部分封装成对象.
JavaScript通过DOM对HTML进行操作.
Document :整个文档对象
Element:元素对象
Attribute :属性对象
Text:文本对象
Comment:注释对象
浏览器解析后,会形成DOM树.
一个页面就是一个DOM文档(document).
页面中的标签就是元素(element).

获取元素

//根据id获取,返回单个Element对象
document.getElementById(id);

//根据标签名获取,返回Element对象数组
document.getElemetsByTagName('div');

//根据name属性获取,返回Element对象数组
document.getElementsByName('hobby');

//根据class属性值获取,返回Element对象数组
document.getElemetByClassName('cls');

操作文本

element.innerText：返回元素的纯文本内容，不包括 HTML 标签。
element.innerHTML：返回元素内的所有 HTML 内容（包括标签).

删除节点

现代浏览器支持的方法:

   var element = document.getElementById('p');
   element.remove();

这种方法兼容性更好，适用于所有浏览器:

   var element = document.getElementById('p');
   element.parentNode.removeChild(element);

  <p id="js">JavaScript</p>
  <div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
  </div>

  <script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');

    // 创建新的 <p> 元素
    var newP = document.createElement('p');
    newP.id = "newP";             // 设置 id
    newP.innerText = "Hello, Kuangshen!";  // 设置文本

    // 将新元素添加到 list 容器中
    list.appendChild(newP);
  </script>

setAttribute()

// 1. 获取 DOM 元素
var element = document.getElementById("myElement");

// 2. 设置属性
element.setAttribute("class", "active");
element.setAttribute("data-id", "123");
element.setAttribute("title", "这是一个标题");