DOM操作

最新推荐文章于 2024-11-08 16:09:18 发布

编程爱好者ph

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量211

点赞数

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_33193871/article/details/120897126

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

大纲

DOM Document节点
Document节点属性
Document节点操作页面元素

DOM Document节点

DOM全称为Document Object Model，即文档对象模型。它是一套用来管理控制html文档的规则。而Document节点则是一种具象化的表现形式。

假设我们把整个html文档看成是一个对象，那么这个对象就是Document节点。而我们如何操作控制这个对象的标准，就是DOM。

dom中规定html页面中的所有元素都是节点。

document节点又被叫做document对象。每个载入浏览器的HTML文档都会称为document对象。document对象使我们可以从脚本中对HTML页面中的所有元素进行访问。
document是html文档的根节点，每张网页都有自己的document节点。window.document属性就指向这个节点。也就是说只要浏览器开始载入HTML文档，这个节点对象就存在了，可以直接调用。

滚动标题案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动标题测试document</title>
</head>
<body>
<script>
    setInterval(function (){
        var docTitle = document.title;
        var titleArr = docTitle.split('');
        titleArr.push(titleArr.shift());
        docTitle = titleArr.join('');
        document.title = docTitle;
    },1000);
</script>
</body>
</html>

Document节点属性

返回文档内部的某个节点。
doctype、documentElement、body、head；
返回文档指定信息。
documentURL、URL、domain、lastModified、location、title、readyState;
返回文档内部特定节点的集合。
anchors、forms、images、links、scripts;

doctype

对于HTML文档来说document对象一般有两个子节点，第一个子节点就是doctype。
doctype节点是一个对象，包含了当前文档类型信息。如果网页没有声明DTD，该属性返回null。

document.doctype

documentElement

document.documentElement

表示当前文档的根节点，通常是document节点的第二个子节点，紧跟在document.doctype节点后面。对于HTML网页，该属性返回HTML节点。

body

document.body

body属性返回当前文档的body或frameset节点，如果不存在这样的节点，就返回null。
这个属性是可写的，如果对其写入一个新的节点会导致原有的所有子节点被移除。

head

head属性返回当前文档的head节点。如果当前文档有多个head，则返回第一个。

document.head

documentURI

document.documentURI

documentURI属性返回当前文档的网址，documentURI属性所有文档都具备。

URL

URL属性返回当前文档的网址。URL属性只有HTML文档才具备。

document.URL

IE浏览器不支持documentURI属性
document.documentURI===document.URL //true

domain

domain属性返回当前文档的域名。

document.domain //www.baidu.com

lastModified

lastModified属性返回当前文档(网页)最后修改的时间戳，格式为字符串。

document.lastModified //10/21/2021 15:24:36

lastModified属性的值是字符串，所以不能用来直接比较。如果想要比较两个文档谁的日期更新，需要用转成时间戳格式才能进行比较。

Date.parse('10/21/2021 15:24:36'); //1634801076000

Date.parse方法能够将时间格式字符串转换成时间戳格式。

location

location属性返回一个只读对象，提供了当前文档的URL信息。

语法	说明
document.location.href	返回完整的URL
document.location.protocol	返回当前遵守的协议
document.location.host	返回当前页面域名+端口号
document.location.hostname	返回当前域名
document.location.port	返回当前页面端口号，如果不存在则返回空
document.location.pathname	返回当前页面在服务器中的路径
document.location.search	返回当前页面URL中的查询字符串
document.location.assign(‘www.baidu.com’);	跳转到另一个网址

location中有关的其他内容

以下方法效果相同，都能够改变当前页面的url:

location.assign('https://www.baidu.com');
window.location='https://www.baidu.com';
location.href='https://www.baidu.com'; //常用

reload()：重新加载当前显示的页面

location.reload(false); //优先从本地缓存重新加载
location.reload(true);  //优先从服务器重新加载

title

title属性返回当前文档的标题，该属性是可写的。

document.title

characterSet

返回渲染当前文档的字符集

document.characterSet

