前端JavaScript（WebAPI）

目录

关于WebAPI

DOM树

获取元素

事件

事件三要素

*** 作元素

获取/修改元素内容

获取/修改元素属性

获取/修改表单元素属性

获取/修改样式属性

行内样式 *** 作

类名样式 *** 作

*** 作节点

新增节点

创建元素节点

插入节点到dom树中

删除节点

---

👉JavaScript语法👈

关于WebAPI

JS 分成三个大的部分

ECMAScript: 基础语法部分

DOM API: *** 作页面结构

BOM API: *** 作浏览器

WebAPI 就包含了 DOM + BOM

DOM树

获取元素

querySelector

abc
def

selectors包含一个或多个要匹配的选择器的DOM字符串DOMString，该字符串必须是有效的CSS字符串

表示文档中与指定的一组CSS选择器匹配的第一个元素的html元素Element对象

如果需要与指定选择器匹配的所有元素列表，应该使用querySelectorAll()

可以在任何元素上调用，不仅仅是document，调用这个方法的元素将作为本次查找的根元素

querySelectorAll

abc
def

事件

概念

JS 要构建动态页面, 就需要感知到用户的行为.

用户对于页面的一些 *** 作(点击, 选择, 修改等) *** 作都会在浏览器中产生一个个事件, 被 JS 获取到, 从而进行更复杂的交互 *** 作

事件三要素

1. 事件源: 哪个元素触发的

2. 事件类型: 是点击, 选中, 还是修改?

3. 事件处理程序: 进一步如何处理. 往往是一个回调函数

点我一下

btn 按钮就是事件源.

点击就是事件类型

function 这个匿名函数就是事件处理程序

其中 btn.onclick = function() 这个 *** 作称为 注册事件/绑定事件

*** 作元素 获取/修改元素内容

innerText

Element.innerText 属性表示一个节点及其后代的“渲染”文本内容

不能识别html标签

// 读 *** 作
let renderedText = HTMLElement.innerText;
// 写 *** 作
HTMLElement.innerText = string;

    hello world

nnerHTML

Element.innerHTML 属性设置或获取HTML语法表示的元素的后代.

// 读 *** 作
let content = element.innerHTML;
// 写 *** 作
element.innerHTML = htmlString;

    hello world
    hello world


//效果是把div标签里的全部内容换了

获取/修改元素属性

我们可以在代码中获取属性的值

 还可以直接修改属性

获取/修改表单元素属性

表单(主要是指 input 标签)的以下属性都可以通过 DOM 来修改

value: input 的值.

disabled: 禁用

checked: 复选框会使用

selected: 下拉框会使用

type: input 的类型(文本, 密码, 按钮, 文件等）

切换按钮的文本

获取/修改样式属性 行内样式 *** 作

element.style.[属性名] = [属性值];
element.style.cssText = [属性名+属性值];

点击文字则放大字体

    哈哈

类名样式 *** 作

element.className = [CSS 类名];

开启夜间模式

    这是一大段话. 

    这是一大段话. 

    这是一大段话. 

    是一大段话. 

*** 作节点 新增节点

分成两个步骤

1. 创建元素节点

2. 把元素节点插入到 dom 树中.

创建元素节点

createTextNode 创建文本节点

createComment 创建注释节点

createAttribute 创建属性节点

createElement 创建元素节点

插入节点到dom树中

appendChild

使用 appendChild 将节点插入到指定节点的最后一个孩子之后

效果

insertBefore

使用 insertBefore 将节点插入到指定节点之前.

insertedNode 被插入节点(newNode)

parentNode 新插入节点的父节点

newNode 用于插入的节点

referenceNode newNode 将要插在这个节点之前

如果 referenceNode 为 null 则 newNode 将被插入到子节点的末尾.

如果针对一个节点插入两次, 则只有最后一次生效(相当于把元素移动了)

一旦一个节点插入完毕, 再针对刚刚的节点对象进行修改, 能够同步影响到 DOM 树中的内容.

    11

效果

删除节点

removeChild

oldChild = element.removeChild(child);

child 为待删除节点

element 为 child 的父节点

返回值为该被删除节点

被删除节点只是从 dom 树被删除了, 但是仍然在内存中, 可以随时加入到 dom 树的其他位置.

如果上例中的 child节点 不是 element 节点的子节点,则该方法会抛出异常.