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 ...
随机推荐
- Bootstrap插件——(Tab)标签页
项目中用到了Bootstrap的(Tab)标签页插件,记录如下: 代码如下: <div class="tabbable"> <ul class="nav ...
- 多线程并发编程之显示锁ReentrantLock和读写锁
在Java5.0之前,只有synchronized(内置锁)和volatile. Java5.0后引入了显示锁ReentrantLock. ReentrantLock概况 ReentrantLock是 ...
- Javascript获取当前时间戳的方法
定义日期: Date 对象用于处理日期和时间. 可以通过 new 关键词来定义 Date 对象.以下代码定义了名为 myDate 的 Date 对象: var myDate=new Dat ...
- css reset 以及哪些元素有默认margin padding值
很多网站在css reset 的时候有如下做法: body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, label, dl, dt, dd,fields ...
- linux----ln
1.格式 ln source_file_path target_file_path 2.执行ln 命令的用户要对source_file_path有写权限,才可以创建软连接. 3.souce_file这 ...
- js自定义类和对象及继承
1.工厂方式 <script type="text/javascript"> function createObject(name){ var p = new Obje ...
- CC++初学者编程教程(4) 安装Oracle12c于Windows Sever2012
我们开启虚拟机 Windows Sever2012启动中. 3.看到WindowsSever2012的桌面. 我们解压缩两个文件, winx64＿12c＿database＿1of2．zip,winx6 ...
- 原生网络请求以及AFN网络请求/异步下载
这里对网络请求方式做一个总结. 原生方式同步GET请求: NSString *urlStr = @"http://apis.juhe.cn/mobile/get?phone=13429667 ...
- 配置自己风格的Clang-Format-Xcode
在项目根目录下,创建一个文件.clang-format,使用vim打开并修改. 具体的配置风格可以看这里:http://clang.llvm.org/docs/ClangFormatStyleOpti ...
- UITableView进阶，cell刷新，界面返回 保持所选cell
1.cell 刷新 NSIndexPath *indexPath_1=[NSIndexPath indexPathForRow:1 inSection:0]; NSArray *indexArray= ...