学习总结——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 ...
随机推荐
- ext 文档下载地址
ext官方太鬼了,离线文档下载地址藏的太深了,找出来真不容易 http://docs.sencha.com/misc/guides/offline_docs.html
- Unity3d导出Android的apk文件时相关问题的解决办法
今天上午着手将一个unity3d开发的小游戏build到android手机上运行,结果遇到了不少问题. 首先遇到的第一个问题是在build到一半的时候,弹出如下报错: Error building P ...
- 非常简单实用的Python HTTP服务
在做分布式系统应用的时候经常在测试环境上传一个包,或者干嘛的,公司的服务器比较bug,只给ldap权限,每次只能scp到自己的个人目录下,然后才能进到公共账号下去cp,比较麻烦.这时候如果你需要一个简 ...
- MSIL 教程(二):数组、分支、循环、使用不安全代码和如何调用Win32 API(转)
转自:http://www.cnblogs.com/Yahong111/archive/2007/08/16/857574.html 续上文[翻译]MSIL 教程(一) ,本文继续讲解数组.分支.循环 ...
- tcp/ip协议listen函数中backlog参数的含义与php-fpm的502 Bad Gateway
To understand the backlog argument, we must realize that for a given listening socket, the kernel ma ...
- c++ 全局变量初始化的一点总结
注意:本文所说的全局变量指的是 variables with static storage,措词来自 c++ 的语言标准文档. 什么时候初始化 根据 C++ 标准,全局变量的初始化要在 main 函数 ...
- zk框架window之间传值操作
.zul中向Action传递参数: <listcell> <button label="修改" onClick="@command('edit',id= ...
- HIVE: UDF应用实例
数据文件内容 TEST DATA HERE Good to Go 我们准备写一个函数,把所有字符变为小写. 1.开发UDF package MyTestPackage; import org.apac ...
- SEO优化之Title 和 Meta 标签
对搜索引擎最友好(Search Engine Friendly)的网页是静态网页,但大部分内容丰富或互动型网站都不可避免采用到相关技术语言来实现内容管理和交互功能.SEO 思想指导下的技术支持,主要是 ...
- Access导出csv 内容添加双引号 vba
要求:导出的csv文件,用文本工具打开时,文字内容需要有双引号,如下:"1","name1","name2","" 我之 ...