JS---DOM概述
DOM
DOM：文档对象模型document object model
DOM三层模型：
DOM1；将HTML文档封装成对象
DOM2：将XML文档封装成对象
DOM3：将XML文档封装成对象
DOM树：将HTML中的标签按照层级关系封装成节点对象
DOM的出现使静态的HTML页面的标签变为动态的可操作的节点对象
DHTML：动态的HTML，是HTML、CSS、DOM、JavaScript四种技术的综合体
HTML：封装页面数据
CSS：设置标签中的数据样式
DOM：将标签封装成对象
JavaScript：将三者进行融合，通过程序设计方式完成动态效果的操作
标记型文档一加载进内存，内存中就产生了相应的DOM树，由此产生的弊端就是，文档国大时，消耗资源。对于大型文档，可用SAX方式解析。
HTML文档中的层次关系，DOM树的层次结构
document HTML文档对象
|——head
|——title
|——base
|——meta
|——link
|——body
|——form
|——input
|——select
|——textarea
|——div
|——table
|——tbody 默认都有，不写也有
|——tr
|——td
|——th
|——a
……
将HTML文档及其中的标签都封装成对象，方便操作。
节点都有的属性：nodeName nodeType nodeValue
注意区分DOM代码中对象的属性和HTML、CSS代码中的属性写法上的不同
节点类型
标签型节点：nodeType为1，容器型节点的nodeValue为空null 没有值
文本型节点：名字#text 类型为3
注释型节点：#comment 类型为8
文档型节点：#document 类型为9
属性型节点：类型为2 属性可通过对象的attributes集合属性获取
节点关系
父节点：每个节点有且只有一个父节点 通过节点parentNode属性获取
子节点：可以有多个 通过节点childNodes属性获取子节点集合（数组）
兄弟节点：分上一个和下一个，通过previousSibling和nextSibling属性获取
注意页面中标签之间的空行也是文本节点，浏览器解析时可能出现也可能没有这个节点
获取节点的方法：
1、getElementById(HTML标签中定义的id值)
获取文档中指定id对应的标签对象，注意保证id值唯一；
如果多个标签id相同，获取的是id对应的第一个对象
<script type=”text/javascript”>
var divObj = document.getElementById(“divid”);
divObj.style.backgroundColor=”blue”;注意DOM代码与CSS代码的不同
</script>
<html>
<div id=”divid” style=”background-color:red”>div内部数据</div>
style属性中的内容为CSS代码，注意区分DOM中的相同属性名称
</html>
2、getElementsByName(HTML标签中定义的name值)
获取文档中所有与name值相同的标签对象，封装为数组返回
3、getElementsByTagName(HTML标签名)
获取文档中与指定标签名相同的所有对象，返回数组
容器型标签中都有该方法，如div、table、p
JS---DOM概述的更多相关文章
- 货架工程项目之js dom实现项目工程进度图
笔者最近要负责有个项目工程网站的安装进度过程,实现的效果要求大概如下图所示 由于笔者没有参与到数据库的制作,得知他们这个项目设计工序的时候就一个开始日期的和完成日期,连整个项目的安装结束时间都没有简直 ...
- js DOM优化相关探索
我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...
- js DOM的几个常用方法
<div id="div1">这是个测试</div> <p </p> <p </p> //js DOM的几个常用方法 / ...
- JS DOM 来控制HTML元素
JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
- Js DOM 详解
DOM事件类 基本概念 DOM事件的级别 1.DOM0 element.onclick = function(){} 2.DOM2 element.addEventListener("cli ...
- JS DOM对象控制HTML元素详解
JS DOM对象控制HTML元素详解 方法: getElementsByName() 获取name getElementsByTagName() 获取元素 getAttribute() 获取元素 ...
- css3动画和JS+DOM动画和JS+canvas动画比较
css3兼容:IE10+.FF.oprea(animation):safari.chrome(-webkit-animation) js+dom:没有兼容问题: js+canvas:IE9+:(性能最 ...
- JS(DOM 和 BOM)
JS(DOM 和 BOM) 常说的JS(浏览器执行的JS)包含两部分:1.JS基础知识(语法)(ECMA262标准)2.JS-Web-API(W3C标准) W3C 标准中关于 JS 的规定有:(只管定 ...
- JS DOM（文档对象模型）与BOM（浏览器对象模型）
在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTM ...
随机推荐
- 生成HFile文件后倒入数据出现Caused by: java.lang.ClassNotFoundException: org.apache.hadoop.hbase.filter.Filter
数据导入的时候出现: at java.lang.Class.getDeclaredMethods0(Native Method) at java.lang.Class.privateGetDeclar ...
- UVa 202 - Repeating Decimals
给你两个数,问你他们相除是多少,有无限循环就把循环体括号括起来 模拟除法运算 把每一次的被除数记下,当有被除数相同时第一个循环就在他们之间. 要注意50个数之后要省略号...每一次输出之后多打一个回车 ...
- Android 测试工具集01
Appium是一个支持原生,混合和移动web apps的开源的跨平台测试框架工具. ANDROID依赖 Android SDK API >= 17 (Additional features re ...
- laravel中间件源码分析
laravel中间件源码分析 在laravel5.2中,HTTP 中间件为过滤访问你的应用的 HTTP 请求提供了一个方便的机制.在处理逻辑之前,会通过中间件,且只有通过了中间件才会继续执行逻辑代码. ...
- Android03－Activity生命周期及启动模式
1.返回栈概念 2.生命周期 1. onCreate() 这个方法你已经看到过很多次了,每个活动中我们都重写了这个方法,它会在活动 第一次被创建的时候调用.你应该在这个方法中完成活动的初始化操作,比如 ...
- Struts2 一、 视图转发跳转
<struts> <constant name="struts.118n.encoding" value="UTF-8"></co ...
- 关于 viewport meta
典型代码 <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
- 怎样在小方框上打对号 小方框内打对勾 word 方框打对勾
在word中做选择时,非常多人遇到须要在小方框上打对勾而不知怎样做,现将可行的各种方法总结例如以下: 1:直接找到一个做好的,保存为图片,在须要的时候插入它: 2:插入文本框,然后边框选择为实线,在文 ...
- WildFly8.1(JBoss)+mod_cluster(Apache)群集配置
继上次使用mod_jk传导Apache+JBoss群集配置后,.因为JBoss5.1启动太慢,于是我开始尝试用最新的WildFly8.1构造(WildFly那是,JBoss.在JBoss7之后改名). ...
- java 获取两个日期相差的毫秒数
方法一可以使用date的getTime()方法来将当前日期格式的时间转换为毫秒数,进而相减. long systime = new Date().getTime();//当前系统时间 l ...