javascript基础：DOM1简介

最新推荐文章于 2022-10-03 21:37:53 发布

江湖hi客

最新推荐文章于 2022-10-03 21:37:53 发布

阅读量1.1k

点赞数

分类专栏： JavaScript基础文章标签： javascript

本文链接：https://blog.csdn.net/gongwutianya/article/details/51811517

版权

JavaScript基础专栏收录该内容

25 篇文章 0 订阅

订阅专栏

一、DOM介绍

DOM(Document Object Model)即文档对象模型，主要是用来操作整个网页页面上的文档的。

DOM中的三个字母：

D(文档)可以理解为整个Web加载的网页文档;

O(对象)可以理解为类似window对象之类的东西,可以调用属性和方法,这里我们说的是document对象;

M(模型)可以理解为网页文档的树型结构。

DOM的标准化组织是W3C；

二、查找元素的方法

1、getElementById()

//onload 会等到html文件加载完后才执行方法里的代码
window.onload = function (){
    if(document.getElementById('box')){
        //通过id获取唯一的节点对象。因为id是唯一的 id="name"
        var box = document.getElementById('box');//存在返回节点对象，不存在返回null；
        //获取元素节点名
        alert(box.tagName);
        //获取文本节点的文本。
        alert(box.innerHTML);//div测试<em>倾斜</em>  将html标签一并输出
        //获取属性节点的不同属性的的方法。
        alert(box.id);//获取id属性的值
        alert(box.title);//获取标题属性的值
        alert(box.className);//获取class属性的值，class 是关键字或保留字  因此此处用className代替;
        alert(box.style);//box.style 获取到的style对象
        alert(box.style.color);//color是style对象下的一个属性
    }
};

除了取值，其实也可以给这些属性重新赋值

box.innerHTML ='改变了内容<strong>加粗的文本</strong>';//可以给文本节点重新赋值。从这里可以看出不是纯文本可以包含HTML
box.id ='change';//也可以给id进行赋值，但是没有什么意义

2、getElementByTagName()

window.onload = function(){
    //返回的是一个数组，数组内的对象都是节点为li节点对象
  var objs = document.getElementsByTagName('li');
  alert(objs.length);//包含的对象个数。
  for(var i = 0;i<objs.length;i++){
        var obj = objs[i];
        var tagName = obj.tagName;//元素节点名
        var innerHTML = obj.innerHTML;//文本节点内容
        alert(tagName + '\n' + innerHTML);
  }
};

//获取body标签
window.onload = function(){
    var objs = document.getElementsByTagName('body');
    alert(objs.length);//个数为1
    var obj = objs[0];//得到的是body节点对象
    var tagName = obj.tagName;
    var innerHTML = obj.innerHTML;
    alert(tagName + innerHTML);
};

//获取所有的标签节点
window.onload = function(){
    var objs = document.getElementsByTagName('*');
    alert(objs.length);
};

3、 getElementsByName()

//getElementsByName() 方法可以获取相同名称的元素,返回一个对象数组HTMLCollection(NodeList)。

document.getElementsByName('add') //获取 input 元素  name属性为 name="add"; 
document.getElementsByName('add')[0].value //获取 input 元素的 value 值 
document.getElementsByName('add')[0].checked //获取 input 元素的 checked 值

PS:对于并不是HTML合法的属性,那么在JS获取的兼容性上也会存在差异,IE浏览器支持本身合法的name属性,而不合法的就会出现不兼容的问题。

4、操作元素属性的方法

document.getElementById('box').getAttribute('id') ; //获取元素的 id 值 
document.getElementById('box').getAttribute('mydiv') ;//获取元素的自定义属性值 
document.getElementById('box').setAttribute('align','center'); //设置属性和值
document.getElementById('box').setAttribute('bbb','ccc'); //设置自定义的属性和值 
document.getElementById('box').removeAttribute('style') ;//移除属性

三、node类型

Node接口是DOM1级就定义了,Node接口定义了12个数值常量以表示每个节点的类型值。除了IE之外,所有浏览器都可以访问这个类型。

节点可以分为：包括元素节点、属性节点和文本节点常用的三种类型及其它等共12种类型。

每个节点又有三个属性分别为:nodeName(节点名)、nodeType和nodeValue。

(节点类型，1代表元素节点，2代表属性节点，3代表文本节点) 另外一种更方便直观的表示方法是使用Node常量来表示。

元素节点：Node.ELEMENT_NODE

属性节点：Node.ATTRIBUTE_NODE

文本节点：Node.TEXT_NODE

