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. RPA中房产证的 OCR 识别

    客户需求,识别一些证件内容,包括身份证.户口本.营业执照.银行卡以及房产证,前四个比较容易实现,不管是艺赛旗的 RPA 还是百度的 OCR 都有接口,直接调用即可,但是都没有房产证的 OCR 识别,只 ...

  2. C++入门到理解阶段二基础篇(1)——简介与环境安装

    1.C++ 简介 C++ 是一种静态类型的.编译式的.通用的.大小写敏感的.不规则的编程语言,支持过程化编程.面向对象编程和泛型编程. C++ 被认为是一种中级语言,它综合了高级语言和低级语言的特点. ...

  3. 来认识一下venus-init——一个让你仅需一个命令开始Java开发的命令行工具

    源代码地址: Github仓库地址 个人网站:个人网站地址 前言 不知道你是否有过这样的经历.不管你是什么岗位,前端也好,后端也罢,想去了解一下Java开发到底是什么样的,它是不是真的跟传说中的一样. ...

  4. oracle学习笔记（十五） PL/SQL语法结构以及使用

    PL/SQL 简介 PL/SQL 是过程语言(Procedural Language)与结构化查询语言(SQL)结合而成的编程语言. PL/SQL 是对 SQL 的扩展. 支持多种数据类型,如大对象和 ...

  5. Linux常用命令（2）

    3.帮助命令 A,帮助命令:man    B,其他帮助命令 3.1,格式:man [命令名] 查看命令拥有哪个级别的帮助:                                       ...

  6. git安装和项目上传到GitHub

    重装系统后,Git安装也要来重来 下载 国内下载地址:https://npm.taobao.org/mirrors/git-for-windows 安装忽略 生成密钥 输入然后都是下一步,生成密钥,生 ...

  7. [20191012]组成rowid.txt

    [20191012]组成rowid.txt --//昨天做了拆分rowid的测试,链接http://blog.itpub.net/267265/viewspace-2659613/=>[2019 ...

  8. 5.Python网络编程_通过继承实现多线程

    import threading import time #继承形式的多线程,适合于程序比较复杂的情况 class MyThread(threading.Thread): #t.start()会调用r ...

  9. 2. Linux文件与目录管理

    一.目录与路径 1. 相对路径与绝对路径 绝对路径:路径写法[一定由根目录 / 写起],如:/usr/share/doc 相对路径:路径写法[不由 / 写起], /usr/share/doc 要到 / ...

  10. (转)cube-ui后编译

    转载地址:https://www.jianshu.com/p/189755f9ce43 1. 后编译介绍 目前大部分的前端项目开发都是使用es6+的代码并且使用babel进行编译,而传统的对代码包的引 ...