DOM结构树

最新推荐文章于 2023-07-26 17:23:00 发布

weixin_34268753

最新推荐文章于 2023-07-26 17:23:00 发布

阅读量172

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/korabear/blog/1799210

本文详细介绍了DOM操作的基础知识，包括如何通过JavaScript操作DOM元素，如获取、插入、删除、替换节点等，并提供了多个实用示例，如封装函数实现特定DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

原型：每一个构造函数都可以构造一个对象出来，构造函数有一个属性prototype，prototype作为构造函数的原型，所有构造函数产生的对象都会继承自原型，原型上的方法和属性在构造函数，构造对象都可以使用。

Person.prototype

function Person{

}

Node

1. Document

HTMLDocument
XMLDocument

2. CharacterData

Text (文本节点的方法继承自Text的prototype)
Comment (注释节点的方法继承自Comemnt的prototype)

3. Element

HTMLElement （HTML元素）

1).HTMLHeadElement

2).HTMLBodyElement

3).HTMLTitleElement

4).HTMLParagraphElement

5).HTMLInputElement

6).HTMLTableElement

...etc.

XMLElement

4. Attr

DOM结构树代表的是继承关系。

上面的结构树中Document和document的关系

document代表整个文档，Document是构造函数（特殊，不能够手动new）

Document作为document的原型，Document.prototype.abc="123";---->那么，document.abc="123";

注意： Document不是document的直接构造函数，document的直接构造函数HTMLDocument.

HTMLDocument.prototype就是document的原型，原型等于一个对象。

HTMLDocument.prototype={

_proto_:Document.prototype;

}

总结：document(继承自)->HTMLDocument.prototype-（继承自）>Document.prototype (就近继承)

Node是个构造函数,DOM的终端继承自object

HTMLBodyElement.prototype="abc";

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

body.abc ---> 'demo'

DOM基本操作

1.getElementById方法定义在Document.prototype上，即Element节点上不能使用。（XML，Html都可以使用）

2.getElementsByName方法定义在HTMLDocument.prototype上，即非html中的document不能使用（xml document,Element）

3.getElementsByTagName方法定义在Document.prototype和ELement.prototype上

4.HTMLDocument.prototype定义了一些常用属性，body.head分别指代HTML文档中的的<body><head>标签。

5.Document.prototype上定义了documentElement属性，指代文档的根元素，在HTML文档中，他总是指代<html>元素

6.getElementByClassName,querySelectorAll,querySeletor在Document.prototype,Element.prototype类中均有定义

注意：

例：

var oDiv = document.getElementsByTagName('*')[0]; // *代表通配符选择器，所有的选择器。

小练习：

1.封装函数，返回元素e的第n层祖先元素节点

       function retParent(elem, n) {
           while(elem && n) {
               elem = elem.parentElement;
               n--;
           }
           return elem;
       }
       var i = document.getElementsByTagName("i")[0];

retParent(i,5);

// 返回的是HTML文档结构

2.编辑函数，封装myChildren功能，解决以前部分浏览器的兼容性问题

       Element.prototype.myChildren = function(){
           var child = this.childNodes;
           var len = child.length;
           var arr = [];
           for(var i = 0; i < len; i++) {
               if(child[i].nodeype == 1){
                   arr.push(child[i]);
               }
           }
           return arr;
       }

var oDiv = document.getElementsByTagName('div')[0];
oDiv.myChildren();

3.自己封装hasChildren()方法，不可用children属性

       Element.prototype.hasChildren = function(){
           var child = this.childNodes;
           var len = child.length;
           for(var i = 0; i < len; i++) {
               if(child[i].nodeype == 1){
                   return true;
               }
           }
           return false;
       }

var oDiv = document.getElementsByTagName('div')[0];
oDiv.hasChildren();

4.封装函数，返回元素e的第n个兄弟元素节点，n为正，返回后面的兄弟元素节点，n为负，返回前面的，n为0，返回自己。