DOM的简介

DOM简介

什么是DOM

DOM ,全称Document Object Model文档对象模型。
JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。
文档
文档表示的就是整个的HTML网页文档
对象
对象表示将网页中的每一个部分都转换为了一个对象。
模型
使用模型来表示对象之间的关系,这样方便我们获取对象。

模型

节点

节点Node ,是构成我们网页的最基本的组成部分,网页中的每一个部分都可以称为是一个节点。
比如: html 标签、属性、文本、注释、整个文档等都是一个节点。
虽然都是节点,但是实际上他们的具体类型是不同的。
比如:标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。
节点的类型不同,属性和方法也都不尽相同。

节点: Node——构成HTML文档最基本的单元。
常用节点分为四类

文档节点:整个HTML文档
元素节点:HTML文档中的HTML标签
属性节点:元素的属性
文本节点: HTML标签中的文本内容

	nodeName	nodeType	nodeValue
文档节点	#document	9	null
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	★文本內容

文档节点(document)

文档节点document ,代表的是整个HTML文档,网页中的所有节点都是它的子节点。
document对象作为window对象的属性存在的,我们不用获取可以直接使用。
通过该对象我们可以在整个文档访问内查找节点对象,并可以通过该对象创建各种节点对象。

元素节点(Element)

HTML中的各种标签都是元素节点,这也是我们最常用的一个节点。
浏览器会将页面中所有的标签都转换为一个元素节点,我们可以通过document的方法来获取元素节点。
比如:

document.getElementById()
根据id属性值获取一个元素节点对象。

文本节点（Text）

文本节点表示的是HTML标签以外的文本内容,任意非HTML的文本都是文本节点。
它包括可以字面解释的纯文本内容。
文本节点一般是作为元素节点的子节点存在的。
获取文本节点时, 一般先要获取元素节点。在通过元素节点获取文本节点。
例如:
元素节点.firstChild;
获取元素节点的第一个子节点，一般为文本节点

属性节点(Attr)

属性节点表示的是标签中的一个一个的属性,这里要注意的是属性节点并非是元素节点的子节点,而是元素节点的一部分。
可以通过元素节点来获取指定的属性节点。
例如:
元素节点.getAttributeNode("属性名");
注意:我们一般不使用属性节点。

在文档中获取对象

<body>
    <button id="btn">我是一个按钮</button>
<script type="text/javascript">
    /*
    浏览器已经为我们提供文档节点对象这个对象是window属性
可以在页面中直接使用，文档节点代表的是整个网页
    */
    //获取到button对象
    var btn = document.getElementById("btn");
    //console.1og(btn);
    
    //修改按钮文字
    btn.innerHTML = "I'm Button";
    </script>
</body>
<!--[object HTMLButtonElement]>

事件的简介

事件，就是用户和浏览器之间的交互行为，
比如: 点击按钮，鼠标移动、关闭窗口······

我们可以在事件对于的属性中设置一些js代码，
这样当事件被触发时，这些代码将会执行

<butotn id="bth" onclick="alert('点击按钮事件触发');">按钮</butotn>

这种写法我们称为结构和行为耦合，不方便维护，不推荐使用

可以为按钮的对，应事件绑定处理函数的形式来响应事件

//获取按钮对象
var btn = document.getElementById( "btn");
//可以为按钮的对应事件绑定处理函数的形式来响应事件
//这样当事件被触发时，其对应的函数将会被调用

//绑定一个单击事件
//像这种为单击事件绑定的函数，我们称为单击响应函数
btn.onclick = function(){
   alert ("单机事件");
}；

文档的加载

浏览器在加载一个页面时，是按照自上向下的顺序加载的，
读取到一行就运行一行，如果将script标签写到页面的上边，
在代码执行时，页面还没有加载，页面没有加载DOM，对象也没有加载会导致无法获取

<script>
    //获取id为btn的按钮
    var btn = document.getElementById("btn");
    //为按钮绑定一个单击响应函数
    btn.onclick = function(){
       alert("he11o");
};
</script>
<button id="btn">点我</button>
<!--这样无法正常运行事件-->

也就是说，为了使页面完整的运行，需要先加载完毕页面所有內容，再进行加载事件

onload事件会在整个页面加载完成之后才触发
为window绑定一个onload事件
该事件对应的响应函数将会在页面加载完成之后执行，
这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了

window.onload = function(){
//获取id为btn的按钮
var btn = document.getElementById("btn");
//为按钮绑定一个单击响应函数
btn.onclick = function(){
alert("he11o");
};

DOM查询

获取元素节点

通过documen对象调用

getElementById()
通过id属性获取一个元素节点对象
getElementsBy TagName()
通过标签名获取一组元素节点对象
getElementsByName()
通过name属性获取一组元素节点对象

<script>
    //为id为btn01的按钮绑定一个 单击响应函数
var btn01 = document. getElementById("btn01");
btn01.onclick = function(){
//查找#bj节点
var bj = document.getElementById("bj");
//打印bj
//innerHTML  通过这个属性可以获取到元素内部的html代码
alert(bj.innerHTML);
};
</script>
<body>
    <button>
        <ul>
            <li id = "bj">北京</li>         
        </ul>    
    </button>
</body>

//为id为btn03的按钮绑定一个单击响应函数
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
//查找name=gender的所有节点
var inputs = document.getElementsByName("gender");
//alert( inputs. length); 
for(var i=0; i<inputs.length ; i++){
alert(inputs[i]. innerHTML) ;
}
};

