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 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  2. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  3. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  4. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

  5. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

  6. 仅100行的JavaScript DOM操作类库

    如果你构建过Web引用程序,你可能处理过很多DOM操作.访问和操作DOM元素几乎是每一个Web应用程序的通用需求.我们我们经常从不同的控件收集信息,我们需要设置value值,修改div或span标签的 ...

  7. SVG基础以及使用Javascript DOM操作SVG

    SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...

  8. 关于vue中tamplate和DOM节点浅谈

    前言:在开发前段页面使用vue时,我们能经常看到template标签.这里粗略讲下自己对vue中template理解和使用. 1. 先了解vue vue.js是一个轻巧.高性能.壳组件画的MVVM库. ...

  9. 私人定制javascript事件处理机制(浅谈)

    看到园子里关于事件监听发表的文章,我都有点不好意思写了.不过想想我的题目以私人定制作开头也就妥妥地写吧. 事件相关概念 1.事件类型 发生事件的字符串 有传统事件类型 比如表单.window事件等 D ...

随机推荐

  1. zabbix 邮件报警 监控mysql主从

    1)设置邮件模板及邮件服务器 邮箱密码记得写授权密码 2)配置接受报警的邮箱 3)添加报警触发器 配置邮箱服务器 yum -y install mailx yum -y install sendmai ...

  2. tensorflow中 tf.train.slice_input_producer 和 tf.train.batch 函数（转）

    tensorflow数据读取机制 tensorflow中为了充分利用GPU,减少GPU等待数据的空闲时间,使用了两个线程分别执行数据读入和数据计算. 具体来说就是使用一个线程源源不断的将硬盘中的图片数 ...

  3. js基础-语句

    if语句 if(true){ console.log(true) } if(0 == false){ console.log(true) } var a,b; Math.random() 随机生成 0 ...

  4. lcd 控制器

    1. 使用lcd 一般需要一个控制器和驱动器,控制器需要初始化以产生正确的时序,驱动器一般是和lcd基板制作在一起. LCD 控制器结构图: REGBANK 表示调色板 LCDDMA 表示DMA通道 ...

  5. java fastJson

    // 大区的数据 String cityList = "[{'title':'华北','value':'1','children':[{'title':'山东','value':'1.1', ...

  6. Java中String的常用方法总结

    Java中String的常用方法总结 1.length()字符串的长度 String str="HelloWord"; System.out.println(str.length( ...

  7. Java KeyNote

    [Java KeyNote] 1.把一个ArrayList拷贝到另一个ArrayList. ArrayList list1=new ArrayList(); ArrayList list2=new A ...

  8. cdnbest如何配置ssl证书

    cdnbest添加ssl证书有三种方式: 一.第一种在站点设置中添加: 点打开,加入证书后点提交 可以点检测功能检查证书是否有效,打勾说明证书是有效的 二. 第二种是在域名记录里添加: 如下图点击,添 ...

  9. NBU 还原LINUX ORACLE RAC数据库(MIDDB)

    MIDDB集群数据库恢复 目录 MIDDB集群数据库恢复... 1 1.安装 NBUcilent 1 2.修改hosts文件... 2 3.修改hosts文件... 2 4.使用bplis读取备份文件 ...

  10. modal template

    <div class="modal fade" id="tmp_order_modal" tabindex="-1" role=&qu ...