一【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. 解决Antimalware Service Executable CPU占用高听语音

    windows8/8.1,WIN10自带的安全软件Windows defender还不错,基本可以不用装其他杀毒软件了. 但是其进程Antimalware Service Executable 出现C ...

  2. WinFrom中使用WPF的窗体

    步骤 1.添加WindowsFormsIntegration.dll .System.Windows.Forms.和System.Xaml,PresentationCore.PresentationF ...

  3. ARC引用计数

    NSlog(@"Retain count is %ld", CFGetRetainCount((__bridge CFTypeRef)self)); block保环流---> ...

  4. wamp虚拟服务器

    1.安装好wampServer 2.修改配置文件包含 vhosts 文件,操作: 打开apache的配置文件httpd.conf,并去掉#Include conf/extra/httpd-vhosts ...

  5. vue监听滚动事件,实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...

  6. 急速搭建SuperMap iCloudManager for Docker环境

    大家好,SuperMap iCloudManager 是超图的 GIS 云管理系统,它是出色的云GIS平台的大管家. 它很简单,部署操作都很简单. 它很智能,可以实时监控 GIS 业务环境的 CPU ...

  7. Legendary Items-微软实习生笔试第一题

    题目如下: 这道题难点不仅在于正确理解题意,判断递归条件,更在于用数学方法推出解决公式.因为N最大为1百万,而内存只有256MB, 所以暴力递归肯定会超时,超空间. 不过,我才疏学浅,又没有大量时间去 ...

  8. 搭建ubuntu版hadoop集群

    用到的工具:VMware.hadoop-2.7.2.tar.jdk-8u65-linux-x64.tar.ubuntu-16.04-desktop-amd64.iso 1.  在VMware上安装ub ...

  9. XJOI1571爱心蜗牛【树形动规】

    爱心蜗牛 猫猫把嘴伸进池子里,正准备"吸"鱼吃,却听到门铃响了.猫猫擦了擦脸上的水,打开门一看,那人正是她的好朋友--川川.川川手里拿着一辆玩具汽车,对猫猫说:"这是我的 ...

  10. MongoDB基础教程系列--第四篇 MongoDB 查询文档

    查询文档 查询文档可以用 find() 方法查询全部文档,可以用 findOne() 查询第一个文档,当然还可以根据 条件操作符 和 $type操作符 查询满足条件的文档. find() 和 find ...