BOM的节点方法和属性

Posted GlenLi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了BOM的节点方法和属性相关的知识,希望对你有一定的参考价值。

一、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的节点方法和属性的主要内容,如果未能解决你的问题,请参考以下文章

BOM下的属性和方法---下

JavaScript基础及函数,BOM,DOM的节点及DOM节点操作

JS DOM(文档对象模型)与BOM(浏览器对象模型)

关于元素,BOM中各种数值的总结

JavaScript50_终篇_编程进阶与BOM编程概览(3k字+)

javascript之BOM对象(二location对象)