一、HTML DOM

》》》》》》》》》》》》》》》》》》》》具体可以参考W3SCHOOL中的讲解，接下来我会结合W3SCHOOL和本人总结的一些实例供大家理解。

HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准

二、HTML DOM 节点树

DOM 节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

三、HTML DOM 方法

方法是我们可以在节点（HTML 元素）上执行的动作

方法是您能够执行的动作（比如添加或修改元素）。

属性是您能够获取或设置的值（比如节点的名称或内容）。

HTML DOM 对象 - 方法和属性

每个对象都有他的方法和属性，例如screen对象、location对象、history对象。接下来会具体介绍一些常用的属性和方法

为了便于理解》》》》》》可以参照现实中的对象来理解HTML中的对象

现实生活中的对象

某个人是一个对象。

人的方法可能是 eat(), sleep(), work(), play() 等等。

所有人都有这些方法，但会在不同时间执行它们。

一个人的属性包括姓名、身高、体重、年龄、性别等等。

所有人都有这些属性，但它们的值因人而异。

理解了现实中的对象后，开始具体理解HTML中的对象和方法

一些常用的 HTML DOM 方法：

getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

属性

例如：screen 对象的属性

console.log(screen.width);// 屏幕宽度
console.log(screen.height);// 屏幕高度
console.log(screen.availWidth); //可用宽度
console.log(screen.availHeight); //可用高度=屏幕高度-底部任务栏

 location 对象的属性

console.log(location.href); // 完整路径
console.log(location.protocol
); // 使用的协议 http: https: ftp: file: mailto:
         console.log(location.pathname
); // 文件路径
         console.log(location.port
); // 端口号
         console.log(location.search); // 从?开始往后的部分
         console.log(location.hostname); // 主机名(IP地址)
         console.log(location.host); // 主机名+端口号
         console.log(location.hash)

 Navigator 对象的属性>>>主要的属性：

description:插件的描述信息
filename:插件在本地磁盘的文件名
length:插件的个数
name：插件名

方法

window对象有一些常用的方法，

* >>> window对象中的所有方法，均可以省略前面的window. ,比如close();
* 
* 1、prompt：弹窗接收用户输入；
* 2、alert:弹窗警告；
* 3、confirm：带有确认/取消 按钮的提示框；
* 4、close:关闭当前浏览器选项卡
* 5、open：重新打开一个窗口，传入参数：URL/窗口名称/窗口特征
* 6、setTimeout：设置延时执行，只会执行一次；
* 7、setInterval：设置定时器，循环每个N毫秒执行一次；
*                 两个参数：需要执行的function / 毫秒数
* 8、clearTimeout：清除延时
* 9、clearInterval：清除定时器 
*    传入参数：调用setInterval时返回一个ID，通过变量接受ID,传入clearInterval

function closeWindow(){
   close();
}

function openWindow(){
   window.open("http://www.baidu.com","百度一下","height=300px,width=200px,");
}

var timeOutId = setTimeout(function(){
   console.log("setTimeout");
},5000);var num = 10;            
var interValId = setInterval(function (){       
  console.log(num);        
 num--;        
 if(num==0){           
 clearInterval(interValId);       
  }      },1000);           
 function clearTimeOutBtn()       
  clearTimeout(timeOutId);

      }

      function clearIntervalBtn(){
         clearInterval(interValId);
      }
      console.log("\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n");
   </script>
</head>
<body>
   <button onclick="locationReplace()">location.replace();使用新的文档替换当前文档</button>
   <button onclick="locationAssign()">location.assign();加载新的文档</button>
   <button onclick="locationReload()">location.reload();重新加载当前的文档</button>
   <br />
   <button onclick="historyBack()">使用history.back()后退</button>
   <button onclick="historyForward()">使用history.forward()前进</button>
   <button onclick="historyGo()">使用history.go()跳转到历史列表任意位置</button>
   <br />
   <button onclick="closeWindow()">关闭浏览器窗口</button>
   <button onclick="openWindow()">打开一个新的浏览器窗口</button>   
   <button onclick="clearTimeOutBtn()">clearTimeOut</button>
   <button onclick="clearIntervalBtn()">clearInterval</button>
</body>

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代码
}
function getByName(){
var div = document.getElementsByName("div1");
//div.style.backgroundColor = "blue"; ×
for(var i=0;i<div.length;i++){
div[i].style.backgroundColor = 'blue';
}
}

function getAttr(){
var img1 = document.getElementById("img1");
alert(img1.getAttribute("src"));
}

function setAttr(){
var img1 = document.getElementById("img1");
img1.setAttribute("src","../../2_CSS基础语法/img/cat.jpg");
img1.setAttribute("title","我被setAttribute设置了title");
img1.setAttribute("style","width: 100px; height: 100px;");
}

