dom、元素节点笔记

最新推荐文章于 2022-07-21 20:45:36 发布

湳橙

最新推荐文章于 2022-07-21 20:45:36 发布

阅读量131

点赞数

分类专栏：学习笔记文章标签： javascript html css

本文链接：https://blog.csdn.net/chenlaodacsdn/article/details/107426434

版权

学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.dom

dom就是HTML里面一个一个节点构成的.
- ECMAScript规定，如何在BOM中操作DOM（文档对象模型）.
DOM文档对象模型，对象：document.
- DOM（W3C机构）不属于BOM（浏览器厂商）
- window对象身上有提供document对. DOM的结构：html的结构：树形结构，包含结构，家族结构（父子级，兄弟级）
- DOM，主要控制页面（html文件），所有的页面操作都需要通过DOM
- html根元素：head，body
- DOM树形结构，的每个组成部分，都叫节点（元素，属性，注释，文本）
- 所有节点，都是对象
- js做交互，行为，页面（DOM），哪个元素，选择器，属性，内容，样式，元素等等

2.选择器

元素节点选择器
- 直接选择器
  - id选择器：document.getElementById(“id名”)
  - class选择器：document.getElemetsByClassName(“class名”)
  - tag选择器：document.getElementByTagName(“tag名”)
  - name选择器：document.getElementByName(“name名”)
  - es5新增选择器：querySelector选择器：document.querySelector(“css选择器”) 、querySelectorAll选择器：document.querySelectorAll(“css选择器”)
总结.
- 返回单个元素（id、querySelector）
- 返回数组（class、tag、name、querySelectoeAll）
关系选择器：要先有基准元素·
- 父子关系(母女关系)
  - 父选子：先拿到父

//父选子：先拿到父
var olist =document.querySelector(".list");
//var olist=document.getElementsByClassName("list")[0];
console.log(olist)

//获取第0个子节点：
console.log(olist.childNodes[0]);
//第一个子元素节点：
console.log(olist.firstElementChild);

 //lastChild:获取某一个节点的最后一个子节点,结果是一个节点,可以是任意节点类型
console.log(div.lastChild);
//最后一个子元素节点：:获取某一个节点的最后一个子元素节点,结果是一个元素节点
console.log(olist.lastElementChild);

//所有子元素：
console.log(olist.children);

//其他的子元素：
console.log(olist.children[索引])；

子选父：先拿到子

//var oEm =document.querySelector("em");
var oEm = ddocument.getElementByTagName("em")[0];
//子选父：一个!直接的父级
console.log(oEm.parentNode);
console.log(oEm.parentNode.parentNode);

兄弟关系（姐妹关系）

- DOM节点操作:
        ==> nextSibling:获取某个节点的下一个兄弟节点
        ==> nextElementSibling:获取某个节点的下一个兄弟元素节点
        ==> previousSibling:获取某个节点的上一个兄弟节点
        ==> previousElementSibling:获取某个节点的上一个兄弟元素节点

//先选择当前
var olist =document.querySelector(".list");

- 哥：谁的哥（上一个兄弟）

console.log(olist.previousElementSibiling);

- 弟：谁的弟(下一个兄弟)

console.log(olist.nextEelementSibiling);


-创建节点：
  - 语法：document.createElement("标签名称")；//创建一个元素节点
  - 语法：document.createTextNode("文本节点名称")；//创建一个文本节点


1.//在元素的末尾增加一个子节点
语法：  父节点.appenChild(要增加的子节点)；

//在一个节点前面插入一个节点
 语法：  父节点.inserBefore(要增加的子节点，要在哪一个节点前面)；
- eg://创建一个文本节点放在ul的最前面
<body>
    <ul>
    <li>hello</li>
    </ul>
</body>
<script>
//获取当前节点
 var ul = document.querySelector('ul');
    // 1 创建一个元素节点放到ul里面的最末尾
    // var li = document.createElement('li');// 创建出来的是一个可以使用的li元素
   // ul.appendChild(li);// 把创建好的li节点插入到ul节点里面的末尾

        //2 创建一个文本节点放到ul里面的最前面
        var text = document.createTextNode('我是最前面的文字节点');
        // 获取参照节点:就是我要在这个节点的前面
        var first = ul.children[0];
        // 插入text节点
        ul.insertBefore(text,first)
</script>

2.删除节点：

语法：父节点.removeChild(‘要删除的子节点’)

var div = document.querySelector('div');//div是父节点
var p = document.querySelector('p');//p是要删除的子节点
div.removeChild(p)

3.修改节点： ``````````````````````````````

语法：父节点.replaceChild(新节点，旧节点)
- //需求:用一个span标签来替换p标签,span标签里面有文字,写的是我是一个span标签

  //父节点
var div = documnet.querySelector('div')
//旧节点
var p= div.querySelector('p');
//新节点要自己创建
var span=document.createElement('span');
span.innerHTML= "我是一个新的span标签"；
//替换
div.replaceChild(span,p)

节点选择器（元素、属性、注释、文本）
- 元素、注释、文本参与了父子或兄弟关系
利用关系选择
- 父元素节点.childNodes
- 当前元素.previousSibling
- 下一个元素.nextSibiling
属性没有参与家族关系，更像是元素身上的衣服
- 单独选择器
- 当前元素.attributes

3.节点的过滤属性：

	nodeType	nodeName	nodeValue
元素	1	大写标签名	null
文本	3	#text	文本内容
注释	8	#comment	注释内容
属性	2	属性名	属性值
根document	9	document	null

4.dom的操作

属性操作
- 可见属性：
  - 内置：只要是系统提供的，在标签身上直接写的，还具有功能，就是内置的可见属性
  - 对象操作：1点语法；2中括号语法
  - 也可以使用：getAttribute、setAttribute、removeAttribute
- 特殊的属性：
  - class：要使用className操作
  - style：样式，值是个对象
- 非内置：
  在标签身上直接写的，但是不具有默认功能，就是自定义的可见属性.
  - 元素.getAttribute(“要获取的属性名”)
  - 元素.setAttribute(“要设置的属性名”,“属性值”)
  - 元素.removeAttribute(“要删除的属性名”)
- 不可见属性
  - 内置：不用写在标签身上，系统提供，具有功能
    - 对象操作：1点语法；2中括号语法
  - 非内置：放飞自我，看不见的自定义属性，其实就是将元素，作为一个对象数据，进行操作.
- 元素是个对象，对象可以用来存储数据，多存储一些.