DOM

一、JavaScript的组成
ECMAScript:核心基础,语法规则(提供一些方法)
DOM:document object model:文档对象类型,定义各种操作页面元素的属性的方法
BOM: borwser object model:浏览器对象类型,定义各种操作浏览器的属性的方法

二、Dom文档对象模型(提供api操作一些节点)
1.所有和HTML页面相关的操作都是DOM提供的(记住)
2.修改文字:一个元素的子节点(在dom中不仅仅标签是节点。还包括:文本,注释,元素节点。掌握:元素节点,文本节点(例如:回车,缩进),注释节点)。节点包括12种
1)使用childNodes操作子节点,注意:每个节点都是一个对象,使用点操作对象
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
修改节点的内容
在这里插入图片描述
2).注释/文本节点:修改nodeValue
在这里插入图片描述
修改文本节点
在这里插入图片描述
在这里插入图片描述
3)了解:nodeType:看出当前的节点的nodeType的值是多少?
注释8,元素节点:1,属性节点:2,文本节点:3
nodeName,所有文本的节点nodeName如下
在这里插入图片描述
所有注释节点的nodeName如下
在这里插入图片描述
nodeValue针对元素来说无意义的

3.平常操作最多的就是元素节点(掌握)
(1)如何只获取元素子节点?
使用children,但是不可以使用forEach,如果要使用,需要先拆分(使用点点点拆)为纯数组,再加上forEach需要使用箭头函数传参
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
forEach
在这里插入图片描述
(2)获取父元素的节点:
parentNode(是指结构上的父级)相当于html结构上的父级
offsetParent定位父级(元素自身没有加定位属性的话,也是有定位父级的)
爷爷:parentNode.parentNode

获取父节点
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
定位父级
在这里插入图片描述
在这里插入图片描述
爷爷节点
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
(3)了解:获取所有的子元素
getElementsByTagName("")通配符:
(4)了解:其他获取元素子节点方法(需要考虑兼容问题)
firstChild
firstElementChild(ie8中没有)
下一个兄弟元素:nextElementSibling

三、总结:关于节点的概念
nodeName nodeValue nodeType

children
parentNode
offsetParent

createElement()
appendChild()

insertBefore()
removeChild()

四、以后尽量不使用那个innerHTML+=,因为会覆盖之前的节点,在点击操作中,会使得点击操作失效;但是只要元素不适用事件也可使用innerHTML
在这里插入图片描述
以下属于一个表达式得到一个字符串,并且赋值给了innerHTML,会覆盖oWrap的innerHTML
在这里插入图片描述
在这里插入图片描述
1.创建新节点(对子节点新增的操作)
document.createElement(“标签”)
放入owrap,表示在节点之后放入一个标签
owrap.appendChild(“变量名”)
在这里插入图片描述

let oA = document. createElement("a") ;
oA=innerText="我是一个a标签";
oA.href = "https://www.xxx.com/";
//放入owrap
oWrap. appendChild( oA ) ;

在这里插入图片描述
2.把标签放在其他标签的前面或后面insertBefore(newChild,refChild) 在refChild子节点之前,插入新子节点newChild
ele.appendChild()(ele元素节点)
给ele添加一个子节点
在这里插入图片描述

在这里插入图片描述
把一个元素插入到另一个元素之前
在这里插入图片描述
在这里插入图片描述
3.删除removeChild(节点是不能自杀的,必须通过父级移除)
删除某个节点
方法一
在这里插入图片描述
方法二、常用,直接获取父节点
在这里插入图片描述
无论删除还是其他的操作,只要变量被存储了,就一定存在,只不过不在页面显示相应的样式了而已
例一:
在这里插入图片描述
在这里插入图片描述
例二.
在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 护眼 设计师: 闪电赇
应支付0元
点击重新获取
扫码支付

支付成功即可阅读