一、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).它是一串隐藏的字符,用于让记事本等编辑器识别 ...

随机推荐

“全栈2019”Java第一百零四章：匿名内部类与外部成员互访详解
难度初级学习时间 10分钟适合人群零基础开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
关于Mybatis 反向生成后查询结果全部为null 解决办法
今天遇到了一个问题,就是mybatis通过反向生成工具生成的pojo类(实体类) xml文件以及Mapper之后查询时结果为null 我写的代码怎么看都没有错就是没有结果后来在排除错误的时候发 ...
JAVA中-面向网络编程---单层交互
面向网络编程---单层交互: 客户端说明: /* * 实现TCP客户端,链接到服务器 * 和服务器实现数据交互 * 实现TCP客户端的类 java.net.Scoket * 构造方法: * Socke ...
浅谈Android选项卡（三）
上一节介绍了TabActivity的简单用法,但是现在的Api中已经不建议使用了,建议使用Fragment来替代以上的功能,下面介绍下使用Fragment和ViewPager的结合使用. http:/ ...
SpringQuartz定时任务cronExpression配置
 <property name="cronExpression"> <value>0 0 0/1 * * ?&l ...
jQuery 节点操作（创建插入删除复制替换包裹）
一,创建元素节点: 第1个步骤可以使用jQuery的工厂函数$()来完成,格式如下: $(html); $(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一 ...
ConcurrentHashMap相关知识点
ConcurrentHashMap涉及的知识点:HashMap,HashTable,UnSafe,CAS,数组+链表,Segment,ReentrantLock(非公平锁,公平锁),红黑树. 为什么要 ...
Oracle数据库学习（二）：Oracle Linux下oracle、ogg的挂载与参数配置
准备工作:打开虚拟机端的Oracle Linux Server 6.9的系统,然后使用root用户登录.打开终端界面,输入ifconfig -a查看IP地址. 然后在本地打开XShell软件使用以下命 ...
python全栈开发_day15_函数回调和模块
一:函数回调 def a(fn=None): print("run1") if fn: fn() print("run 2") def b(): print(& ...
【第2次会议记录_2018.5.27】—— [ 算法原理 ]：手工特征提取的概念问题。（by_wanghao）
1.提取特征点 .特征描述子与提取特征向量之间的区别: (1).特征点:指的是一张图片上比较有代表性的‘位置’,提取特征点就是把图片中这些有代表性的位置给标出来. (2).特征描述子:当提取出 ...

BOM的节点方法和属性