前端 DOM

Dom

获取id给一个值 值调用方法

选择器

html被浏览器解析后就是一棵dom树，

始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作：

• 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
• 遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
• 添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
• 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。

获取dom节点

document.getElementById()   id唯一
document.getElementsByTagName()  返回一组
以及CSS选择器 document.getElementsByClassName() 

第二种方法是使用 querySelector() 和 querySelectorAll()   有版本要求
// 通过querySelector获取ID为q1的节点：
var q1 = document.querySelector('#q1');
// 通过querySelectorAll获取q1节点内的符合条件的所有节点：
var ps = q1.querySelectorAll('div.highlighted > p');

更新dom

• 修改innerHTML属性 不仅可以修改dom节点的文本内容 还能修改节点内部的子树 注意字符编码的xss攻击
• 修改innerText属性 这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签：

修改CSS也是经常需要的操作。DOM节点的 style 属性对应所有的CSS，可以直接获取或设置

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';

插入dom

空的情况下可以通过更新的方式插入

非空

• 一个是使用 appendChild ，把一个子节点添加到父节点的最后一个子节点 类似于字符串拼接

• insertBefore

  如果我们要把子节点插入到指定的位置怎么办？可以使用
  parentElement.insertBefore(newElement, referenceElement); 子节点会插入到
  referenceElement 之前。

删除dom

要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的 removeChild 把自
己删掉：

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true

操作表单

HTML表单的输入控件主要有以下几种：

• 文本框，对应的 ，用于输入文本；
• 口令框，对应的 ，用于输入口令；
• 单选框， 对应的 ，用于选择一项；
• 复选框，对应的 ，用于选择多项；
• 下拉框，对应的 ，用于选择一项；
• 隐藏文本，对应的 ，用户不可见，但表单提交时会把隐藏文本发送到服务器。

获取值

获得节点id id.value

设置值

获得节点id id.value = “内容”;

提交表单

• 方式一是通过 元素的 submit() 方法提交一个表单，例如，响应一个 button 的click 事件，在JavaScript代码中提交表单： 获取节点id id.submit();

• 第二种方式是响应本身的onsubmit 事件，在提交form时作修改：获取节点id form.submit(); return true;继续提交