一【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. HTML5学习笔记<二>:元素,属性,格式化

    HTML元素 元素是指从开始标签到结束标签的所有代码. 开始(开放)标签 元素内容 结束(闭合)标签 <p> this is my web page </p> 没有内容的 HT ...

  2. fastjson将json格式null转化空串

    生成JSON代码片段 Map < String , Object > jsonMap = new HashMap< String , Object>(); jsonMap.pu ...

  3. ASP.NET使用ajax实现分页局部刷新页面

    listview列表实现分页是非常容易的.ListView分页是非常简单的,加上一个DataPager控件,把ListView的ID赋予就可以了.最开始我就是这么写的.(网上有人说这样是伪分页?) & ...

  4. 输入输出流类iostream常用函数解析

    原创作品,转载请注明出处:http://www.cnblogs.com/shrimp-can/p/5657192.html 一.成员类型 1. ios::fmtflags: 格式标志,常用来设置输出的 ...

  5. javascript 将数字(金额)转成大写

    将计算好的金额转换成大写,这些功能非常多,下面我改进了一下代码(原文在这里:http://www.cnblogs.com/zsanhong/p/3509464.html). /** * _SetNum ...

  6. iOS开发之数据存储之Core Data

    1.概述 Core Data框架提供了对象-关系映射(ORM)的功能,即能够将OC对象转化成数据,保存在SQLite3数据库文件中,也能够将保存在数据库中的数据还原成OC对象.在此数据操作期间,不需要 ...

  7. python try/except/finally

    稍微总结一下,否则总是忘. [python] view plaincopyprint? x = 'abc' def fetcher(obj, index): return obj[index] fet ...

  8. spring学习起步

    1.搭载环境 去spring官网下载这几个包,其中commons-logging-1.2.jar是一个日志包,是spring所依赖的包,可以到apache官网上下载 也可以访问http://downl ...

  9. GCM(Google Cloud Messaging)推送完全解析

    应该是目前为止全网最详细的GCM推送解析. GCM官方解释: https://developers.google.cn/cloud-messaging/?hl=zh-cn Send data from ...

  10. 重新认识JavaScript里的数据类型

    一.序 数据类型,平时天天在用,今日闲暇便重新阅读了JavaScript数据类型这块,才发现平时用的时候有许些错误和不足,且对此深有感悟,便写下这篇文章加以巩固基础知识并有空翻出来温故而知新. 二.概 ...