一【DOM树节点】
 DOM节点分为三大类:元素节点、文本节点、属性节点
文本节点、属性节点,为元素节点的两个子节点;
 通过getElement系列方法,可以去到元素节点。
 
 
二【查看节点】
1、getElementById:通过ID获取唯一的节点;多个同名ID,只会取第一个;
2、getElementsByName:通过Name取到一个数组,包含1到多个节点;
使用方式:通过循环,取到每一个节点。循环次数:从0开始,<数组.length
 
 
三【查看和设置属性节点】
 1、查看属性节点: getAttribute("属性名");
 2、设置属性节点: setAttribute("属性名","属性值");
 
 
四【JS修改样式总结】
 1、.className : 为元素设置一个新的class名字;
 div1.className = "class1";
 
 2、.style : 为元素设置一个新的样式,注意驼峰命名法;
 div1.style.backgroundColor = "red";
 
 3、.style.cssText : 为元素同时修改多个样式;
 div1.style.cssText = "width:100px;height100px;";
 
 五【查看节点】
1、tagName属性:获取节点的标签名;
2、innerHTML:设置或者获取节点内部的所有HTML代码;
 3、innerText:设置或者获取节点内部的所有文字;
 
 
window.onload = function(){
var div1 = document.getElementById("div1");
}
function getById(){
 取到元素节点的样式属性节点
var divStyle = document.getElementById("div1").style;/divStyle.backgroundColor = "blue"; 所有节点属性,一律驼峰命名法
 
 取到元素节点
var div = document.getElementById("div1");
 
 
console.log(div.innerHTML); //取到div中所有内容
div.innerHTML = "<s>jianghao</s>"; // 重置修改div中的HTML代码
 
 
六[获取层次节点的常用属性]
 
 1 .childNodes:(数组)获取元素的所有子节点
 2 .firstChild:获取元素的第一个子节点;
 3 .lastChild:获取元素的最后一个子节点;
 4 .ownerDocument:获取当前文档根节点。在html文档中,为document节点
 5 .parentNode:获取当前节点的父节点;
 6 .previousSibling:获取当前节点的前一个兄弟节点
 7 .nextSibling:获取当前节点的后一个兄弟节点
 
 注:上述属性,均会获得所有的元素节点和文本节点,如果只需要元素节点,需要使用对应Element属性,例如:firstChild--->firstElementChild
 
 8 .attributes:获取当前元素节点的所有属性节点
 
 
七【创建并新增节点】
 
 1、.createElement("标签名"): 创建一个新的节点。需要配合.setAttribute()方法设置新节点的相关属性;
2、 .appendChild(节点名): 在某元素的最后追加一个新节点
 3、 .insertBefore(新节点名,目标节点名):将新节点,插入到目标节点之前
 4、 克隆节点.cloneNode(true/false): 需要克隆谁,就用谁去调用克隆对象;
 >>>传递参数可以为true或false:
① true表示:克隆当前节点及所有子节点;
 ② false表示:只克隆当前节点,不可隆子节点(默认)
 
 
 八【删除/替换节点】
 
 1、 .removeChild(需删除节点):从父容器中,删除指定节点;
 2、 .replaceChild(新节点,被替换节点):用新节点替换指定节点。如果新节点为页面中已有节点,会将此节点删除后,替换到指定节点。

JS的Dom树小结的更多相关文章

  1. js的dom测试及实例代码

    js的dom测试及实例代码 一.总结 一句话总结: 1.需要记得 创建 标签和创建文本节点都是document的活:document.createTextNode("Rockets的姚明&q ...

  2. js的dom操作(整理)(转)

    js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...

  3. JS高级---遍历DOM树

    遍历DOM树  第一个函数: 给我根节点, 我会找到所有的子节点: forDOM(根节点)  获取这个根节点的子节点  var children=根节点的.children  调用第二个函数  第二个 ...

  4. 通过Ztree生成页面html元素Dom树,以及拖拽改变元素的位置

    zTree 是一款依靠 jQuery 实现的多功能 "树插件",http://www.treejs.cn/v3/main.php#_zTreeInfo,功能强大,不多赘述. 下面我 ...

  5. JS性能--DOM编程之重排与重绘

    浏览器下载完页面中的所有组件----HTML标记,Js,CSS,图片等之后会解析并生成两个内部数据结构: DOM树  -------- 表示页面结构 渲染树   -------- 表示DOM节点如何显 ...

  6. Js杂谈-DOM

    前言 对jQuery的依赖.导致js的原生方法的淡忘,如果是封装自己的库,那势必要用到js的许多原生方法.从Jquery强大的dom处理开始,我们开始回顾javascript那些古老而坚挺的DOM方法 ...

  7. 高效率http页面优化法则一【JS对DOM的操作】

    高效http页面优化法则一很多人都认为JS的效率太慢了,都不愿意用js来实现相对困难一点的程序逻辑.在这里我要说的是其实js的效率并不慢,慢的是DOM,如果操作好DOM,你的js效率将提高接近千倍(这 ...

  8. python学习笔记十三 JS,Dom(进阶篇)

    JS介绍 JavaScript 是属于网络的脚本语言!JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用:JavaScript 是因特网上最流 ...

  9. JS之DOM编程

    为什么学dom编程? 通过dom编程,我们可以写出各种网页游戏 dom编程也是我们学习ajax技术的基础,所以我们必需掌握好dom编程.  dom编程简介 DOM=Document Object Mo ...

随机推荐

  1. java-信息安全(四)-数据签名、数字证书

    概述 信息安全基本概念: 数字签名 数字证书 数字签名 数字签名(又称公钥数字签名.电子签章)是一种类似写在纸上的普通的物理签名,但是使用了公钥加密领域的技术实现,用于鉴别数字信息的方法.一套数字签名 ...

  2. MyBatis:学习笔记(1)——基础知识

    MyBatis:学习笔记(1)--基础知识 引入MyBatis JDBC编程的问题及解决设想 ☐ 数据库连接使用时创建,不使用时就释放,频繁开启和关闭,造成数据库资源浪费,影响数据库性能. ☐ 使用数 ...

  3. JavaWeb之JSON

    一.什么是JSON? JSON: JavaScript Object Notation(JavaScript 对象表示法) JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML ...

  4. 转载 感受K2.Net 2003工作流解决方案

    接触SourceCode公司的工作流产品K2.NET 2003有一段时间了,想把一些心得分享出来,和各位共同探讨一下,抛砖引玉,希望能对相关人士以启发. K2.Net 2003是基于微软.Net Fr ...

  5. 【转】Objective-C Runtime

    之前在找Runtime资料,这篇条理是相对比较清晰,对我最有启发的一篇,转载以作记录. 对于iOS小白,值得多看几遍,会有不少收获. --------------------------------- ...

  6. v3学院带你学习EEPROM读写实验

    一.实验背景在消费者电子电讯和工业电子中看上去不相关的设计里经常有很多相似的地方例如几乎每个系统都包括一些智能控制通常是一个单片的微控制器,通用电路例如LCD驱动器远程I/O,RAM,EEPROM或数 ...

  7. Alamofire源码解读系列(九)之响应封装(Response)

    本篇主要带来Alamofire中Response的解读 前言 在每篇文章的前言部分,我都会把我认为的本篇最重要的内容提前讲一下.我更想同大家分享这些顶级框架在设计和编码层次究竟有哪些过人的地方?当然, ...

  8. win32/mfc/qt 异常处理与总结

    际异常一: libcpmtd.lib(xmbtowc.obj) : error LNK2001: unresolved external symbol __CrtDbgReport Debug/B机. ...

  9. Kubernetes使用cephfs作为后端存储

    这里使用了k8s自身的持久化卷存储机制:PV和PVC.各组件之间的关系参考下图: PV的Access Mode(访问模式) The access modes are: ReadWriteOnce – ...

  10. Object-C开发常用宏定义

    Object-C开发中宏会将经常用到的系统常量进行封装,方便使用: 1.获取通知中心 #define EYNotificationCenter(name, object, userInfo) [[NS ...