一【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. IDEA使用心得-----懒得截图了,但是大家应该看得懂

    1.界面设置,有白色和 黑色风格两种,我个人喜欢黑色风格,护眼最重要的是看着帅. 设置方法:FILE--Settings--Editor--Colors&Fonts--Scheme name ...

  2. oracle 实例启动报错(ORA-01078: failure in processing system parameters )

    在启动Oracle数据库时报错,如下: [oracle@localhost ~]$ sqlplus / as sysdba SQL*Plus: Release 11.2.0.1.0 Productio ...

  3. 使用javascript解一道关于会议日程安排的面试题

    这道面试题是从 HarrisonHao 的一篇博文中看到的:原文链接 我看到之后,感觉此题十分有趣,遂自己用 node.js 以不同的思路实现了一遍,实现中使用了 lodash 原题比较长,而且是英文 ...

  4. ASP.NET Core:CMD命令行+记事本 创建Console程序和Web Application

    今天看了Scott关于ASP.NET Core的介绍视频,发现用命令行一步一步新建项目.添加Package.Restore.Build.Run 执行的实现方式,更让容易让我们了解.NET Core的运 ...

  5. Eclipse中将含有图片资源的项目打包成jar文件

    前言: 最近学了GUI编程和UDP协议,心血来潮想做一个局域网内的聊天软件,前期都还算顺利,直到后来将整个项目打包成jar文件时遇到了困难.如图: 自己设置的图标不见了,但是也没有默认的图标,说明图片 ...

  6. 小练习,判断X的奇偶性

    package lianxi1; public class text { public static void main(String[] args) { ; ==) { System.out.pri ...

  7. zabbix 监控 tomcat jmx

    zabbix_server: zabbix_server.conf : # Add JavaGateway=127.0.0.1 JavaGatewayPort=10052 StartJavaPolle ...

  8. 深入探究stm32GPIO口模式(类比51)

    关于STM32GPIO口的8种工作模式,我们先引出一些问题? STM32GPIO口如果既要输入又要输出怎么办? 1.浮空输入模式 上图红色的表示便是浮空输入的过程,外部输入时0读出的就是0,外部输入时 ...

  9. 手机自动化测试:Appium源码之API(2)

    手机自动化测试:Appium源码之API(2)   TouchAction AppiumDriver的辅助类,主要针对手势操作,比如滑动.长按.拖动等.TouchAction的原理是讲一系列的动作放在 ...

  10. windows下安装zabbix_agent

    Server端在linux系统上,server端版本为2.2.6,是以前就装好的已经跑了很久的稳定版.目前的需求是要将新业务的服务器添加到该监控队列.而这些服务器是windows系统. 第一次下载了最 ...