DOM文档对象模型

    xiaoxiao2021-03-25  230

    DOM 文档对象模型

    DOM (document object model) 文档对象模型,它定义了操作文档对象的接口。

    DOM 把一份html文档表示为一棵家谱树,使用parent(父), child(子), sibling(兄弟)等记号 来表明家庭成员之间的关系。

    一、节点

    节点(node) 一词来自于网络理论,这代表着网络中一个个的连接点,网络是由节点构成的。

    对于html文档也是一样,文档是由节点构成的集合。

    1.元素节点

    元素节点如

    之类的元素,这些元素在文档中的布局形成了文档的结构。

    2.文本节点

    文本节点指的是元素节点中的内容,但并非所有的元素节点都包含有文本节点。

    3.属性节点

    元素都或多或少有一些属性,属性的作用是对元素作出更具体的描述。属性节点总是被包含在 元素节点当中。

    节点例子:

    这是一个段落

    二、获取文档对象

    querySelector()

    HTML5新加入的方法,通过传入合法的CSS选择器,即可获取符合条件的第一个元素

    document.querySelector("#test"); //返回id为test的首个div querySelectorAll()

    HTML5新加入的方法,通过传入合法的CSS选择器,即可获取所有符合条件的元素,返回对象数组

    document.querySelectorAll('div.foo');//返回所有带foo类样式的div元素对象

    注意:

    使用这上面两个方法无法查找带伪类状态的元素,比如querySelector(‘:hover’)不会得到 期结果。

    3.getElementById()

    这个方法返回一个与给定id属性值的元素节点相对应的对象。

    document.getElementById('box');

    4.getElementsByTagName()

    这个方法返回一个对象数组。每个对象分别对应着文档里给定标签的一个元素。

    document.getElementsByTagName('li');

    5.getElementsByName()

    通过 name 获取一个对象数组

    document.getElementsByName('name');

    三、获取节点信息(扩展)

    在获得一个节点的引用后,有一些方法可以获得该节点的信息。

    1.nodeName 获取节点名称

    语法:

    Node.nodeName;

    不同的类型的节点,nodeName的返回值有所差异:

    元素节点:返回标记名称;

    属性节点:返回属性名称;

    文本节点:返回文本 #text

    2.nodeType 获取节点类型

    语法:

    Node.nodeType; 

    元素节点:返回 1

    属性节点:返回 2

    文本节点:返回 3

    3.nodeValue 获取节点的值

    语法:

    Node.nodeValue;

    元素节点:返回null

    属性节点:返回节点值

    文本节点:返回文本内容

    四、处理属性节点

    getAttribute 获取节点属性值 object.getAttribute(attribute) var a = document.getElementsByTagName("a"); for(var i=0; i<a.length; i++){ alert(a[i].getAttribute("title")); }

    2.setAttribute() 设置节点属性值

    object.setAttribute(attribute, value) var link = document.getElementById(‘link’); link.setAttribute(‘title’, ‘链接提示信息’);

    五、处理文本节点

    node.innerHTML

    获取该节点下的包含HTML标签的文本内容

    var body = document.querySelector('body'); alert(html.innerHTML); node.textContent

    获取该节点下的纯文本内容

    var body = document.querySelector('body'); alert(html.textContent);

    DOM 总结:

    一份文档就是一棵树;

    节点分为不同的类型,分别是:元素节点,属性节点,文本节点;

    每个节点都是一个对象;

    getElementById()方法将返回一个对象,该对象对应着文档里的一个元素节点;

    getElementsByTagName()方法返回一个对象数组,它们分别对应着文档里的元素节点;

    转载请注明原文地址: https://ju.6miu.com/read-38954.html

    最新回复(0)