</script>

.div2{
width: 200px;
height: 200px;
background-color: blue;
}
</style>

</head>

<body>
<button onclick="getById()" id="btn1">通过ID修改divcolor</button>
<button onclick="getByName()">通过name修改divcolor</button>
<button onclick="getByTagName()">通过TagName修改divcolor</button>
<button onclick="getByClassName()">通过className修改divcolor</button>
<button onclick="getAttr()">取到img的src属性值</button>
<button onclick="setAttr()">修改img的src属性值</button>

<div id="div1" name="div1" class="div1">
<s>div文字</s>
</div>

<div id="div1" name="div1" class="div1">
div文字
</div>

</body>
</html>

BOM的节点方法和属性的更多相关文章

JavaScript 节点操作Dom属性和方法(转)
JavaScript 节点操作Dom属性和方法一些常用的dom属性和方法,列出来作为手册用. 属性: 1.Attributes 存储节点的属性列表(只读) 2.childNodes 存储 ...
js的DOM的方法和属性总结
1.DOM的获取元素document.getElementById()context.getElementsByTagName(tag) (可以获取相应上下文环境所有的tag标签)context.ge ...
JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结
JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode 父节点 childNodes ...
JS获取节点方法
1. 通过顶层document节点获取:(1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有 ...
JS-DOM Element方法和属性
JS-DOM Element方法和属性 S-DOM Element方法和属性一,获取html元素1.getElementByID(id)通过对元素的ID访问,这是DOM一个基础的访问页面元素的方法.e ...
.net代码获取节点以及读取属性
获取配置文件的节点,可以使用System.Configuration.ConfigurationManager.GetSection方法获取指定的节点,以sessionstate节点为例,如果需要获取 ...
jQuery源码06-jQuery = function(){};给JQ对象，添加一些方法和属性，extend : JQ的继承方法，jQuery.extend()
/*! * Includes Sizzle.js 选择器,独立的库 * http://sizzlejs.com/ */ (function( window, undefined ) { //" ...
javaScript DOM编程经常使用的方法与属性
DOM是Document Object Model文档对象模型的缩写.依据W3C DOM规范,DOM是一种与浏览器,平台,语言无关的接口,使得你能够訪问页面其它的标准组件. Node接口的特性和方法 ...
详解BOM头以及去掉BOM头的方法
类似WINDOWS自带的记事本等软件,在保存一个以UTF-8编码的文件时,会在文件开始的地方插入三个不可见的字符(0xEF 0xBB 0xBF,即BOM).它是一串隐藏的字符,用于让记事本等编辑器识别 ...

随机推荐

LightOJ 1213 Fantasy of a Summation(规律 + 快数幂)
http://lightoj.com/volume_showproblem.php?problem=1213 Fantasy of a Summation Time Limit:2000MS ...
connect db2 by tools
php使用xa规范实现分布式事务处理
具体实例如下,对数据表进行插入和删除操作,两个操作都成功才会修改数据表,否则数据表不变. <?php class connDb{ private static $host = 'jxq-off- ...
PHP中php_sapi_name()与array_map()
1,php_sapi_name() php_sapi_name返回web服务器和php之间的接口类型.函数说明: string php_sapi_name(void) 返回描述php所使用的接口类型的 ...
Getting Started with Elastic Search in .NET
I have been working on many application during my career. Many if not all had some searching capabi ...
K：java中的安全模型(沙箱机制)
本博文整合自:Java安全--理解Java沙箱.Java 安全模型介绍.Java的沙箱机制原理入门相关介绍: 我们都知道,程序员编写一个Java程序,默认的情况下可以访问该机器的任意资源,比如读取 ...
哈工大ComingX-创新工场俱乐部正式成立
当我把这两个Logo放在一起的时候,我有一种感觉,这种感觉同样存在于ComingX队员的心中.大学我们走到了一起,非你我所预料,却又如此自然.在感恩节的零点,我迫不及待地告诉各位ComingX队员和关 ...
分布式系统的Raft算法学习笔记
摘取自: http://mp.weixin.qq.com/s?__biz=MzIyMTQ1NDE0MQ==&mid=2247483979&idx=1&sn=12864382e ...
社区发现SLPA算法
社区(community)定义:同一社区内的节点与节点之间关系紧密,而社区与社区之间的关系稀疏. 设图G=G(V,E),所谓社区发现是指在图G中确定nc(>=1)个社区C={C1,C2,..., ...
Vue 不睡觉教程2 - 洋气的文件结构
目标书接上回,上回那个例子实在太土了.实际开发中我们不可能把整个网站的js和html全写到一个页面上.所以我们这节课的目标在于改造这个例子的文件结构,让它不那么土Let's do it 环境参数vue ...

BOM的节点方法和属性