使用 js 操作页面元素的方法

DOM(文档对象模型) 是浏览器对 html 文件的描述方式DOM API 是浏览器提供给 JavaScript 操作 html 页面内元素的方式简而言之, 浏览器提供了一些内置函数来让我们操作页面(增删改查)

查找元素

查找元素使用 document.querySelector() 函数document 是整个文档(包含了 html), 可以理解为 html 的父节点这个函数的参数是一个选择器(和 CSS 选择器一样)选择器语法和 CSS 选择器一样, 现在只用 3 个基础选择器元素选择器
例如
// 元素选择器
var body = document.querySelector('body')
// class 选择器, 用的是   .类名
var form = document.querySelector('.login-form')
// id 选择器, 用的是   #id
var loginButton = document.querySelector('#id-button-login')

设置特定属性值
例如
user.value = 'set value'

修改
用 insertAdjacentHTML 给一个元素添加子元素
// 这里我们给 .login-form 添加一个 h1 标签
var form = document.querySelector('.login-form')
// 第一个参数表示插入的位置, 'beforeend' 表示插入在结束之前(也就是添加到标签末尾)
// 第二个参数是你想插入的 html 内容
form.insertAdjacentHTML('beforeend', '<h1 class="gua-h1">你好</h1>')

 删除元素
var pwd = document.querySelector('#id-input-password')
pwd.remove()

// 有一个常见的需求是在 字典/数组 和 字符串 之间相互转换
// 这个过程叫做 序列化/反序列化
// 在 js 中, 序列化使用 JSON 数据格式
// 全称 JavaScript Object Notation (js 对象标记)
// 这个格式已经是现在用于互联网数据交换的事实标准格式了
// python 也有内置的标准库进行这种转换

js 中转换方式如下
// 注意 typeof 语句可以查看一个变量的类型
var s = JSON.stringify([1, 2, 3, 4])
log('序列化后的字符串', typeof s, s)
var a = JSON.parse(s)
log('反序列化后的数组', typeof a, a)

 

 事件
// 事件是用来处理响应的一个机制
// 这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器
// 下面的链接描述了所有事件, 不过我们先从最常用的事件学起, click 事件
// https://developer.mozilla.org/en-US/docs/Web/Events
//
// 常用例子, 给按钮添加一个点击的事件
// 1, 获得按钮
var loginButton = document.querySelector('#id-button-login')
// 2, 声明一个函数, 用于在按钮点击后执行
var clicked = function() {
    log('按钮被点击到了')
}
// 3, 添加事件, 使用 addEventListener 函数, 它有两个参数
// 第一个是事件的名字, 'click' 表示点击
// 第二个是事件发生后会被自动调用的函数
loginButton.addEventListener('click', clicked)
// 添加完成, 可以自己在浏览器试试, 记得打开 console

 

例子

/*
1, 给 add button 绑定事件
2, 在事件处理函数中, 获取 input 的值
3, 用获取的值 组装一个 todo-cell HTML 字符串
4, 插入 todo-list 中
*/

var log = function() {
    console.log.apply(console, arguments)
}

var e = function(sel) {
    return document.querySelector(sel)
}

var todoTemplate = function(todo) {
    var t = `
        <div class="todo-cell">
            <button class="todo-delete">删除</button>
            <span>${todo}</span>
        </div>
    `
    return t
    /*
    上面的写法在 python 中是这样的
    t = """
    <div class="todo-cell">
        <button class="todo-delete">删除</button>
        <span>{}</span>
    </div>
    """.format(todo)
    */

}

var insertTodo = function(todo) {
    var todoCell = todoTemplate(todo)
    // 插入 todo-list
    var todoList = e('.todo-list')
    todoList.insertAdjacentHTML('beforeend', todoCell)
}

var b = e('#id-button-add')
// 注意, 第二个参数可以直接给出定义函数
b.addEventListener('click', function(){
    log('click')
    var input = e('#id-input-todo')
    var todo = input.value
    // log('todo ', todo)
    insertTodo(todo)
})

/*
给 删除 按钮绑定删除的事件
1, 绑定事件
2, 删除整个 todo-cell 元素
*/
var todoList = e('.todo-list')
// 事件响应函数会被传入一个参数, 就是事件本身
todoList.addEventListener('click', function(event){
    // log('click todolist', event)
    // 我们可以通过 event.target 来得到被点击的元素
    var self = event.target
    // log('被点击的元素是', self)
    // 通过比较被点击元素的 class 来判断元素是否是我们想要的
    // classList 属性保存了元素的所有 class
    // 在 HTML 中, 一个元素可以有多个 class, 用空格分开
    // log(self.classList)
    // 判断是否拥有某个 class 的方法如下
    if (self.classList.contains('todo-delete')) {
        log('点到了 删除按钮')
        // 删除 self 的父节点
        // parentElement 可以访问到元素的父节点
        self.parentElement.remove()
    } else {
        // log('点击的不是删除按钮******')
    }
})

 

 // var ajax = function(method, path, data, reseponseCallback) {
    //     var r = new XMLHttpRequest()
    //     // 设置请求方法和请求地址
    //     r.open(method, path, true)
    //     // 设置发送的数据的格式
    //     r.setRequestHeader('Content-Type', 'application/json')
    //     // 注册响应函数
    //     r.onreadystatechange = function() {
    //         if(r.readyState === 4) {
    //             reseponseCallback(r)
    //         }
    //     }
    //     // 发送请求
    //     r.send(data)
    // }
    //
    // var loadTodos = function() {
    //     var baseUrl = 'localhost:3000'
    //     var method = 'POST'
    //     var path = '/api/todo/all'
    //     var url = baseUrl + path
    //     var data = 'todo=吃瓜'
    //     ajax(method, url, data, function(r){
    //         console.log('收到服务器响应的数据', r)
    //         // insertTodos(todos)
    //     })
    // }