一、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>

<style type="text/css">
.div1{
width: 100px;
height: 100px;
background-color: red;
}

.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>

<img src="../../1_HTML基本标签/img/abc.jpg" id="img1" />

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

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

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

</body>
</html>



 


 


 


 
												


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

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

	


随机推荐
	

    
									
  1. Problem D: GJJ的日常之暴富梦（水题）
			
    Contest - 河南省多校连萌(四) Problem D: GJJ的日常之暴富梦 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 693  Solve ...
    
			
    2. 
						
  2. 数论入门2——gcd,lcm,exGCD,欧拉定理,乘法逆元,(ex)CRT,(ex)BSGS,(ex)Lucas,原根,Miller-Rabin,Pollard-Rho
			
    数论入门2 另一种类型的数论... GCD,LCM 定义\(gcd(a,b)\)为a和b的最大公约数,\(lcm(a,b)\)为a和b的最小公倍数,则有: 将a和b分解质因数为\(a=p1^{a1}p ...
    
			
    3. 
						
  3. mylyn提交到JIRA的日期格式错误
			
    HTTP Status 400 - Date value '27/Dec/11' for field 'due' is invalid. Valid formats include: 'yyyy/MM ...
    
			
    4. 
						
  4. 鸡肋点搭配ClickJacking攻击-获取管理员权限
			
    作者:jing0102 前言 有一段时间没做测试了,偶尔的时候也会去挖挖洞.本文章要写的东西是我利用ClickJacking拿下管理员权限的测试过程.但在说明过程之前,先带大家了解一下ClickJac ...
    
			
    5. 
						
  5. (四)SSO之CAS框架单点登录,自定义验证登录方式
			
    应需求的变化,在登录cas的时候,默认根据用户名和密码进行验证,如果加上用户名,密码和一个系统标识进行验证呢?该如何做呢? 我们知道cas默认的登录界面中,输入的用户名和密码,再配置一下deploye ...
    
			
    6. 
						
  6. django基础2
			
    一. 使用原生sql,了解即可 使用原生sql的目的:解决一些复杂的sql不能用ORM方式写出的问题 有三种方式如下 1. extra: 结果集修改器,一种提供额外查询参数的机制 2. raw:执行原 ...
    
			
    7. 
						
  7. 在PL/SQL里直接插入日期时提示 is not a valid date and time的解决方法
			
    在PL/SQL Developer里直接往表里插入日期格式的数据时,经常会出现" is not a valid date and time"的错误,这是因为Oracle的日期格式和 ...
    
			
    8. 
						
  8. eclipse安装SonarLint插件，sonarLint客户端的使用
			
    一.在线安装sonarLint 打开eclipse里的help->Eclipse Marketplace,搜索“sonar”关键字,目前sonar的插件是sonarlint,如下图: 点击“In ...
    
			
    9. 
						
  9. docker微服务部署之：五、利用DockerMaven插件自动构建镜像
			
    docker微服务部署之:四.安装docker.docker中安装mysql和jdk1.8.手动构建镜像.部署项目 在上一篇文章中,我们是手动构建镜像,即: 4.1.2.5.1.2.6.1.2中的将d ...
    
			
    10. 
						
  10. 遇见Navicat 2003-can't connect to MYSQL server on 'localhost'（10061）
			
    学习过程中难免遇到问题,今天就遇到了Navicat 2003-can't connect to MYSQL server on 'localhost'(10061),navicat报错,我就纳闷以前都 ...
    
			
    11.