Javascript BOM,DOM 知识简介

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", "这是一个标题");

• 第一个参数是属性名称。
• 第二个参数是要设置的属性值（字符串形式）。

如果属性已存在，则更新它的值,不存在则新建并设置。