DOM操作-大结局

最新推荐文章于 2023-06-29 20:22:56 发布

(^_^ )

最新推荐文章于 2023-06-29 20:22:56 发布

阅读量160

点赞数

分类专栏： javaScript 文章标签： DOM 求评论

本文链接：https://blog.csdn.net/qq_38263696/article/details/82986294

版权

javaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

DOM : 是表示和操作HTML文档内容的API
DOM树:
根节点-Document节点-9 Element节点-1 Text节点-3 Comment节点-8 Attr节点-2
注意: document的爸爸是HTMLDocument , div,p,…等元素节点的爷爷是HTMLElement, 文本节点的爸爸是Text, …

狠人话不多,直接上代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DOM大结局</title>
</head>

<body>
  <div >
  	<p>我是博主派来测试的小网页</p>
  </div>
</body>
</html>
<script>
	console.log(document.__proto__ ===HTMLDocument.prototype);   //true
	var div=document.getElementsByTagName("div")[0];              //拿到div元素节点
	console.log(div.__proto__.__proto__ ===HTMLElement.prototype)  //true
	var text=document.getElementsByTagName("p")[0].firstChild;   //拿到文本节点
	console.log(text.__proto__ ===Text.prototype)               //true
</script>

选取文档元素

document.getElementsByTagName() // 元素节点也有getElementsByTagName()方法
document.getElementsByClassName()
document.getElementById()
document.querySelector() //不具有实时性
document.querySelectorAll() //不具有实时性
document.body document.head document.documentElement(元素) document.forms … // document的快捷属性
一般的, 找到一大坨的方法返回的是NodeList对象(只读类数组) , 在控制台查看即可
1.作为结点树的文档
```
parentNode  childNodes    firstChild   lastChild        nextSibling         previoursSibling 
```
nodeType nodeValue(针对Text节点或Comment节点) nodeName
2 作为元素树文档 (只对文档的元素节点感兴趣)
parentElement children firstElementChild lastElementChild
nextElementSibling previousElementSibling childElementCount(等于children.length)

获取和设置属性

     **HTML元素由标签(tag)和一组属性(attribute)**
   获取或设置HTML行间属性(不管你是标准的还是非标准的属性！牛逼):     getAttribute(),setAttribute()  ,hasAttribute(),removeAttribute();
   标准的属性:     HTMLElement.Arrtibute ;  
   如果属性名与js保留字撞衫了,属性名前加html(属性名小驼峰写法) 
    例如  lable.htmlFor="pwd"; lable.className="lables";(class是例外,不尊守撞衫了规则)

HTML5 , 可以为元素定义属性名data-xxx的属性,通过dataset获取和设置

<p  data-log="尼玛">test</p>
<script>
var  p  = document.getElementsByTagName('p')[0];
alert(p.dataset.log);
p.dataset.good="veryGood";
alert(p.getAttribute("data-good"));
</script>

innerHTML , outerHTML ,innerText , textContent 不逼逼了;

创建节点插入节点删除和替换节点

1 document.createElement() ; document.createText();
2 Node.appendChild() , Node.insertBefore()
3 Node.parentNode.removeChild(Node); Node.remove(); Node.replaceChild(新节点,Node);
注意: 将文档中已存在的节点插入到这个文档中，系统会自动删除该节点(类似剪切操作）