innerHTML用于获取元素内部的HTML代码的
对于自结束标签，这个属性没有意义

如果需要读取元素节点属性，

直接使用元素.属性名
例子: 元素.id 元素.name 元素. value
注意: class属性不能采用这种方式，
读取class属性时需要使用元素 .clas sName

获取元素节点的子节点

通过具体的元素节点调用

getElementsByTagName()
方法,返回当前节点的指定标签名后代节点
childNodes
属性,表示当前节点的所有子节点
firstChild
属性,表示当前节点的第一个子节点
lastChild
属性,表示当前节点的最后一个子节点

childNodes属性会获取包括文本节点在呢的所有节点
根据DOM标签标签间空白也会当成文本节点
注意:在IE8及以下的浏览器中，不会将空白文本当成子节点，

children属性可以获取当前元素的所有子元素

获取父节点和兄弟节点

通过具体的节点调用

parentNode
属性,表示当前节点的父节点
previousSibling
属性,表示当前节点的前一个兄弟节点
nextSibling
属性,表示当前节点的后一个兄弟节点

其它方法

获取body标签

var body = document.getElementsByTagName("body")[0];

在document中有一个属性body,它保存的是 body的引用

var body = docunent.body;

document . documentElement保存的是html根标签

var html = document.documentElement;

document.all代表页面中所有的元素

var all = document.all;

根据元素的class属性值查询一组元素节点对象
getElementsByClassName( )可以根据class属性值获取一组元素节点对象，
但是该方法不支持IE8及以下的浏览器

var box1 = document.getElementsByClassName( "box1");

获取页面中的所有的div

var divs = document.getElementsByTagName("div");

获取class为box1中的所有的div
.box1 div
document.querySelector( )

需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
虽然IE8中没有getElementsByClassName( )但是可以使用querySelector( )代替
使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个

var div = document.querySelector(".box1 div");
var box1 = document.querySelector(".box1")

document .querySelectorAll()
该方法和querySelector( )用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
即使符合条件的元素只有一个，它也会返回数组

box1 = document.querySelectorAll(".box1");
box1 = document.querySelectorA11("#box2");

DOM增删改

把新的子节点添加到指定节点

window.onload = function(){

//创建一 个"广州"节点,添加到#city下
myClick("btn01" , function(){
/*创建广 州节点<li>广州</li>
创建1i元素节点
*/
//document.createElement( )
//可以用于创建一个元素节点对象，
//它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
//并将创建好的对象作为返回值返回
var 1i = document.createElement("li");
//创建广州文本节点

//document.createTextNode( )
//可以用来创建一个文本节点对象
//需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
var text = document.createTextNode("广州");
//将gzText设置li的子节点
/*
appendChild()
向一个父节点中添加一个新的子节点
用法:父节点.appendChild(子节点);
*/
li.appendChild(gzText);
//获取id为bj的节点
var bj = document.getElementById("bj");

//获取id为city的节点
var city = document.getElementById("city");
//将广州添加到city下
city.appendChild(li);
}

总结：先给按钮绑定单击函数，找到父节点，在下面创建元素节点，再在里面创建文本节点，然后通过appendChild向父节点中添加子节点。

在指定节点前添加新节点

window.onload = function(){
myClick("btn01" , function(){
var 1i = document.createElement("li");
var text = document.createTextNode("广州");
li.appendChild(gzText);
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取id为city的节点
var city = document.getElementById("city");
//将广州添加到city下
city.insertBefore(li,bj);
}

insertBefore()

可以在指定的子节点前插入新的子节点
语法：父节点 .insertBefore(新节点,旧节点);

替换子节点

window.onload = function(){
myClick("btn01" , function(){
var 1i = document.createElement("li");
var text = document.createTextNode("广州");
li.appendChild(gzText);
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取id为city的节点
var city = document.getElementById("city");
//将广州添加到city下
city.replaceChild(li,bj);
}

replaceChild()

可以使用指定的子节点替换已有的子节点
语法: 父节点 .replaceChild (新节点,旧节点) ;

删除节点

myClick( "btn04" , function(){
//获取id为bj的节点
var bj = document. getElementById("bj");
//获取city
var city = document. getElementById("city");
city.removeChild(bj);
    //bj.parentNode. removeChild(bj);
});

removeChild( )

可以删除一个子节点
语法: 父节点 .removeChild(子节点) ;

通过innerHTML完成增删改的相关操作

myClick("btn07" , function( ){
//向city中添加广州
var city = document. getElementById("city");
//city.innerHTML += "<li>广州</li>";

    //创建一个li
var li = document . createElement("li" );
//向1i中设置文本
li.innerHTML =“广州";
//将1i添加到city中
city.appendChild(li);
});

posted @ 2022-01-27 19:08 苏槿年阅读(308) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

苏槿年