JavaScript之浅谈DOM操作

1.理解DOM：

　　DOM（Document Object Model ，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口。

　　怎么说，我从两个角度理解：
  • 对于JavaScript，为了能够使JavaScript操作Html，JavaScript就有了一套自己的dom编程接口。
  • 对于Html，dom使得html形成一棵dom树，类似于一颗家族树一样，一层接一层，子子孙孙。
　　所以说，有了DOM，在我看来就是相当于JavaScript拿到了钥匙一样可以去操作Html的每一个节点，触摸Html每寸肌肤。（咳。。。）
 
2.介绍Html的DOM树：
说明：html标签通过浏览器的解析后才会形成dom树，此后HTML中的每个标签元素，属性，文本都能看做是一个DOM的节点，JavaScript都能通过dom的提供的编程接口操作到每个节点，去了解浏览器的渲染机制能够帮助我们了解dom。
Html代码：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>dom</title>

</head>

<body>

    <div>

        <a href="www.baidu.com">百度</a>

    </div>

</body>

</html>

对应的DOM树结构图：

3.认识JavaScript中的DOM编程接口：
上面说了html形成的dom树，接着说下通过js的dom编程接口去操作这棵dom树。
JavaScriptDOM操作的常用方法和属性：:
  • 常用方法:
  1. 获取节点：
    1. document.getElementById(idName)          //通过id号来获取元素，返回一个元素对象
    2. document.getElementsByName(name)       //通过name属性获取id号，返回元素对象数组
    3. document.getElementsByClassName(className)   //通过class来获取元素，返回元素对象数组（ie8以上才有）
    4. document.getElementsByTagName(tagName)       //通过标签名获取元素，返回元素对象数组
  2. 获取/设置元素的属性值：
    1. element.getAttribute(attributeName)     //括号传入属性名，返回对应属性的属性值
    2. element.setAttribute(attributeName,attributeValue)    //传入属性名及设置的值
  3. 创建节点Node：
    1. document.createElement("h3")       //创建一个html元素，这里以创建h3元素为例
    2. document.createTextNode(String); //创建一个文本节点；
    3. document.createAttribute("class"); //创建一个属性节点，这里以创建class属性为例
  4. 增添节点：
    1. element.appendChild(Node);   //往element内部最后面添加一个节点，参数是节点类型
    2. elelment.insertBefore(newNode,existingNode); //在element内部的中在existingNode前面插入newNode
  5. 删除节点：
    1. element.removeChild(Node)    //删除当前节点下指定的子节点，删除成功返回该被删除的节点，否则返回null
 
  • 常用属性:
  1. 获取当前元素的父节点 ：
    1. element.parentNode     //返回当前元素的父节点对象
  2. 获取当前元素的子节点：
    1. element.chlidren        //返回当前元素所有子元素节点对象，只返回HTML节点
    2. element.chilidNodes   //返回当前元素多有子节点，包括文本，HTML，属性节点。（回车也会当做一个节点）
    3. element.firstChild      //返回当前元素的第一个子节点对象
    4. element.lastChild       //返回当前元素的最后一个子节点对象
  3. 获取当前元素的同级元素：
    1. element.nextSibling          //返回当前元素的下一个同级元素 没有就返回null
    2. element.previousSibling   //返回当前元素上一个同级元素 没有就返回null
  4. 获取当前元素的文本：
    1. element.innerHTML   //返回元素的所有文本，包括html代码
    2. element.innerText     //返回当前元素的自身及子代所有文本值，只是文本内容，不包括html代码
  5. 获取当前节点的节点类型：node.nodeType   //返回节点的类型,数字形式（1-12）常见几个1：元素节点，2：属性节点，3：文本节点。
  6. 设置样式：element.style.color=“#eea”;      //设置元素的样式时使用style，这里以设置文字颜色为例。
4.总结：
大家都会觉得用jQuery来操作dom会更加的方便且好用，因为jq对js的dom进行了封装，使得我们Write Less, Do More。但是我觉得还是要总结一下原生js的dom，从根本上了解js对dom的操作，只会有利而无害。
 
 
作者：Ry-yuan
如有错误欢迎各大网友指出
如需转载请标注原文地址：http://www.cnblogs.com/Ry-yuan/p/6918155.html
 

