JS（十二）DOM基础

最新推荐文章于 2024-07-18 11:48:33 发布

ꪤ、匿名

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量74

点赞数 1

文章标签： javascript html html5

本文链接：https://blog.csdn.net/jjjh968/article/details/120178950

版权

1.定义

DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）。

DOM是针对HTML和XML文档的一个API（Application programming interfaces--应用程序编程接口）,DOM描绘了一个层次化的节点树，允许开发人员添加，移除，修改页面的某一部分。

• 文档

– 文档表示的就是整个的HTML网页文档

• 对象

– 对象表示将网页中的每一个部分都转换为了一个对象。

• 模型

– 使用模型来表示对象之间的关系，这样方便我们获取对象

DOM提供了一种表述形式将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将web页面和脚本或编程语言连接起来了。DOM可以理解成网页的编程接口。

2.DOM节点

DOM的最小组成单位叫做节点（node）。文档的树形结构（DOM树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

节点的类型有七种：Document、DocumentType、Element、Text、Comment、DocumentFragment。

常用节点

文档节点（document）

整个HTML文档document对象作为window对象的属性存在的，我们不用获取可以直接使用。

元素节点（Element）

HTML文档中的HTML标签。

属性节点（Attribute)

元素的属性表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。

文本节点（Text）

HTML标签中的文本内容。
其他节点

DocumentType

doctype标签（比如<!DOCTYPE html>）。

Comment

注释

DocumentFragment

文档的片段

这七种节点都属于浏览器原生提供的节点对象(下面要讲的Node对象)的派生对象，具有一些共同的属性和方法。

3.Node类型

DOM Level 1 描述了名为 Node 的接口，这个接口是所有 DOM 节点类型都必须实现的。Node 接口在 JavaScript中被实现为 Node 类型，在除 IE之外的所有浏览器中都可以直接访问这个类型。在 JavaScript中，所有节点类型都继承 Node 类型，因此所有类型都共享相同的基本属性和方法。

		//因为js代码从上到下执行,这里页面节点还没加载完毕就进行了获取
        //文档加载完毕之后执行js代码
        window.onload = function () {
            var div = document.getElementById('one');
            console.log(div)
        }
        <body>
            hello
            <div id="one" class="two">
                div的内容
            </div>
            text
            <!-- 注释内容 -->
        </body>
alert()弹框会阻止下面代码的执行,只有点击确定之后才会执行下面代码

4.Node类型的属性和方法

1.body节点
    1.//获取body节点
    var body=document.body;
    2.查看节点类型(nodeType) 9Document 1Element 3Text 8Comment
    console.log(document.nodeType)//9
    3.//获取节点名称 返回纯大写节点名称
    console.log(body.nodeName)      
    4.//获取子节点  childNodes保存一个NodeList对象
    console.log(body.childNodes);
    5.//获取兄弟节点中的前一个节点
    var childs=body.childNodes;
    console.log(childs[1].previousSibling);
    6.//获取兄弟节点的下一个节点
    console.log(childs[1].nextSibling) 
    7.//或取childNodes列表中的第一个节点
    console.log(body.firstChild) 
    8.//或取childNodes列表中的最后一个节点
    console.log(body.lastChild) 
    9.//指向表示整个文档的文档节点。
    console/log(body.ownerDocument)
    10.//查看body节点是否有孩子节点
    console.log(body.hasChildNodes());
    11.//获取某一元素节点内的元素孩子节点
    console.log(body.children)
2. //类数组转数组 es5
            var result=Array.prototype.slice.call(childs,0);
            console.log(result);
    //es6 Array.from(childs);
            var temp=Array.from(childs);
            console.log(temp)
3.//从孩子节点中过滤出元素节点
    var temp=Array.from(childs);
    var result=temp.filter(function(item){
                return item.nodeType === 1
    })
    console.log(result)

5.操作节点(以下四个方法都需要父节点对象进行调用!)

1.appendChild()追加节点
            //1.获取到父节点
            //2.找到孩子
            //3.添加
            var parent=document.getElementsByClassName('parent')[0];
            var newChild=document.createElement('div');
             //添加内部文本
            // newChild.innerText='four';
            /添加内部内容  innerHTML可以设别html代码片段 可以识别标签
            newChild.innerHTML=`<div class='child'>newChild</div>`
            parent.appendChild(newChild);
            console.log(parent)
            console.info(parent)
            console.debug(parent)
            console.error(parent)
            console.warn(parent)
