my kernel of DOM

  • DOM：Doucument Object Model
  • DOM is a bond which connect JavaScript and (Html CSS)
  • document对象：代表当前页面文本

DOM文档解析步骤

  1. 解析HTML结构
  2. 加载外部文件（包括脚本和样式文件）
  3. 解析并执行脚本代码
  4. 执行$(function(){})内对应代码（除了window.onload=function(){}）
  5. 加载图片等二进制资源
  6. 页面加载完毕，执行window.onload

选择器

选择器是document的成员方法

var lis = document.getElementByClass("foot");
var lis_too = document.querySelector(".foot");

getElementByTag

document.getElementByTag("tagname")

Tag/Class等等对应"tagname"/"classname"

更推荐用下面那个

querySelector

document.querySelector("css selector grammer")

//返回第一个满足css选择语句条件的标签及其内容
document.querySelector("li");
//返回所有满足css选择语句条件的标签及其内容
document.querySelectorAll("li");

对选择结果进行操作

操作方法是对选择中的标签及其内容（以对象形式返回）进行操作函数，是其成员函数

以下展示直接操作标签属性

var lis = document.querySelectorAll("li");
lis.style.backgroundColor = red;
//注意在JavaScript中的成员属性和成员方法都是驼峰命名法

小点

.innerHtml与.style.

var lis = document.querySelectorAll("li");
lis.innerHTML = "列表" ;//直接修改选中标签的内容
//lis.style.property = value;
//property即css属性名例如 width height color
//value即css属性名对应的值 例如width=10px此处的value就是10px
lis.style.color = white;
lis.style.backgroundColor = green;

.classList

//a是一个在css中定义的类名
var lis = ducument.querySelector("li");
//增删类名
lis.classList.add("a");
lis.classList.remove("a");
//toggle n.触发器开关 类似开关按一下打开再按一下关闭，循环往复
/*
    等价于如下语句
    if(classList中有a){
        lis.classList.remove("a");
    }else{
        lis.classList.add("a");
    }
*/
lis.classList.toggle("a");

attribute

attribute v. 把...归因于; 认为是…所为 n. 属性，特征; 定语

在JavaScript中取的词义为 n.属性

<!-- 其中href class color都叫做attribute -->
<a href="http://poilzero.sipc115.club" class="myBlog" color="white"></a>

以成员属性的方式使用

var link_me = ducument.querySelector(".myBlog");
//全部的attribute，存储在选择的对象的attributes成员属性里面
link_me.attributes.href = "404.php";
link_me.color = "green";

直接使用成员函数修改

var link_me = ducument.querySelector(".myBlog");
//setAttribute(attribute_name,value);
link_me.setAttribute("color","red");

添加事件

用法

addEventListenr("event_name",function{
    //code content
});

例子按钮变红

点击按钮按钮变红再点击复原

文件结构

  • myJS.html
  • myJS.js
<!--myJS.html-->
<html>
<head>
    <style>
        .btn-red{
            color: white;
            background: red;
        }
    </style>
    <script src="myJS.js"></script>
</head>
<body>
    <buttom id="redMe">点我点我</buttom>
</body>
</html>
//myJS.js
window.onload=function(){
     var red_me = ducument.querySelector("#redMe");
    //event_name:click 当点击的时候触发
    //触发内容是 变色，再点一下恢复（此处使用了toggle）
    red_me.addEventListenr("click",function(){
        red_me.classList.toggle("btn-red")
    });
}
Last modification：November 27, 2020
© Allow specification reprint
如果觉得我的文章对你有用，请随意赞赏。咖啡（12RMB）进度+100%，一块巧克力（1RMB）进度+6%。
（赞赏请备注你的名称哦！后台记录中来自理工小菜狗）