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的操作，只会有利而无害。
 

JavaScript DOM 常用操作的更多相关文章

  1. JavaScript DOM 基础操作

    JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...

  2. JavaScript 字符串常用操作

    JavaScript 字符串用于存储和处理文本.因此在编写 JS 代码之时她总如影随形,在你处理用户的输入数据的时候,在读取或设置 DOM 对象的属性时,在操作 Cookie 时,在转换各种不同 Da ...

  3. JavaScript 字符串常用操作纪要

    JavaScript 字符串用于存储和处理文本.因此在编写 JS 代码之时她总如影随形,在你处理用户的输入数据的时候,在读取或设置 DOM 对象的属性时,在操作 Cookie 时,在转换各种不同 Da ...

  4. DOM常用操作总结

    一.getElementById() 寻找一个有着给定 id 属性值的元素,返回值是一个有着给定 id 属性值的元素节点.如果不存在,这样的元素,它返回 null. 二.getElementsByNa ...

  5. JavaScript数组常用操作

    前言 相信大家都用惯了jquery或者underscore等这些类库中常用的数组相关的操作,如$.isArray,_.some,_.find等等方法.这里无非是对原生js的数组操作多了一些包装. 这里 ...

  6. （一）DOM 常用操作 —— “查找”节点

    在 DOM 树中,如果想要操作一个节点,那么首先要"查找"到这个节点.查找节点的方法由 Document 接口定义,而该接口由 JavaScript 中的 document 对象实 ...

  7. JavaScript DOM–节点操作

    节点 节点至少拥有nodeType(节点类型).nodeName(节点名称)和nodeValue(节点值)这三个基本属性. 元素节点 nodeType  为1 属性节点 nodeType  为2 文本 ...

  8. Javascript:DOM表格操作

    需求说明: /* *需求说明: *获取元素:tBodies,tHead,tFoot,rows,cells *表格的创建 *数据添加 *隔行变色 *删除操作,剩余表格重新计算,实现隔行变色 */ HTM ...

  9. JavaScript DOM节点操作总结

    节点类型 节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进 ...

随机推荐

  1. Java并发编程入门，看这一篇就够了

    Java并发编程一直是Java程序员必须懂但又是很难懂的技术内容.这里不仅仅是指使用简单的多线程编程,或者使用juc的某个类.当然这些都是并发编程的基本知识,除了使用这些工具以外,Java并发编程中涉 ...

  2. 数据库——SQL-SERVER练习（6） 数据库安全性

    一.实验准备 (1)运行SQL-SERVER服务管理器, 启动服务(2)运行查询分析器,  以DBA身份登录数据库服务器:      用户名sa,  密码123456(3)打开CREATE-TABLE ...

  3. linux如何修改权限详解

    前言 今日,同事问我,服务器上拷贝过来的tomcat,怎么执行不了./startup.sh.于是,我一想,那肯定是没有权限的问题了.于是使用chmod命令更改了权限后,就可以执行了.项目正常启动.我想 ...

  4. 利用代码生成工具生成基于ABP框架的代码

    在前面随笔,我介绍了整个ABP优化过框架的分层模型,包括尽量简化整个ABP框架的各个层的关系,以及纳入一些基类的辅助处理,使得我们对应业务分层类或者接口尽可能减少代码,并具有生产环境所需要的基类接口, ...

  5. hibernate关联关系（一对多）

    什么是关联(association) 关联指的是类之间的引用关系.如果类A与类B关联,那么被引用的类B将被定义为类A的属性. 案例:如何建立客户和订单一对多双向关联 先不建立客户和订单的关联关系,定义 ...

  6. XAF-内置初始化数据 （XPO）

    Open the Updater.cs (Updater.vb) file, located in the MySolution.Module project's Database Update fo ...

  7. Clean Code

    书名<代码整洁之道>        命名    有意义的命名,使人能读懂    类名和对象名应该是名称或名称短语    方法名应该是动词或动词短语 函数    短小,函数块不要超过一个屏幕 ...

  8. Swift相比OC语言有哪些优点

    Swift相比OC语言有哪些优点 1.自动做类型推断 2.可以保证类型使用安全 Swif类型说明符 --Swift增加了Tuple表示元组类型 --Swift增加了Optional表示可选类型 常量一 ...

  9. git本地忽略

    添加本地忽略文件 git update-index --assume-unchanged 忽略的文件名 恢复本地忽略文件 git update-index --no-assume-unchanged ...

  10. liteos 异常接管（十五）

    1 概述 1.1 基本概念 异常接管是操作系统对在运行期间发生异常的情况进行处理的一系列动作,譬如打印异常发生时当前函数调用栈信息. cpu现场信息.任务的堆栈情况等. 异常接管作为一种调测手段,可以 ...