JS的Dom树小结

一【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(新节点,被替换节点):用新节点替换指定节点。如果新节点为页面中已有节点,会将此节点删除后,替换到指定节点。

时间: 2024-10-18 21:12:05

JS的Dom树小结的相关文章

js的dom测试及实例代码

js的dom测试及实例代码 一.总结 一句话总结: 1.需要记得 创建 标签和创建文本节点都是document的活:document.createTextNode("Rockets的姚明"); 2.appendChild就是 标签 都可以干的活:document.body.appendChild(hr1); 1.需要记得 创建 标签和创建文本节点都是document的活? var div1 = document.createElement("div"); var t

从Chrome源码看浏览器如何构建DOM树

.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } p { font-size: 15px; text-indent: 2em } #colorbox.crayon-colorbox,#cboxOverlay.crayon-colorbox,.crayon-colorbox #cboxWrapper { position: absolute; top: 0; left: 0; z-

JS之DOM编程

为什么学dom编程? 通过dom编程,我们可以写出各种网页游戏 dom编程也是我们学习ajax技术的基础,所以我们必需掌握好dom编程.  dom编程简介 DOM=Document Object Model(文档对象模型),根据W3C DOM规范,DOM是HTML与XML的应用编程接口(API),DOM将整个页面映射为一个由层次节点组成的文件. js把浏览器,网页文档和网页文档中的html元素都用相应的内置对象来表示,这些对象与对象间的层次关系称为dom,针对网页(html,jsp,php,as

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

zTree 是一款依靠 jQuery 实现的多功能 "树插件",http://www.treejs.cn/v3/main.php#_zTreeInfo,功能强大,不多赘述. 下面我将介绍如何实现使用该插件生成HTML元素Dom树,并对其进行多样操作. 先贴上一个简单的HTML页面(直接拿的ztree的用的,画面简单实用,里面的文字内容不用在意) 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-e

Js操作-DOM操作

js学习--DOM操作详解大全 前奏(认识DOM) 一 . 节点属性 DOM 是树型结构,相应的,可以通过一些节点属性来遍历节点树: 方法 说明 nodeName 节点名称,相当于tagName.属性节点返回属性名,文本节点返回#text.nodeName,是只读的. nodeType 节点的类型,返回值:1,元素节点:2,属性节点:3,文本节点.nodeType 是只读的. nodeValue 节点的值,返回一个字符串,指示这个节点的值.元素节点返回 null,属性节点返回属性值,文本节点返回

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

JS介绍 JavaScript 是属于网络的脚本语言!JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用:JavaScript 是因特网上最流行的脚本语言. JavaScript 与 Java 是两种完全不同的语言,无论在概念还是设计上. Java(由 Sun 发明)是更复杂的编程语言. ECMA-262 是 JavaScript 标准的官方名称. JavaScript 由 Brendan Eich 发明.它于 1995 年出现在 Net

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

高效http页面优化法则一很多人都认为JS的效率太慢了,都不愿意用js来实现相对困难一点的程序逻辑.在这里我要说的是其实js的效率并不慢,慢的是DOM,如果操作好DOM,你的js效率将提高接近千倍(这并不是什么夸张的数字). 1. 批量增加Dom:使用修改innerHTML的方式 尽量使用修改innerHTML的方式而不是用appendChild的方式; 因为使用innerHTML开销更小,速度更快,同时也更加内存安全. 有一点需要注意的是,用innerHTML方式添加时,一定不要在循环中使用

JS性能DOM优化

什么是DOM?  用于操作XML和HTML文档的应用程序 Dom节点  2. Dom树   3.Dom API DOM优化 浏览器会把js和dom独立实现,js每次操作dom,都会增加一次耗时,为了提高dom性能,就要尽可能减少js对dom的操作, 以下是两个测试 1 <script> 2 window.onload=function(){ 3 var div=document.getElementById('div'); 4 var str=''; 5 console.time('test1

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

浏览器下载完页面中的所有组件----HTML标记,Js,CSS,图片等之后会解析并生成两个内部数据结构: DOM树  -------- 表示页面结构 渲染树   -------- 表示DOM节点如何显示 DOM树中的每一个需要显示的节点在渲染树中至少存在一个对应的节点(隐藏的DOM元素在渲染树中没有对应的节点). 渲染树中的节点被称为“帧“或者”盒“,符合CSS模型的定义,理解页面元素为一个具体填充(padding),边距(marging),边框(borders)和位置(position)的盒子