码迷,mamicode.com
首页 > 其他好文 > 详细

DOM

时间:2019-08-17 19:37:29      阅读:103      评论:0      收藏:0      [点我收藏+]

标签:字符   doc   增加   sele   query   上下   修改   sel   组成   

一、DOM Tree

    专门用来操作htnl页面内容的API,js的三个重要组成部分:ES(核心语法) DOM BOM

         使用原生js完成某个内容

 DOM W3C指定的标准

                                     DOM: 核心DOM   能够操作所有结构化文档 (HTML,XML)  万能 复杂  繁琐

                                     HTML DOM  专门操作HTML内容的API 常用的API进行简化 -- 简单   不是万能

                                     实际开发中:先用简单,如果简单的不能解决问题、实现不了在用核心DOM补充

                                     网页中一切在内存中都是以树形结构存储的 存储上下级包含关系最直观的结构

                                       HTML中的每一个元素:元素,属性,文本 都是一个节点对象(Node)  document对象是整棵树的根节点

 

 

节点对象(Node三大属性

1、  nodeType number

9、document                     Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问

1、element                        HTML 元素          

2、attribute                       属性

3、text                                文本

2、nodeName  节点名  字符串

         document   #document

         elsement          全大写的标签名

         attribute           属性名

         进一步区分元素的名称时候用

3、nodeValue   节点值

         document         null

         element            null

         attribute           属性值

         text                  文本的内容

 

 

 

二、节点

         什么是节点呢?

         根据DOM,XML文档中的每一个成分都是一个节点

         整个文档是一个文档节点 document

         标签是一个元素节点      document.getElementsByTagName(“body”)  这就是一个body节点

元素中的文本就是一个文本节点

每一个属性是一个属性节点    

注释是一个注释节点

 

三、节点的获取

         知道了什么是节点,那么我们要用节点来进行相关操作,比如找到一个<h1>标签我们要给他增加属性,属性值,内容等,那么我们首先需要先找到这一个节点。

         同一个html页面内一个标签,属性,选择器可能存在多个,所以通过这些方式查找的内容通过一个类数组的方式放回,或者讲,只要有可能返回的是多个内容的可能,那么返回都是一个类数组来存这些内容,那么想要获得单个内容还得加上下标。

 

 

1、  通过标签名称来找节点。

var arr = document.getElementByTagName(“标签名”)[*];

2、  通过选择器获得节点

单个:var n = document.querySelector(“table>tbody tr:first-child>td:first-child”)

多个:var arr = document.querySelectorAll(“var n = document.querySelector(“table>tbody tr:first-child>td”)

”);

3、  通过id来获得节点

 var abc = document.getElementById(“id名”);

4、  通过类名来查找节点

var arr = document.getElementsByClassName(“类名”);

5、  通过name属性值来查找,一般不使用

var arr = document.getElementByName(“name的属性值”);

 

 

确定一个节点,通过关系查找其他节点

 

1、 三个元素不需要查找,直接获得

<html> document.documentElement     html

<head>document.head                                            head

     <body>document.body                                              body

2、 节点之间的关系  node代表的是已经确定的节点对象

1) 父子关系

node.parentNode    获得node的父节点

var   tbody  = document.getElementsByTagName("tr")[0].parentNode;

 

       node. childNodes   获得node的所有子节点

var td = document.getElementsByTagName("tr")[0].childNodes;

   node.firstChild    获得node下的第一个子节点

            node.lastChild     后的node下最后一个子节点

2)兄弟关系

   node.preivousSibling: 返回当前节点的前一个兄弟节点

var  tr0 = document.getElementsByTagName("tr")[1].preivousSibling;

 

   node.nextSibling:返回当前节点的下一个兄弟节点

var  tr2 = document.getElementsByTagName("tr")[1].nextSibling;

 

            问题:网页中的一切都是节点,包括换行和空字符

3、 用元素树:仅包含元素节点的树结构  ---不是一颗新树 ,仅是节点数的子集

elem代表的是已经确定的节点

                            1)父子关系

                                     elem.parentElement    返回一个父元素对象(父节点)

                                     var tr = document.getElementsByTagName("tr")[0];

              var father = tr.parentElement;

                                     elem.childen IE8支持                 返回子元素对象集合

                                     elem.firstElementChild    返回第一个子元素对象

                                     elem.lastElementChild     返回最后一个子元素

                            2)兄弟关系

                                     返回当前节点的前一个兄弟元素

                                     elem.preivousElementSibling

                                     返回当前节点的下一个兄弟元素

                                     elem.nextElementSibling

 

                                     问题:IE9+支持

 

四、获得节点中的内容

      1、双标签中的内容增,删,改,查

              a)、查

                     var abc = node.innerHTML

              b)、改

                     node.innerHTML = “想要在标签中显示的内容”;

              c)、删

                     node.innerHTML =””;为空就是把标签中的内内容全给删完

              d)、增

                     node.innerHTML =node.innerHTML +”想要增加的内容”;  添加原有的内容的后面

2、单标签的内容 增、删、改、查  单标签内容一般存在value值里

a)        、查

var abc = node.value;

       b)、改

              node.value = “修改的内容”;

       c)、删

              node.value = “”   value的属性              值为空就删除了value这个属性值

       d)、增

              node.value = node.value+“增加的内容”;添加在原有的属性值后面

 

3、属性的 增, 删, 改, 查

a)、查 查的是属性值

var abc = node.getAttribute(“属性名”)

var abc = node.属性名

var abc = document.getElementsByTagName("input")[0].value;

b)、改

    node.属性名 = “要修改的内容”;

    node. setAttribute("原有属性","更改的属性值");

c)、删

    1、node.属性名 = “”  只删掉属性值

    2、node.RemoveAttribute("要删除的属性"); 这样会把属性名和属性值一起删掉

    3、node.RemoveAllAttributes(); 移除当前节点的所有属性和属性值

    4、node. setAttribute("原有属性","");

       d)、增

              node.要添加的属性名=“要添加的属性值”

                           

 

 

 

DOM

标签:字符   doc   增加   sele   query   上下   修改   sel   组成   

原文地址:https://www.cnblogs.com/Godfather-twq/p/11369986.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!