学习总结——DOM
DOM(Document Object Model),即文档对象模型。DOM是针对HTML和XML文档的一个API,它描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。在定义方面,我理解得尚不是非常透彻。但DOM树是前端工程师在学习javascript过程中非常重要的一部分,所以今天且把一些我最近常用到的内容总结一下吧。
1、元素节点方法
通过ID获取元素节点:document.getElementById();
通过标签名获取元素节点:document.getElementByTagName();
通过名字获取获取元素节点:document.getElementByName();
获取节点属性:getAttribute(属性名);
设置节点属性:setAttribute(属性名,属性值);
删除节点属性:removeAttribute(属性名);
2、节点属性
注意:
1、在使用childnodes获取子节点时,换行符(不可见)也会当作一个子节点,且nodeType等于3;
2、当获取body的childnodes时,若</body>闭标签后面插入了<script></script>标签,浏览器(包括FF、IE和chrome等)在渲染DOM树的时候,会把<script>节点渲染成<body>的子节点。
注意,当在<head></head>标签内插入<script></script>时则不会导致这种情况。为了搞清楚这个问题,我找来了DOM树的结构图。我的理解是,因为DOM树的根部结构都是固定为DOCUMENT->HTML->HEAD和BODY的,而浏览器在渲染时为了遵循这种规则,就统一把body后面的script解析到body内部。也就是说浏览器将script渲染成body的子节点,不然若把script直接渲染成html的子节点的话,就会破坏DOM树的标准结构。也就是说,浏览器之所以这样做是为了规范以及标准,因为script标签原则上是放在head或body内部的。所以不推荐大家把javascript代码置在body之后,这是一种不规范的做法。
3、节点关系
childNodes:所有子节点(包含换行符和空格)
children:所有是标签类型的子节点(直接子节点,不包括孙子等)
parentNode:父节点
nextSibling:下一个兄弟节点(记得去换行符和空格)
previousSibling:上一个兄弟节点
firstChild : 第一个子节点
lastChild:最后一个子节点
注意:使用后四个关系(即next、previous、first和last)获取节点时,在IE下会存在写法上的差异,所以我们在使用时常常要写兼容性方法。
//兼容IE的方法
function fnNext(obj){ //下一个兄弟节点
return obj.nextElementSibling ? obj.nextElementSibling : obj.nextSibling;
} function fnpre( obj ){ //上一个兄弟节点
return obj.previousElementSibling ? obj.previousElementSibling : obj.previousSibling;
} function fnFirst(obj){ //第一个子节点
return obj.firstElementChild ? obj.firstElementChild : obj.firstChild;
} function fnLast(obj){ //最后一个子节点
return obj.lastElementChild ? obj.lastElementChild : obj.lastChild;
}
4、获取元素尺寸和位置
获取内联样式的宽高:Element.style.width/height (只能获取写在标签style内的样式)
获取可视区域大小:clientWidth/clientHeight (包括padding,但不包括margin和border)
获取元素实际大小:offsetWidth/offsetHeight (包括border、内填充和滚动条,但不包括margin)
获取定位父节点:offsetParent (相对定位的父容器,定位不一定根据父节点)
获取相对位置:offsetLeft/Top/Right/Bottom(相对于父定位容器的位置)
注意:在offsetParent 中,如果本身父元素是<body>,非IE 返回body 对象,IE 返回html 对象。(IE总是那么我行我素, ̄□ ̄||)
5、获取应用样式
比较少用,以下两个我都没有用过,这里仅作为拓展认识。
currentStyle:ie所支持的获取非行间样式的方法
用法:对象.currentStyle.样式名
例:oDiv.currentStyle.width
getComputedStyle:非ie所支持的获取非行间样式的方法
用法:getComputedStyle(对象,伪类).样式名
例:getComputedStyle(oDiv,null).color
6、操作节点方法
createElement("标签名") : 创建新元素;
createTextNode("") : 创建文本节点;
创建方法:document.createElement('div');
appendChild(node) : 向childNodes末尾插入一个节点node
insertBefore(node,targetNode) : 向targetNode之前插入节点node
replaceChild(newNode,oldNode) : newNode替换节点oldNode
removeChild(node) : 移除父节点的某个子节点
PS:下一篇会写到DOM应用的实例,灵活使用DOM的节点操作方法,是一个很强大的功能。
学习总结——DOM的更多相关文章
- html学习笔记-DOM
html学习笔记-DOM Table of Contents 1. 什么是 DOM? 2. DOM 节点 3. DOM 方法 4. DOM 属性 5. DOM 访问 6. DOM 修改 7. DOM ...
- 原生js学习 选择dom
连bootstrap5 都抛弃jquery了,重新使用原生js来写,所以最近在学习原生js. 一.选择dom元素: id let sure=document.getElementById('sure' ...
- js学习笔记--dom部分(一)
js 学习整理之Dom部分 前面我总结了我最近学习js基础部分,当时提到过js分了三大部分,第一部分ECMA基础也就是第一次写的基础部分, 第二部分也就是DOM部分,也就是这里要写的内容的,然后第三部 ...
- javascript基础学习系列-DOM盒子模型常用属性
最近在学习DOM盒子模型,各种属性看着眼花缭乱,下面根据三个系列来分别介绍一下: client系列 clientWidth :width+(padding-left)+(padding-right)— ...
- javascript基础学习--HTML DOM
写在前面的话:由于学校没有开过javascript这门课,所以平时用javascript时都是用到什么就去搜什么样的代码,但是在工作中有时候搜来的代码总是有那么点小问题,而当自己想去修改时,却又无从下 ...
- Vue.js_础学习之DOM操作
demo说明: 1.{{message}} --“Mustache” 语法(双大括号) 2.v-bind:属性名 ...
- 轻松学习JavaScript十八:DOM编程学习之DOM简单介绍
一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,执行开发者加入,移除和改动页面的某一部分 ...
- 学习WEBAPI(DOM)第二天
目录 第二天学习目标: 一.阻止超链接的默认跳转行为 二.鼠标进入事件和鼠标离开事件 三.根据name属性值获取元素==>表单标签,返回的是伪数组 四.根据类样式的名字来获取元素,返回的是伪数组 ...
- Javascript学习,DOM对象,方法的使用
JavaScript: ECMAScript: BOM: DOM: 事件 DOM的简单学习 功能:控制html文档内容 代码:获取页面标签(元素)对象和Element document.getElem ...
随机推荐
- SGU 422 Fast Typing(概率DP)
题目大意 某人在打字机上打一个字符串,给出了他打每个字符出错的概率 q[i]. 打一个字符需要单位1的时间,删除一个字符也需要单位1的时间.在任意时刻,他可以花 t 的时间检查整个打出来的字符串,并且 ...
- ubuntu 安装node.js + express + mongodb
转载自http://my.oschina.net/reg/blog/289536 Ctrl + Alt + T,打开终端,输入以下命令安装: sudo apt-get install nodejs 安 ...
- JAVA和C# 3DES加密解密
最近 一个项目.net 要调用JAVA的WEB SERVICE,数据采用3DES加密,涉及到两种语言3DES一致性的问题, 下面分享一下, 这里的KEY采用Base64编码,便用分发,因为Java的B ...
- mvc4.0添加EF4.0时发生编译时错误
解决此问题是因为MVC4.0默认未添加EF4.0的引用,EF4.0引用的是System.Data.Entity.dll, Version=4.0.0.0, 解决办法: 在web.config文件sys ...
- canvas剪裁图片并上传,前端一步到位,无需用到后端
背景: 当前主流的图片剪裁主要有两种实现方式. 1:flash操作剪裁.2:利用js和dom操作剪裁. 目前看来这个剪裁主要还是先通过前端上传图片到服务器,然后前端操作后把一些坐标和大小数据传到后台, ...
- Mac常用基本命令/常用Git命令
Git地址: https://github.com/mancongiOS/command-line基本命令 目录/文件的操作 mkdir "目录名" 在当前路径下创建一个文件夹 m ...
- Web Service常识
1 问题的引出 位于服务器的程序需要在Web页面上显示一个订单列表,它需要访问业务对象服务器上的程序,通过它读取订单列表,业务对象服务器又要访问数据库服务器.当一台计算机上的程序调用另一台计算机上 ...
- ASP.NET 为GridView添加序号列,且支持分页连续累计显示
为GridView添加序号列,且支持分页连续累计显示,废话不多说,直接上代码: <%@ Page Language="C#" AutoEventWireup="tr ...
- 前端翻译:Promises/A+规范
原文地址:https://promisesaplus.com/ 本篇为原文翻译+个人理解,若有谬误请各位指正,谢谢. 尊重原创,转载请注明来自:http://www.cnblogs.com/fsjoh ...
- Android的init过程(二):初始化语言(init.rc)解析
Android的init过程(一) 本文使用的软件版本 Android:4.2.2 Linux内核:3.1.10 在上一篇文章中介绍了init的初始化第一阶段,也就是处理各种属性.在本文将会详细分析i ...