2.insertBefore()在参照节点前插入节点 第一个参数要插入的节点 第二个参数参照节点
            同一个节点在页面中只存在一个
            var two=parent.children[1];
            parent.appendChild(two)   
            parent.insertBefore(newChild,two);
3.replaceChild()替换节点 第一个参数：要插入的节点；第二个参数：要替换的节点；第二个节点被删除
            parent.replaceChild(newChild,two)
4.removeChild()一个参数 要移除的节点
            parent.removeChild(two)
5.获取节点内部内容
            parent.innerHTML;设别HTML代码片段 如<div id="parent">div得内容</div>
            parent.innerText;；只识别文本 去除空格和回车
            parent.textContent;只识别文本，不去除空格和回车
6.清空节点内部内容
                parent.innerHTML=""
7.cloneNode();复制节点 有参数true代表深复制
            //浅复制 只复制节点 不复制内容
            var cloneTwo=two.cloneNode();
            parent.appendChild(cloneTwo);
            // 深复制 复制节点和内容
            var cloneTwo=two.cloneNode(true);
            parent.appendChild(cloneTwo);

6.Document类型

Javascript通过使用Document类型表示文档。在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因此可以直接调用。HTMLDocument继承自Document。

1. //document-*-表示整个html文档页面
    console.log(document)
2. // html元素
    console.log(document.documentElement);
   // body元素
    console.log(document.body);
    // img元素
    console.log(document.images)
    // form元素
    console.log(document.forms);
    // a标签 带有href属性的
    console.log(document.links);
    // 获取域名
     console.log(document.domain);
    // 获取文档头信息
    console.log(document.doctype);
    // 获取文档标题
    console.log(document.title);
     // 获取URL
    console.log(document.URL);
     // 获取页面来源地址
    console.log(document.referrer)
3.查找元素
    getElementById()  
    getElementsByTagName()
    getElementsByName()
    getElementsByClassName()

7.Element类型

Element 对象对应网页的 HTML 元素。每一个 HTML 元素在 DOM 树上都会转化成一个Element节点对象。

4.1.属性

attributes：返回一个与该元素相关的所有属性的集合。

classList：返回该元素包含的 class 属性的集合。

className：获取或设置指定元素的 class 属性的值。

clientHeight：获取元素内部的高度，包含内边距，但不包括水平滚动条、边框和外边距。

clientTop：返回该元素距离它上边界的高度。

clientLeft：返回该元素距离它左边界的宽度。

clientWidth：返回该元素它内部的宽度，包括内边距，但不包括垂直滚动条、边框和外边距。

innerHTML：设置或获取 HTML 语法表示的元素的后代。

tagName：返回当前元素的标签名。

4.2.常用方法

方法	描述
element.innerHTML = new html content	改变元素的 innerHTML
element.attribute = value	修改属性的值
element.getAttribute()	返回元素节点的指定属性值。
element.setAttribute(attribute, value)	设置或改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

element.innerHTML

属性设置或获取HTML语法表示的元素的后代。

<div id="div1">我是一个div</div>
<script>
  var d1 = document.getElementById('div1');
  // 获取
  console.log(d1.innerHTML);
  // 设置
  d1.innerHTML = '我是新的内容'
</script>

element.attribute = value

修改已经存在的属性的值

<div id="div1">123</div>
<script>
  var d1 = document.getElementById('div1');
  // 直接将已经存在的属性进行修改
  d1.id = 'div2';
</script>

element.getAttribute()

返回元素节点的指定属性值。

<div id="div1">我是一个div</div>
<script>
  var div = document.getElementById('div1');
  console.log(div.getAttribute('id')); // div1
</script>

element.setAttribute(attribute, value)

把指定属性设置或更改为指定值。

<div id="div1">我是一个div</div>
<script>
  var d1 = document.getElementById('div1');
  // 设置div1的class为divCla
  d1.setAttribute('class', 'divCla');
</script>

element.style.property

设置或返回元素的 style 属性。

<div id="div1">我是一个div</div>
<script>
  var d1 = document.getElementById('div1');
  // 获取div1的style样式
  console.log(d1.style);
  // 设置div1的style
  d1.style.backgroundColor = 'red';
</script>

ꪤ、匿名

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS（十二）DOM基础

1.定义DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）。DOM是针对HTML和XML文档的一个API（Application programming interfaces--应用程序编程接口）,DOM描绘了一个层次化的节点树，允许开发人员添加，移除，修改页面的某一部分。• 文档– 文档表示的就是整个的HTML网页文档• 对象– 对象表示将网页中的每一个部分
复制链接

扫一扫