JavaScript--浅谈DOM操作的更多相关文章

  1. Js之浅谈dom操作

    JavaScript之浅谈dom操作 1.理解dom: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两 ...

  2. 从JS和jQuery浅谈DOM操作，当我们在获取时，究竟获取了什么

    0.写在前面的话 自己对前端的东西一直不是很熟,现在开始要想办法从前端各个地方去获取想要的属性值的时候,也基本是在网上现炒现卖,几周下来,发现自己还是迷迷糊糊,可以算是一无所获. 所以就抽时间,把这一 ...

  3. 前端性能优化--为什么DOM操作慢？ 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

  4. 浅谈DOM性能考虑

    浅谈DOM性能考虑 很多人都会忽视脚本对Web应用整体性能的影响.为保证应用的流畅运行,在为文档编写和应用脚本时,需要注意一些问题.一.尽量减少访问DOM和尽量减少标记    访问DOM的方式对脚本性 ...

  5. 原生JavaScript常用的DOM操作

    之前项目一直都是用JQuery或者Vue来做的,确实好用,毕竟帮我们解决了很多浏览器兼容问题,但是后面发现大公司面试题都是要原生Javascript来做,然后我就一脸懵逼哈哈哈,毕竟大公司需要的框架或 ...

  6. javascript教程2:---DOM操作

    1.DOM 简介 当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model).文档对象模型定义访问和处理 HTML 文档的标准方法.DOM 将 HTML 文档呈现为带有 ...

  7. 浅谈DOM事件的优化

    在 JavaScript 程序的开发中,经常会用到一些频繁触发的 DOM 事件,如 mousemove.resize,还有不是那么常用的鼠标滚轮事件:mousewheel (在 Firefox 中,滚 ...

  8. 网页制作之JavaScript部分 2 - DOM操作

    1.DOM的基本概念  htmlDOM是一种面向对象的树的模型,它包含html中的所有元素:通过html可以找到所有包含在dom中的元素. DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对 ...

  9. JavaScript基础：DOM操作详解

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ...

随机推荐

  1. Gson简单使用

    最近做个IM类型的Android 应用,由于有三种客户端(pc,ios,Android),所以底层使用的是C++与服务器通信,所以通信部分基本上有c++完成,封装好Jni即可,可以把底层c++通信看成 ...

  2. python操作oracle数据库-查询

    python操作oracle数据库-查询 参照文档 http://www.oracle.com/technetwork/cn/articles/dsl/mastering-oracle-python- ...

  3. POJ 2390

    import java.util.*; public class Main { public static void main(String args[]){ double interest; Sca ...

  4. mahout学习

    参考:http://www.360doc.com/content/14/0117/09/1200324_345883534.shtml Precondition: 启动Hadoop集群 bin/hdf ...

  5. 利用Windows资源监视器解决文件夹无法改名无法删除问题

    在win7等Windows系统操作文件夹更名.删除时经常会报错,操作无法完成,balabala 这个时候仅凭在用的软件去一个一个找是很难的,即便软件全关了,还有后台进程,,,奔溃吧 好了,现在我们有了 ...

  6. django第二课 网页继承

    第一步 创建项目(有问题可以看我的第一个博客) C:\Python36\Scripts\django-admin.py startproject *** (我的写法,仅供参考) 第二步 创建文件夹,同 ...

  7. oauth2.0实现sso单点登录的方式和相关代码

    SSO介绍 什么是SSO 百科:SSO英文全称Single Sign On,单点登录.SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.它包括可以将这次主要的登录映射到其他 ...

  8. asp.net四中绑定方式

    ASP.NET Eval四种绑定方式: 1.1.x中的数据绑定语法 <asp:Literal id="litEval2" runat="server" T ...

  9. ES6-Array

    /* * 数组解构赋值: * ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这种被称为解构. * 示例如下: */ var [a,b,c] = [1,2,3]; console.log ...

  10. elasticsearch插件安装之--linux下安装及head插件

    /** * 系统环境: vm12 下的centos 7.2 * 当前安装版本: elasticsearch-2.4.0.tar.gz */ 安装和学习可参照官方文档: 1, 安装 # 下载, 获取不成 ...