节点类型	nodeName	nodeType	nodeV alue
元素	元素名称	1	null
属性	属性名称	2	属性值
文本	#text	3	文本内容(不包含html)

1、节点属性

//节点有父子节点和兄弟节点
//每个节点都是一个对象
window.onload = function (){
    var box = document.getElementById('box');//元素节点
    //nodeType  nodeName  nodeValue  都是获得的当前节点的类型、名称、和值。不能获得节点内部的东西
    //alert(box.nodeType);//1
    //alert(box.nodeName);//div
    //alert(box.nodeValue);//null
    //chileNodes 获得当前节点的所有子节点。
    var nodes = box.childNodes;    //子节点数组
    alert(nodes.length);           //子节点的个数
    var obj   = nodes[1];          //节点对象
    var type  = nodes[1].nodeType; //节点对象的类型
    var name  = nodes[1].nodeName; //节点对象的名称
    var value = nodes[1].nodeValue;//节点对象的值
    
    alert('obj   = '+ obj  + '\n' +
      'type  = '+ type + '\n' +
      'name  = '+ name + '\n' +
      'value = '+ value
    )
};

window.onload = function(){
    var box = document.getElementById('box');
    //包含子节点对象的数组
    //子节点为文本节点或元素节点。属性节点是遍历不出来的。
    var nodes = box.childNodes;
    for(var i = 0;i<nodes.length;i++){
        var node = nodes[i];
        if(node.nodeType === 1){
            alert('元素节点：' + node.nodeName);
        }
        else if(node.nodeType === 3){
            alert('文本节点：' + node.nodeValue);
        }
    }
};

PS: nodeName 相当于 tagName；

PS: innerHTML和nodeValue的区别

取值的区别

innerHTML 这个属性输出文本内容的，这个非标准的属性必须在获取元素节点的时候,才能输出里面包含的文本。

nodeValue 这个属性也是输出文本内容的，输出的是文本节点的文本内容。

赋值的区别

赋值的时候,nodeValue会把包含在文本里的HTML转义成特殊字符,从而达到形成单纯文本的效果。

box.childNodes[0].nodeValue = 'abc';//结果为:abc

box.innerHTML = 'abc';//结果为:abc

2、获取节点的其它方法

alert(box.ownerDocument === document); //true,根节点 
alert(box.parentNode.nodeName); //获取父节点的标签名 
alert(box.firstChild.nodeV alue); //获取第一个子节点的文本内容
alert(box.lastChild.nodeV alue); //获取最后一个子节点的文本内容
alert(box.lastChild.previousSibling); //获取前一个同级节点 
alert(box.firstChild.nextSibling); //获取后一个同级节点

3、属性节点

attributes属性返回该节点的属性节点集合。

document.getElementById('box').attributes //NamedNodeMap
document.getElementById('box').attributes .length;//返回属性节点个数
document.getElementById('box').attributes [0]; //Attr,返回最后一个属性节点
document.getElementById('box').attributes [0].nodeType; //2,节点类型
document.getElementById('box').attributes[0].nodeValue; //属性值
document.getElementById('box').attributes['id']; //Attr,返回属性为id的节点
document.getElementById('box').attributes.getNamedItem('id'); //Attr

4、空白节点

//忽略空白节点
function ignorWhiteNode(obj){
    var nodes = obj.childNodes;
    var newNodes = [];
    for(var i = 0;i<nodes.length;i++){
        var node = nodes[i];
        if(node.nodeType === 3 && /^\s+$/.test(node.nodeValue)){
            continue;
        }
        else if(node.nodeType === 1 ){
            newNodes.push(node);
        }
    }
    return {
        childNodes : newNodes
    };
}

//移除空白节点
function removeWhiteNode (obj){
    var nodes = obj.childNodes;
    for(var i = 0;i<nodes.length;i++){
        var node = nodes[i];
        if(node.nodeType === 3 && /^\s+$/.test(node.nodeValue)){
            node.parentNode.removeChild(node);//父节点将空白的子节点移除
        }
    }
}

window.onload = function(){
    var box = document.getElementById('div');
    box = ignorWhiteNode(box);//忽略空白节点
    removeWhiteNode(box);//移除空白节点
    alert(box.childNodes.length);
};

5、操作节点（节点的增、删、改）

