学习DOM第一节

最新推荐文章于 2024-06-26 19:47:51 发布

是会飞的猪

最新推荐文章于 2024-06-26 19:47:51 发布

阅读量122

点赞数

分类专栏： DOM

本文链接：https://blog.csdn.net/weixin_42597880/article/details/102885001

版权

DOM 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.获取节点元素

document代表整个文档节点
document.getElementById(‘ID’);
只能获取到一个元素。IE8以下的浏览器中，ID不区分大小写，且在没有ID时可以匹配name属性的元素，但是ID一个页面只能出现几次，标识片段名，因此少用
document.getElementsByTagName(‘tag’);
以类数组的形式存储，即使只有一个，但是没有push方法
document.getElementsByClassName(‘tag’);
ie8以下的版本中没有
document.getElementsByName(‘tag’);
但是有些选不到，可以生效的标签有表单、表单元素、img、iframe，开发时很少用
document.querySelector(‘css选择器’)
一个，IE7以下版本不使用，但是这个选择器不是实时的，在用法上受局限
document.querySelectorAll(‘css选择器’)
多个，IE7以下版本不使用，但是这个选择器不是实时的。

2.遍历节点树

parentNode：父节点，最顶端节点的父节点是document（document不是元素节点）
childnode：子节点
firstChild
lastChild
nestSibling

3.遍历元素节点

与2中的节点数不同，2中是遍历所有节点，而3是只遍历元素节点

parentElement：当前元素的父元素节点（IE9以下不兼容）
children：只返回当前元素的元素子节点
node.childElementCount === node.child.length （IE9以下不兼容）
filstElementChild：返回的是第一个元素节点（IE9以下不兼容）
lastElementChild：返回的是最后一个元素节点（IE9以下不兼容）
nestElementSibling/previousElementSibling：返回后一个/前一个兄弟元素（IE9以下不兼容）

4.节点的四个属性

nodename：元素的标签名，以大写形式表示，只读
nodeValue：Text节点或comment节点的文本内容，可读写
nodeType（最重要的属性）：节点的类型，只读
attributes：element节点的属性集合

5.节点的方法

hasChildNodes()判断该节点上是否有子节点，包括节点树上的所有子节点

//只有一种情况会返回false
<div></div>

//输入 div.hasChildNodes()
//返回 false

6.节点类型

元素节点 ——1
属性节点 ——2
文本节点 ——3
注释节点 ——8

<!-- 这是注释节点--!>

用nodename返回注释节点的标签名，输出 #comment
用ndoeValue返回注释节点的文本内容，输出 <!-- 这是注释节点--!>

document ——9
DocumentFragment ——11

7.DOM继承结构树

在这里插入图片描述
这个树代表了DOM中的继承关系，Document下其实有两个分支，另一个分支是XML
Document构造函数不能new

//继承关系
document  -->  HTMLDocument.prototype  -->  Document.prototype

8.DOM基本操作

getElementById方法定义在Document.prototype上，即Element节点上不能使用
getElementsByName方法定义在HTMLDocument.prototype上，即非html中的不能使用（xml、document、Element）
getElementsByTagName方法定义在Document.prototype和Element.prototype上

<div>
	<span></span>
</div>

//可以使用这样的方法取得span标签
var div = document.getElementsByTagName('div')[0];
var span = div.getElementByTagName('span')[0];
在开发中经常使用先获取父级元素，再在父级元素上选择子元素

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

document.body  ----->  直接代表了<body>标签
document.head ------>  直接代表了<head>标签

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

document.documentElement      -------->   指代了<html>元素

getElementByClassName、querySelectorAll、querySelector在Document.prototype、Element.prototype类中均有定义

9.节点的增删改查

（1）增

document.createElement(’’)：创建元素节点
document.craeteTextNode：创建文本节点
documentComment(‘注释内容’)：创建注释节点
document.createDocumentFragment();

（2）插

ParentNode.appendChild(‘要插入的元素’)：剪切操作，即两次对同一个节点使用这个操作后，只保留最后一个操作结果
ParentNode.insertBefore(A,B)：插入操作，insert A before B，在B的前面插入A

（3）删

parent.removeChild(‘子节点’)：剪切parent元素的子节点，会返回子节点的内容
chiild.remove()：删除child元素，彻底删除

（4）替换

parent.replaceChild(new,origin)：拿新的元素替换老元素，剪切老元素，返回老元素

10.节点属性和方法

innerHTML：取写节点内容

div.innerHTML
//输出 div节点的内容

div.innerHTML = 'kathy'
// 将div节点的内容替换为kathy

innerText：取写文本内容，火狐不兼容（有textContent，但老版本IE不好使）
ele.setAttribute(‘属性名’,‘属性值’)：设置属性
ele.getAttribute(‘属性名’,‘属性值’)：获取属性

是会飞的猪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习DOM第一节

1.查看document代表整个文档节点document.getElementById(‘ID’);只能获取到一个元素。IE8以下的浏览器中，ID不区分大小写，且在没有ID时可以匹配name属性的元素，但是ID一个页面只能出现几次，标识片段名，因此少用document.getElementsByTagName(‘tag’);以类数组的形式存储，即使只有一个，但是没有push方法doc...
复制链接

扫一扫