js处理页面内容

 // 先获取页面元素
    var d1 = document.querySelector('.d1');
    var d2 = document.querySelector('.d2');
    var d3 = document.querySelector('.d3');

 // ① 操作文本内容
 var text = d1.innerText;
 // 获取内容
 console.log(text);
 // 修改(删除)内容
 d1.innerText = "";删除
d1.innerText = "修改后的文本内容";

// ② 操作子标签
    // 获取
    var html = d2.innerHTML;
    console.log(html)
    // 修改
    d2.innerHTML = "<b>加粗的文本</b>";  // 可以解析html语法的代码

console.log(d2.innerHTML);  // 只是标签内部的子标签与子内容
console.log(d2.outerHTML);  // 不仅包含标签内部的子标签与子内容,还包含自身标签信息

// ③ 操作页面样式
    // 获取 ??
    var bgColor = d3.style.backgroundColor;  // 只能获取行间式
    console.log(bgColor);

     // 修改
    d3.style.backgroundColor = "yellow";  // 只能修改行间式

// 内联与外联设置的样式叫: 计算后样式
    // getComputedStyle(目标标签, 伪类(null填充)).具体的样式
    // bgColor = window.getComputedStyle(d3, null).backgroundColor;  // 兼容性较差
    // console.log(bgColor);

// 可以获取计算后样式, 也可以获取行间式, 但它为只读
    bgColor = getComputedStyle(d3, null).getPropertyValue('background-color');  // 兼容性较好
    console.log(bgColor);

案列

// 需求: box的颜色通过点击在cyan与red之间切换
    var box = document.querySelector('.box');
    box.onclick = function () {
    var bgColor = getComputedStyle(this, null).backgroundColor;
    console.log(bgColor);
    // 要注意计算后样式获取的结果, 以及结果具体的字符串格式
    if (bgColor == 'rgb(0, 255, 255)') {
            this.style.backgroundColor = 'red';
        } else {
            this.style.backgroundColor = 'cyan';
        }
    }