JavaScript HTML DOM Node对象

最新推荐文章于 2021-12-09 14:26:18 发布

时小浅

最新推荐文章于 2021-12-09 14:26:18 发布

阅读量150

点赞数

分类专栏：重学前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_36194388/article/details/119169995

版权

重学前端专栏收录该内容

43 篇文章 1 订阅

订阅专栏

HTML文档中的每一个成员都是一个节点对象，节点对象具有自己的属性和方法。

找到HTML节点和Body节点

document.documentElement -> html标签

可返回存在于 XML 以及 HTML 文档中的文档根节点

document.body ->body标签

对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问。

如果我们要对页面上添加显示元素,一般来说会使用这种方式

我们要注意的区别:

document.documentElement.clientHeight:它拿到的是整个窗口高度

document.body.clientHeight:拿到内容的高度

Node对象的属性与方法总表

查询节点
方法	getElementById();	返回对拥有指定 id 的第一个对象的引用。
	getElementsByName()	返回带有指定名称的对象集合。
	getElementsByTagName()	返回带有指定标签名的对象集合。
	getElementsByClassName();	返回带有指定类名的对象集合
属性	parentNode	父节点
	firstChild	列表中的第一个节点
	lastChild	列表中的最后一个节点
	childNodes	所有子节点的列表
	previousSibling	上一个兄弟节点
	nextSibling	下一个兄弟节点
增加节点
	appendChild()	追加节点
	insertBefore()	插入节点
修改节点
	replaceChild()	替换节点
删除节点
	removeChild()	删除节点
创建节点
	createElement()	创建一个元素节点
	createTextNode()	创建一个文本节点
	setAttribute()	给某个节点添加一个属性
	getAttribute()	获取某个节点属性的值。
节点信息
	nodeName	节点名称
	nodeValue	节点值
	nodeType	节点类型

节点实例

查询节点：

<ul id="parent">
	<li>第一行</li><li id="two">第二行</li><li>第三行</li><li>第四行</li>
</ul>
			//查询two的父节点
                //>>1. 获取two节点
                    var two = document.getElementById("two");
                
                //>>2. 查询two的父节点
                    var parObj = two.parentNode;
                    log(parObj);
            
            
            //查询parent中第一个子节点
                
                //>>1. 找到parent
                    var parent = document.getElementById("parent");
                //>>2. 找第一个子节点
                    log(parent.firstChild);
            
            //查询parent中第最后一个子节点
                
                //>>1. 找到parent
                    var parent = document.getElementById("parent");
                //>>2. 找最后一个子节点
                    log(parent.lastChild);
            
            
            //查询所有子节点列表： 
            
                //>>1. 找到parent
                    var parent = document.getElementById("parent");
                
                //>>2. 所有子节点
                    log(parent.childNodes);
                    
            //查找two的上一个兄弟
            
                //>>1. 获取two节点
                    var two = document.getElementById("two");
                
                //>>2. 查找two的上一个兄弟
                    var preObj = two.previousSibling;
                    log(preObj);

增加节点

   <ul id="parent">
            <li>第一行</li>
            <li id="two">第二行</li>
            <li>第三行</li>
            <li>第四行</li>
        </ul>
            //需求： 在parent中添加一个新节点
                
                //>>1. 创建一个新节点；
                    
                    //>>1.1 创建元素节点
                        var liobj = document.createElement("li");
                                            
                    //>>1.2 创建属性节点
                        liobj.className = "xxx";
                        
                    //>>1.3 创建文本节点
                        liobj.innerHTML = "<p>我是新增的段落</p>";
                        
                //>>2. 把新节点添加到parent中
                    
                    //>>2. 1 获取parent节点
                        var parent = document.getElementById("parent");
                    //>>2. 2 在parent中追加新节点
                        parent.appendChild(liobj);
            
            //需求：在two节点之前插入新节点
            
                //>>1. 创建新节点
                    //>>1.1 创建元素节点
                        var liobj = document.createElement("li");
                                            
                    //>>1.2 创建属性节点
                        liobj.className = "yyy";
                        
                    //>>1.3 创建文本节点
                        liobj.innerHTML = "我是新节点";
                
                //>>2. 找到要在哪个节点之前添加
                    
                    var two = document.getElementById("two");
                
                //>>3. 具体添加
                    //>>3. 1 获取parent节点
                        var parent = document.getElementById("parent");
                    
                    //>>3. 2具体添加
                        parent.insertBefore(liobj,two);

修改节点

<ul id="parent">
            <li>第一行</li>
            <li id="two">第二行</li>
            <li>第三行</li>
            <li>第四行</li>
        </ul>
  
            //需求： 用新节点替换two节点
                
                //>>1. 创建新节点
                    //>>1.1 创建元素节点
                        var liobj = document.createElement("li");
                                            
                    //>>1.2 创建属性节点
                        liobj.className = "xxx";
                        
                    //>>1.3 创建文本节点
                        liobj.innerHTML = "<p>我是新增的段落</p>";
                
                //>>2. 获取要替换的节点
                    
                    var two = document.getElementById("two");
                
                //>>3. 替换
            
                    //>>3.1 获取父元素
                    var parent = document.getElementById("parent");
                    
                    //>>3.2 用新元素替换旧元素
                        parent.replaceChild(liobj,two);
                //>>4. 替换属性节点
                
                    liobj.className = "aaa";

删除节点

  <ul id="parent">
            <li>第一行</li>
            <li id="two">第二行</li>
            <li>第三行</li>
            <li>第四行</li>
        </ul>
    
  			//需求： 删除two节点
            
                //>>1. 获取父元素
                    var parent = document.getElementById("parent");
                //>>2. 删除指定节点
            
                    //>>2.1 获取要删除的节点
                        var two = document.getElementById("two");
                        
                    //>>2.2 删除
                        parent.removeChild(two);

			//需求： 删除parent中所有节点
            
                //>>1. 获取父元素
                    var parent = document.getElementById("parent");
                    
                //>>2. 获取父元素中所有的子元素
                    var child = parent.childNodes;
                    
                //>>3. 删除子元素
                    
                    //>>3.1 遍历子元素
                        for(var i=child.length-1; i>=0; i--){
                            
                            //>>3.2删除所有子元素
                                parent.removeChild(child[i]);
                        }

不同类型的元素节点信息

	nodeName	nodeValue	nodeType
Element(元素)	标签名称	null	1
Attribute(属性)	属性的名称	属性的值	2
Text(文本)	#text	文本的内容	3

innerHTML与innerText

innerHTML ：可以操作元素对象中的HTML代码（带有标签的文本）
获取文本	节点对象.innerHTML
设置文本	节点对象.innerHTML = 值
innerText ：可以操作元素对象中文本（不带标签的纯文本）
获取文本	节点对象.innerTexL
设置文本	节点对象.innerTex = 值

时小浅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript HTML DOM Node对象

HTML文档中的每一个成员都是一个节点对象，节点对象具有自己的属性和方法。找到HTML节点和Body节点document.documentElement -> html标签可返回存在于 XML 以及 HTML 文档中的文档根节点document.body ->body标签对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问。如果我们要对页面上添加显示元素,一般来说会使用这种方式我们要注意的区别:document.documentEl..
复制链接

扫一扫