DOM基础知识(Node对象、Element对象)

5、Node对象

u  遍历节点

u 父节点

.parentNode - 获取父节点—> 元素节点或文档节点

.parentElement - 获取父元素节点—> 元素节点

u    子节点

.childNodes – 获取所有子节点;

.firstChild – 获取第一个子节点;     .lastChild – 获取最后一个子节点

u    兄弟节点

.previousSibling - 上一个兄弟节点;    .nextSibling - 下一个兄弟节点

L 空白节点问题:

                                                                                                                       

概念:空白节点,实际上就是一个空的文本节点

原因: 编写HTML代码时,输入换行符,浏览器解析HTML页面为DOM结构时,自动添加空白节点    ---获取子节点及兄弟节点的属性不能正常使用

注:IE8及以下版本的浏览器不存在空白节点问题

  • 解决方案

1. 弃用获取子节点和兄弟节点的属性;改用getElementsByTagName( ) 方法

  从父级根据标签名得到所有子级,选[0];   自动把空白节点去掉

  1. 使用原本的子节点属性,人为进行判断,进行重构
  • 封装方法:

 

l 插入节点

.appendChild()

作用:将child节点插入到parent父节点的子节点列表的最后面

.insertBefore(new,current)

作用:将newChild插入到parent父节点下currentChild子节点的前面

注意 - 没有insertAfter( )方法

  • 自定义---- insertAfter(newChild, currentChild) 方法

 

                         function insertAfter(parent, newChild, currentChild){

                                  var next = currentChild.nextSibling;

                                  if(next.nodeType == 3){

                                      next = next.nextSibling;

                                  }

                         Parent.insertBefore(newChild,next);}

如果调用该方法时,目标节点为 null 值或不存在的话;等价于调用 appendChild( ) 方法

                                  }

l 删除节点 – .removeChild()

l 替换节点 –.replaceChild(newChild,oldChild)

newChild - 创建新的,从页面获取;           parent和oldChild之间必须是父子关系

u   复制节点 - .cloneNode(boolean)

boolean类型的参数:是否复制后代节点     true:表示赋值; false:(默认值)表示不复制

* 返回值 - 表示被复制新的节点

注:如果复制的节点具有id属性的话,在复制完成之后,修改id属性值

6、Element对象

u  概念:

 

* 使用<节点>概念解析HTML

被解析为元素节点、属性节点和文本节点;三者相互独立(文本、元素节点是父子关系)

* 使用<元素>概念解析HTML

被解析为元素,属性和文本是元素的一部分

注:元素节点和元素都代表HTML页面中的标签

DOM查询的六个方法返回的既是元素节点(Node对象),又是元素(Element对象)

u 遍历元素

² 获取父元素

 .parentElement

² 获取子元素  

.children 获取所有子元素的集合

.firstElementChild获取第一个子元素        .lastElementChild获取最后一个子元素

² 获取兄弟元素

 .previousElementSibling  获取指定节点的前一个兄弟节点。

 .nextElementSibling  获取指定节点的后一个兄弟节点。

注:所有获取子元素和兄弟元素的属性,在 IE8及以下版本的浏览器不支持

 * 人为提供浏览器的兼容解决方案

u  操作属性

² 获取属性   .getAttribute(属性名)

如果获取的属性名根本不存在,结果为null

如果属性名存在,返回属性的值,转换为boolean值 true

如果属性名不存在,返回null,转换为boolean值 false

² 设置属性   .setAttribute(属性名, 属性值)

如果属性名已存在的话 - 修改指定属性名的值

如果属性名不存在的话 - 新增属性(同时设置属性名和属性值)                      */

² 删除属性   .removeAttribute(属性名)

效果: 将属性名和属性值一并删除

² 判断是否含有属性   .hasAttribute(属性名)   有----true;  没有----false

* hasAttribute( )方法:

属于Element对象; 作用:判断指定标签是否含有【指定属性】

* hasAttributes( )方法:

属于Node对象;作用:判断指定标签是否包含属性

l  文本操作

  • Ø 通过Node 对象的节点方式进行操作

* 文本节点一定是元素节点的子节点 - 获取指定的文本节点

* 通过 nodeValue 属性可以获取或设置文本节点的文本内容

利用 Node 方式操作文本(文本节点)

        * 通过获取子节点的方式得到文本节点

        * 通过 appendChild() 方法添加文本节点

        * 通过 removeChild() 方法删除文本节点

                       文本节点的节点图

 

文本节点具有 nodeName、nodeType和nodeValue

nodeType - 用于判断当前是否是文本节点(3)

nodeValue - 用于获取或设置文本节点的文本内

【当元素节点的子节点为文本节点时; 不存在空白节点的问题】

  • Ø textContent 属性

作用:获取指定元素中所有的文本内容(包含所有后代节点的文本内容);

【注:不支持IE8及以下版本;结果不报错,为 undefined 转换为boolean类型 false】

  • innerText属性

【支持IE8及以下版本浏览器[专有]属性; IE9以上及其他(Chrome和火狐)新版本都兼容

  获取文本的兼容问题

        function getText(elem){

         var text;

         if(elem.textContent){ 

         text = elem.textContent; 

         }else{

         text = elem.innerText;

         }

             return text;

         }

  • innerHTML属性

作用:获取或设置指定标签的所有HTML代码[有什么输出什么]

注意:使用innerHTML属性的安全性很低(可能接收一些恶意代码)

解决:使用innerHTML属性时,对应的值不能是用户输入内容

 

转载于:https://www.cnblogs.com/renzm0318/p/8279268.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值