window.onload = function(){

    var div = document.getElementById('div');

    var p1 = document.createElement('p1');//创建一个元素节点
    var textP = document.createTextNode('添加节点p');//创建一个文本节点
    p1.appendChild(textP);//在p节点的最后添加一个子节点。这里添加的是文本节点
    div.appendChild(p1);//在div节点的最后添加一个子节点。这里添加的是元素节点

    var p2 = document.createElement('p1');
    var textPP = document.createTextNode('添加节点pp');
    p2.appendChild(textPP);
    div.insertBefore(p2,p1);//在p1节点前边插入p2节点

    var p3 = document.createElement('p1');
    var textPPP = document.createTextNode('添加节点ppp');
    p3.appendChild(textPPP);
    div.insertAfter(p3,p1);//本身是没有insertAfter方法的 可以自己实现。

    //替换节点
    div.replaceChild(p3,p2);//p3为新节点 p2为被替换的节点
    //克隆节点
    var p4 = p2.cloneNode(true);//克隆父节点和父节点包含的子节点
    var p5 = p2.cloneNode(false);//只克隆父节点
    div.appendChild(p4);
    div.appendChild(p5);
    //移除指定节点
    div.removeChild(p4);
//ps：在操作过程中有时需要考虑的空白节点的影响。可以先将空白节点过滤掉再执行操作
};

PS：操作节点的方法里并没有 insertAfter方法，可以自己实现。

//给Node类型的原型对象添加方法：insertAfer;
Node.prototype.insertAfter = function  (newNode,targetNode){
    var parentNode = targetNode.parentNode;//拿到父节点
    var nextNode = targetNode.nextSibling;//拿到下一个兄弟节点
    //要添加的位置是最后的话，直接用父节点添加到最后即可
    //不是最后的话，拿到目标节点的下一个兄弟节点，在下一个兄弟节点前边添加新节点
    if(targetNode === parentNode.lastChild){
        parentNode.appendChild(newNode);
    }
    else{
        parentNode.insertBefore(newNode,nextNode);
    }
};

四、document类型

Document类型表示文档,或文档的根节点,而这个节点是隐藏的,没有具体的元素标签。

document.doctype; //DocumentType 
document.documentElement ; //HTMLHtmlElement 
document.body ; //HTMLBodyElement

//属性

document.title;//获取和设置 <title>标签的值
document.URL;//获取 URL 路径
document.domain;//获取域名,服务器端
document.referrer;//获取上一个 URL,服务器端

//对象集合

document.anchors;//获取文档中带name属性的<a>元素集合
document.links;//获取文档中带 href 属性的<a>元素集合
document.applets;//获取文档中 <applet>元素集合,已不用
document.forms;//获取文档中 <form>元素集合
document.images;//获取文档中 <img>元素集合

五、element类型

Element类型用于表现HTML中的元素节点。我们已经可以对元素节点进行查找、创建等操作,元素节点的nodeType为1,nodeName为元素的标签名。元素节点对象在非IE浏览器可以返回它具体元素节点的对象类型。

六、Text类型

Text类型用于表现文本节点类型,文本不包含HTML,或包含转义后的HTML。文本节点的nodeType为3。

在同时创建两个同一级别的文本节点的时候,会产生分离的两个节点。

var box = document.createElement('div');
var text = document.createTextNode('Mr.');
var text2 = document.createTextNode(Lee!);
box.appendChild(text);
box.appendChild(text2);
document.body.appendChild(box);
alert(box.childNodes.length);//2,两个文本节点

PS :把两个同邻的文本节点合并在一起使用 normalize() 即可。

box.normalize(); //合并成一个节点PS:有合并就有分离,通过 splitText(num)即可实现节点分离。
box.firstChild.splitText(3); //分离一个节点 3代表3个字符

除了上面的两种方法外,Text还提供了一些别的DOM操作的方法如下:

var box = document.getElementById('box');
box.firstChild.deleteData(0,2);//删除从 0 位置的 2 个字符
box.firstChild.insertData(0,'Hello.');//从 0 位置添加指定字符
box.firstChild.replaceData(0,2,'Miss');//从 0 位置替换掉 2 个指定字符
box.firstChild.substringData(0,2);//从 0 位置获取 2 个字符,直接输出
alert(box.firstChild.nodeV alue);//输出结果

七、Attr类型

Attr类型表示文档元素中的属性。nodeType为2,nodeName为属性名,nodeValue为属性值。

江湖hi客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript基础：DOM1简介

一、DOM介绍DOM(Document Object Model)即文档对象模型，主要是用来操作整个网页页面上的文档的。DOM中的三个字母：D(文档)可以理解为整个Web加载的网页文档;O(对象)可以理解为类似window对象之类的东西,可以调用属性和方法,这里我们说的是document对象;M(模型)可以理解为
复制链接

扫一扫