readyState

返回当前文档的状态

状态	说明
loading	加载HTML代码阶段(尚未完成解析)
interactive	加载外部资源阶段
complete	全部加载完成

document.readyState

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        console.log(document.readyState);
        var timer = setInterval(function (){
            if (document.readyState=='complete'){
                console.log('加载完成');
                clearInterval(timer);
            }
        },20)
    </script>
</body>
</html>

返回文档内部特定元素的集合

这些集合都是动态的，原节点又任何变化会立刻反映在集合中。

语法	说明
anchors	网页中所有指定了name属性的a节点元素
forms	网页中所有表单
images	网页中所有图片
links	网页中所有链接元素(即带有href属性的a标签)
scripts	网页中所有的脚本

Document节点操作页面元素

选中页面元素
创建页面元素
操作页面元素属性

[querySelector()]

返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件则返回第一个匹配的节点，如果没有发现匹配的节点则返回null。

querySelector是匹配的选择器，那么如果是选择器为id时的参数应该是’#id’;

document.querySelector('#dl');

[querySelectorAll()]

用来选中页面元素，根据指定的选择器进行筛选。如果有多个元素满足条件，则返回这些元素构成的集合。

document.querySelectorAll('#dl');

返回的结果是一个节点列表，不是数组，但能够像数组一样使用列表
如果查找失败不是返回null，而是返回一个空的节点列表

其他选择元素方式

方法	说明
getElementById	返回匹配指定ID属性的元素节点
getElementsByTagName	返回所有指定标签的元素
getElementsByClassName	返回符合指定类名的所有元素
getElementsByName	用于选择拥有name属性的HTML元素

创建页面元素节点、属性

[createElement()]生成html元素节点

var p = document.createElement('p');
p.innerText='这是一个p标签';
document.body.appendChild(p);

因为直接创建一个按钮根本没办法直观看到(仅存在于内存中)，因此通过.appendChild方式添加到body当中。.appendChild()方法的作用能够将代码创建的元素添加到指定位置。

[createTextNode()]生成文本节点，参数为所要生成的文本节点的内容

var p = document.createElement('p');
var textNode = document.createTextNode('这是一个文本节点');
p.appendChild(textNode);
document.body.appendChild(p);

[createAttribute()]生成一个新的属性对象节点，并返回它

var p = document.createElement('p');
var textNode = document.createTextNode('这是一个文本节点');
p.appendChild(textNode);
var attr = document.createAttribute('align');
attr.value = 'center';
p.setAttributeNode(attr);
document.body.appendChild(p);

操作页面元素属性

元素节点特性方法

getAttribute('属性名');
setAttribute('属性名','属性值');
removeAttribute('属性名');

var div1 = document.querySelector('#div');
  div1.setAttribute('style','height:100px;width;100px;background-color:blue');
  console.log(div1.getAttribute('style'));
  // div1.removeAttribute('style');

元素节点的style属性

var divStyle = document.querySelector('#div').style;
  divStyle.backgroundColor = 'blue';
  divStyle.height = '100px';
  divStyle.width = '100px';
  divStyle.cssFloat = 'left';

style对象中的样式与元素style属性中的样式名是一一对应的，但是需要一点点改写规则：

将横杠从CSS属性名中去除，然后将横杠后的第一个字母大写。
CSS属性名是javascript保留字的，在属性名之前需要加上字符串’css’。
style对象的属性值都是字符串，而且包括单位。

元素节点的style属性的cssText写法

var divStyle = document.querySelector('#div').style;
divStyle.cssText = 'background-color:blue;height:100px;width:100px';

删除整个style属性可以用(divStyle.cssText="";)这种写法。
cssText对应的是HTML元素的style属性，所以不用改写CSS属性名。

元素节点的style属性方法

setProperty(propertyName,value)
getProperty(propertyName)
removeProperty(propertyName)

var divStyle = document.querySelector('#div').style;
divStyle.setProperty('background-color','red');
divStyle.getPropertyValue('background-color');
divStyle.removeProperty('background-color');