javasrcipt dom编程

最新推荐文章于 2014-11-29 16:02:21 发布

技术搬砖工

最新推荐文章于 2014-11-29 16:02:21 发布

阅读量673

点赞数

分类专栏： javascript开发

本文链接：https://blog.csdn.net/hephec/article/details/39159545

版权

javascript开发专栏收录该内容

20 篇文章 0 订阅

订阅专栏

DOM：Document Object Model(文本对象模型)
D:文档-html文档或者xml文档
O:对象-document对象的属性和方法
M:模型
DOM是针对xml(xml)的基于树的API
DOM树：节点(node)的层次
DOM把一个文档表示为一棵家谱树(父，子，兄弟)
DOM定义了Node的接口以及许多种节点类型来表示xml及节点的多个方面

-------------------------------------------------------------------------------

HTML DOM Element对象

HTML DOM节点

在HTML DOM(文档对象模型)中，每个部分都是节点：

1.文档本身是文档节点
2.所有HTML元素是元素节点
3.所有HTML属性是属性节点
4.HTML元素内的文本是文本节点
5.注释是注释节点
Element对象:
在HTML DOM中，Element对象表示HTML元素
Element对象可以拥有类型为元素节点，文本节点，注释节点的子节点
NodeList对象表示节点列表，比如HTML元素子节点集合
元素也可以拥有属性，属性是属性节点

---------------------------------------------------------------------------------

节点及其类型：

元素节点：
属性节点：元素的内容，可以直接通过属性的方式来操作
文本节点：是元素节点的子节点，其内容为文本
<html>

<head>
<title>
helloworld
</title>
<script>
//1.当整个HTML文档加载成功后触发window.onload事件
//当事件触发是，执行后面function的函数体
//
window.οnlοad=function(){
//2.获取所有的button节点，并取得第一个元素

var btn=document.getElementByTagName("button")[0];
//为button的Onclick事件赋值，当点击button时，执行函数体
btn.οnclick=function(){

alert("helloworld!");
}

}
</script>
//不推荐的写法script的位置
//HTML代码和javascript代码耦合性大
//<button οnclick="alert("helloworld")">clickMe</button>
</head>
<body>
<button>
ClickMe!
</button>
</body>
</html>
------------------------------------------------------------------------------
//window.onclick事件在整个HTML文档被完全加载后触发事件
//所以在其中可以获取到HTML文档的任何元素
范例：
<head>
<script type="text/javasript">
window.οnclick= function()
{

}
</script>

</head>
<body>
...
</body>

//注意：
一般不能再body节点之前来直接获取
body内的节点，因为此时HTML文档还没有加载完成

//在整个HTML文档后面写js代码可以实现，但不推荐

--------------------
//获取指定的元素的节点

<html>
<head>
<script type="text/javasript">
window.οnclick=function(){
//1、获取id为为bj的那个节点

var bjNode=document.getElementById("bj");
alert(bjNode);
//获取所有的li节点
var liNodes=document.getElementByTagName("li");
alert(liNodes.length);
//使用标签名来获取指定节点的集合
//该方法为Node接口的方法，即任何一个节点都有这个方法

var cityNode=document.getElementById("city");
var cityLiNode=cityNode.getElementByTagName("li");
alert(cityLiNode.length);

//3.根据HTML文档元素的name属性获取指定节点的集合

var genderNodes=document.getElementByName("gender");
var bjNode2=document.getElementByName("beijing");
alert(genderNodes.length);
alert(bjNode2.length);

}
</script>
</head>
<body>
<p>你喜欢那个城市</p>
<ul id="city">
<li id="bj" name="北京">北京</li>
<li>上海</li>
<li>东京</li>
</ul>
<br>
<br>
gender:

<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female

</body>
</html>
//必须确保id属性值唯一
----------------------------------------------