JavaScript DOM

DOM

DOM 是网页元素的抽象结果，我们通过打开 Firebug 或是 Chrome 开发者工具，在 Elements 栏目可以观察到，像树状的一级又一级的节点，这些就是当前网页的组成元素。

通过 JavaScript 我们能操作这些节点，从而在不需要刷新网页的情况下，就能改变了页面的显示效果。对 DOM 的操作，也是 JavaScript 在客户端应用领域的核心。

操作 DOM

对 DOM 的操作，可以抽象成四个部分 获取、修改、新增、删除。

<!-- 假设下例是我们当前的网页元素，我们尝试对它进行以上操作 -->

<html>
<head><title>DOM</title></head>
<body>
 <div class="div_class" id="div_id">
  <p>1</p>
  <p>2</p>
 </div>
</body>
</html>

获取元素

document.getElements

div = document.getElementsByTagName('div') // 通过元素名称获取元素对象
div = document.getElementsByClassName('div_class') // 通过元素类名获取元素对象
div = document.getElementById('div_id') // 通过元素ID获取元素对象

console.log(div) // [object HTMLCollection] | 上面三组获取得到的结果都是一样的，一个 DOM 的集合，因为有可能同时存在多个 div 对象

console.log(div[0]) // [object HTMLDivElement] | 指定获取 DOM 对象
/*
 <div class="div_class" id="div_id">
  <p>1</p>
  <p>2</p>
 </div>
*/

范围限定

div = document.getElementsByTagName('div')
div[0].getElementsByTagName('p') // HTMLCollection(2) [p, p]

/*
 document 是从 body 开始获取下面的元素对象，我们可以把范围限定到 div[0]，这样 getElementsByTagName('div') 就只获取到 div 下面到两个 p
*/

querySelector

document.querySelector('#div_id') // [object HTMLDivElement] 
document.querySelectorAll('div.div_class > p') // [object HTMLCollection] 

/*
 document.getElements 可以兼容到古老 IE6、7、8
 querySelector 是更新的获取元素语法、支持了大部分 CSS 的选择器的功能
*/

children

div = document.getElementsByTagName('div')
div[0].children // HTMLCollection(2) [p, p]
div[0].children[0] // <p>1</p>
div[0].children[1] // <p>2</p>

/*
 children 获取子元素
*/

firstElementChild

div = document.getElementsByTagName('div')
div[0].firstElementChild // <p>1</p>

/*
 firstElementChild 获取第一个子元素
*/

parentElement

div = document.getElementsByTagName('div')
div[0].firstElementChild.parentElement // <div class="div_class" id="div_id">...</div>

/*
 parentElement 获取父元素
*/

innerHTML

div = document.getElementsByTagName('div')
div[0].children[0].innerHTML  // 1

/*
 innerHTML 获取 HTML 标签里面到文本内容
*/

修改元素

文本修改

div = document.getElementsByTagName('div')
div[0].children[0].innerHTML = 'p1'

样式修改

div = document.getElementsByTagName('div')
div[0].style.fontWeight = '20px'

/*
 由于 JavaScript 中 '-' 符号会解析错误，所有 CSS 写法要改成 “驼峰命名法”
 font-weight = fontWeight
 background-color = backgroundColor
 ...
*/

属性修改

div = document.getElementsByTagName('div')
div[0].setAttribute('class', 'other_class') // 修改 class 属性名称

新增和移动

createElement

style = document.createElement('style') // 创建元素
style.setttribute('type','text/css') // 添加属性
style.innerHTML = '* {...}' // 添加内容

/*
 上例创建的结果
 
<style type="text/css">
* {...} // 在这里面我们就能写 CSS 样式了
</style>

 需要注意，通过 createElement 创建的元素，只保留在内存中，要配合后面的两个属性 appendChild & insertBefore 载入到网页中
*/

appendChild

/*
<p>3</p>
<div>
 <p>1</p>
 <p>2</p>
</div>
*/

p3 = document.getElementsByTagName('p')[0]
div = document.getElementsByTagName('div')[0]
div.appendChild(p3)

/*
<div>
 <p>1</p>
 <p>2</p>
 <p>3</p>
</div>
*/

/*
 appendChild 把元素移动到某个元素的下级
*/

insertBefore

/*
<p>3</p>
<div>
 <p>1</p>
 <p>2</p>
</div>
*/

p3 = document.getElementsByTagName('p')[0]
p1 = document.getElementsByTagName('p')[1]
div = document.getElementsByTagName('div')[0]
div.insertBefore(p1,p3)

/*
<div>
 <p>3</p>
 <p>1</p>
 <p>2</p>
</div>
*/

/*
 insertBefore 把元素移动到某个元素的同级
*/

删除元素

removeChild

div = document.getElementsByTagName('div')
div.children[0].removeChild(p)
div.children[1].removeChild(p) // error 此时 p2 = 0 删除后位置被更新了

补充

publish : 10/19/2018, 3:49:43 PM / by: jmjc.tech
JavaScript 教程 JavaScript 运行
JavaScript 数据类型 JavaScript 数字 JavaScript 字符串 JavaScript 数组 JavaScript 对象 JavaScript Map JavaScript Set JavaScript null JavaScript undefined JavaScript 类型检测 JavaScript 包装对象
JavaScript 控制流程 JavaScript 条件判断 JavaScript 循环
JavaScript 函数 JavaScript 参数 JavaScript 匿名函数 JavaScript 箭头函数 JavaScript 递归 JavaScript 闭包 JavaScript 生成器
JavaScript 作用域 JavaScript this JavaScript 对象冒充 JavaScript 命名空间
JavaScript 迭代
JavaScript 面向对象 JavaScript class
JavaScript 内置对象 JavaScript Date JavaScript Math JavaScript JSON JavaScript RegExp
JavaScript 异步 JavaScript setTimeout JavaScript setInterval JavaScript 回调 JavaScript Promise JavaScript async await
JavaScript 异常处理 JavaScript console
JavaScript 浏览器 JavaScript window JavaScript DOM JavaScript 表单 JavaScript 文件上传 JavaScript cookie
JavaScript Ajax JavaScript 跨域请求
JavaScript 事件
更多教程 HTML5 教程 CSS3 教程 JavaScript 教程 JQuery 教程 React.js 教程 Node.js 教程 Koa2 教程 Python 教程 Linux 教程