DOM

最新推荐文章于 2024-07-15 22:17:25 发布

北望你的彦

最新推荐文章于 2024-07-15 22:17:25 发布

阅读量106

点赞数

分类专栏：前端文章标签：前端总结 DOM

本文链接：https://blog.csdn.net/qgmzhn2003111080413/article/details/103394751

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

###BOM编程
Beowser Object Model 浏览器对象模型

window：表示窗口对象
navigator
location
history
screen

常用的方法和属性
alert（） //系统提示语（弹窗）；
使用场景：想要给用户提示信息，待确定的警告框。
window.alert(“你认为你是个人？”)

confirm （）；
//用于一个带有“确定”和“取消”按钮的提示框
window.confirm(“你还是个人？”)

该方法会返回一个布尔值。
如果用户点击“确定”，则返回true；
如果用户点击“取消“，则返回false；

prompt();
//带有输入功能的提示框，返回一个字符串

let str = window.prompt(“请输入手机号”);
如果用户输入的是：123
console.log(str);//123

全局属性与window属性的区别

全局属性删除无效，依然可以使用
window属性删除有效。再次使用则为；

//ES6新增的let和const创建的变量不会成为window的属性
var i = 10；
var j = 20；
const z = 30；

alert(window.i)//10
alert(window.j)//20
alert(window.z)//30

//输出页面可视区域的尺寸
console.log(innerWidth);
console.log(innerHeight);

//输出浏览器的尺寸
console.log(outerWidth);
console.log(outerHeight);

注：每个浏览器的数据可能会有区别（略微的差异）

screen
//输出浏览器离屏幕（0，0）点的位置
console.log(window.screenLeft);
console.log(window.screenTop);

console.log(window.screenX);
console.log(window.screenY);

//获取元素的尺寸（宽度，高度）
console.log(JG445.offsetWidth);
console.log(JG445.offsetHeight);

//调整窗口位置（浏览器厂商的已经禁止）
//IE可以使用

window.moveTo(100,100);
window.moveBy(200,300);

moveTo是窗口距离屏幕的距离
moveBy是在moveTo基础上进行累加

//打开新窗口
//4个参数
//第一个参数：URL
//第二个参数：打开方式
//第三个参数：窗口大小
//第四个参数：是否取代历史记录中的当前页面

window.open(“test.html”,"_blank",“width=300,height=200,top=200”,“resizable=yes”);

有一个返回值，对象。
因此，就可以使用这个对象的方法close

let JG445 = window.open(“test.html”,"_blank",“width=300,height=200,top=200”,“resizable=yes”);

let test = funcion (){
JG445.close();
}

//创建要展示在页面的内容
let str = “pizza”；
//要展示在那个标签中
let BQ = document.getELementById(“JG445”);
//把要展示的内容添加到标签中
BQ.innerText = str;

【时间函数】

定时函数
格式：
setInterval（参数1，参数2）
参数1：方法或函数（必须以字符串形式）
参数2：设置的时间，即多少秒后调用参数1

例：
let first = setInterval(“abc()”,1000);
表示1秒后调用abc()这个方法。

注：
一个HTML可以引用多个 JS文件，每个JS文件又可以设置多个定时函数。
由于考虑到网络资源，当时间函数执行后，需要进行关闭。
例：
let first = setInterval(“abc()”,1000);
clearInterval(first);//关闭相应的定时函数

超时函数
格式：
setTimeout(参数1，参数2)
例：
let pizza = setTimeout(“alert(您已经超过3秒)”,3000);//3秒后进行参数1的调用
clearTimeout(pizza);//停止超时函数

//浏览器的名称
console.log(“appName:”+navigator.appName);
//浏览器的版本
console.log(’‘Version:’+navigator.appVersion);
//浏览器的语言
console.log(“language:”+navigator.language);
//产品名称
console.log(“Name:”+navigator.product);

【location】
属性：
例：
http://www.baidu.com/abc/jionus/index.html#123

hash 返回URL的锚部分,“#”号后面的内容//123

host 返回服务器的名字 //www.baidu.com

hostname 等价于host 但有时不会写www

pathname 返回URL后面的部分内容 abc/jionus/index.html

port 返回端口：8080

search 返回？后面的内容

方法：
reload：重新加载当前文档（刷新）；

location.reload();

replace()加载新文档（跳转新页面）
特点：等同于把原来的文档替换成新的文档，并且用的是一个窗口。
由于原来的文档和新文档用的是同一个窗口。所以，没有返回上一步的功能。

即：不能够返回上一步

location.replace("http://www.baidu.com");

assign（）加载新文档（跳转新页面）
特点：等同于跳转到一个新的链接，窗口显示新链接的内容，不等同于替换。
所以，有返回上一步的功能。

location.assign（"http://www.baidu.com"）;

【history】
取值为0：表示刷新当前页面

window.history.go(0);

取值为-1：返回上一个页面

window.history.go(-1);

取值为1：到达下一个页面

window.history.go(1);

到达下面一个页面（URL）
window.history.forward();

返回上一个页面（URL）
window.history.back();

【screen】
window.screen.width:返回当前屏幕宽度

console.log("屏幕宽度："window.screen.width);

window.screen.height:返回当前屏幕高度

console.log("屏幕宽度："window.screen.height);

###DOM

DOM:Document Object Model

文档对象模型

功能：可以操作HTML文档

【节点】
有一个页面，就会有一个DOM节点数。

DOM树结构中有以下三个节点组成：
1、元素节点：HTML的标签；
2、文本节点：标签包含的文本内容（元素内容）
3、属性节点：开始标签包含的属性

注：属性节点不属于元素节点的子节点

节点名称 nodeName
节点类型 nodeType
节点值 nodeValue

nodeName
元素节点                node.ELEMENT_NODE()          1
属性节点                node.ATTRIBUTE_NODE()        2
文本                   node.TEXT_NODE()             3

文档节点                node.DOCUMENT_NODE()         9

let Div = document.getELementByID(“abc”);//获取元素

Div.ELEMENT_NODE == 1;//判断是否为元素节点

console.log(Div.nodeName) //id div #text
console.log(Div.nodeType) //2 1 3
console.log(Div.nodeValue) //abc null 123

除了ByID是唯一值以外。
其他查找元素的内容，都会返回多个值。
多个值以类数组方式存储（浏览器的后台会以NodeList进行展示）

【快速查找节点】
1、getELementByID通过ID名来获取元素

let aEle = document.getELementByID("a002");

2、getELementsByClassName通过类名来获取元素

let divEle = document.getELementsByClassName("b001")[0];

注：由于class的名字可以相同，最终可能获取到多个节点，因此，通过类名来获取元素的方式，会返回一个类数组。可以通过下标的方式进行相应内容的查找和展示。

3、document.getElementsByTagName();通过标签名来获取元素

let divEle = document.getElementsByTagName("div");

注：由于标签的名字可以相同，最终可能获取到多个节点，因此，通过类名来获取元素的方式，会返回一个类数组。可以通过下标的方式进行相应内容的查找和展示。

4、document.getElementsByName()；通过name的值来获取元素

注：name是标签的属性名
let  divEle = document.getElementsByName("username");

通过CSS选择器进行查找

5、doucment.querySelector
6、doucment.querySelectorALL

注：
A：IE8及IE8以下的版本都无法识别
B：无法实时反馈元素
即：当页面进行了元素的添加或删除时，层次结构发生的改变。
而这两个方法是不会实时更新的，依然使用原来的层次结构。

【关系层次查找节点】

1、查找父节点
子元素标签.parentNode

例：

<section>
    <aside class="as1" id="as1">
    </aside>
</section>

let zedd = document.querySelector(“aside”);
//查找父级标签
console.log(zedd.parentNode);

注：父节点最多到document，再往上找就会返回null；

1、查找子节点
格式：父元素.childNodes

例：

<section>
    <aside class="as1" id="as1">
    </aside>
<section>

let pizza = document.querySelector(“section”)[0];
//查子节点
console.log(pizza.chil dNodes.length);//3

console.log(pizza.childNodes[0]);//#test

3、第一个子元素（firstChild）
let asiEle = document.getElementsByTagName(“aside”)[0];
console.log(asiEle.firstChild);//null 空白文本内容

4、最后一个子元素（lastChild）
let asiEle = document.getElementsByTagName(“aside”)[0];
console.log(asiEle.lastChild);//null 空白文本内容

5、找兄弟元素（后一个）
格式：元素.nextSibling

例：
let secEle = document.getElementsByClassName(“as1”)[0];
console.log(secEle.nextSibling);//test

6、找兄弟元素（前一个）
格式：元素.previousSibling

例：
let secEle = document.getElementsByClassName(“as1”)[0];
console.log(secEle.previousSibling);//test

【关系层次查找元素】

1、查找父元素
格式：子元素.parentElement

例：
secEle.parentElement

2、查找子元素
格式：父元素.children

例：
secEle.children
注：只获取元素节点（其他的文本节点，注释节点等都不会在其中）

3、查找第一个子元素
格式：父元素.firstElementChild

例：
secEle.firstElementChild

4、查找最后一个子元素
格式：父元素.lastElementChild

例：
secEle.lastElementChild

5、找兄弟元素（后一个）
格式：元素.previousEmentSibling

例：
sec.secEle.previousElementSibling

6、找兄弟元素（前一个）
格式：元素.previousElementSibling
例：
secEle.previousElementSibling

【节点的操作】

1、创建一个新节点到页面（添加一个新元素到页面）

格式：document.createElement(“标签名”)；
格式2：父节点.createElement(“标签名”)；

例1：
let divEle = document.createElement(“div”);

例2：
let divEle = document.getElementsByClassName(“sec1”)[0];
seEle.createElement(“div”);

2、创建节点内容（文本节点）
格式：标签名.createTextNode（“文本内容”）；

例：
let divTN = document.createTextNode(“元素内容”)；

3、添加新的元素节点
格式：父标签.appendchild（新节点）；

例：
//创建一个带有文本节点的元素
let divEle = document.createElement(“div”);
let divTN = document.createTextNode(“JG445”);
divEle.appendChild(divTN);
//把新元素添加到页面中
bodyEle.appendChild(divEle);

4、添加到某个元素的前面

step1（第一步）：先把这个元素获取
step2（第二步）：获取父级元素
step3（第三步）：把新元素添加到获取元素之前

格式：父元素.insertBefore(新元素，旧元素)

功能：会把新元素添加到旧元素之前

let divEle = document.createElement(“div”);
docNT = document.createTextNode(“toutou”);
divEle.appendChild(docNT);

//获取位置标签
let seEle = document.getElementsByClassName(“sec1”)[0];

let artEle = document.querySelector(“article”);
artEle.insertBefore(divEle,secEle);

5、删除一个节点
step1：获取父节点
step2：获取删除的节点
step3：删除节点
格式：父节点.remove（子节点）；

例：
let artEle = document.querySelector(“article”);
let seEle = document.getElementsByClassName(“sec1”)[0];

artEle.remove(seEle);//删除所有节点

artEle.removeChild(seEle);//删除某一个节点

6、修改一个节点（替换）

step1：获取父节点
step2：父节点.replaceChild（新节点，旧节点）；

例：
//获取父节点
let parEle = spanEle.parentElement;
//替换某一个元素
parEle.replaceChild(newEle,oldEle);

7、克隆节点（拓展）
浅克隆
divEle.cloneNode(false);
深克隆
divEle.cloneNode(ture);

8、创建注释节点
格式：document.creatCommnet（“这里添加注释”）；
例：
let pizza = document.createComment(“这里添加注释”)；
divEle.appendChild(divComm);//divEle是加注释的父元素

【文本的操作】
1、innerText（只获取当前页面显示的内容）
元素节点.innerText
例：
div.innerText
a>可以获取元素的文本内容
let divE = div.innerText;

b>并且可以设置元素的文本内容
let div.innerText = “JG445”；

2、innerHTML
元素节点.innerHTML
例：
div.innerHTML

a>可以获取元素的文本内容和子元素
let divE = div.innerHTML;

b>并且可以设置元素的文本内容和子元素
let div.innerHTML = “JG445”;

3、TextContent扩展
功能：获取文本内容
例：
div.Textcontent

【TextContent与innerText的区别】
innerText只获取在页面中显示元素的文本内容。
textcontent不仅可以获取在页面中显示元素的文本内容，
并且也可以把display为none的元素内容也获取到。

【属性节点的操作】

1、获取属性值
格式：节点名.getAttribute(“属性名”)；

例： div.getAttribute(“id”);
注：获取div标签的id值

2、设置属性值

格式：节点名.setAttribute(“属性名”，“属性值”)；

例：div.setAttribute(“id”,“JG445”);

3、创建一个属性节点
//创建属性名
let attEle = document.createAttribute(“name”);

//创建属性值
attEle.nodeValue = “QQ”;

//把属性节点添加到相应标签
inputEle[2].attributes.setNamedItem(attEle);

4、删除一个属性节点
格式：节点.removeAttribute(属性名)；
document.removeAttribute(“name”)；

5、判断当前标签是否存在某个属性
格式：节点.hasAttribute(属性名)；
补充：判断是否纯在子节点节点.hasNodeChild();

div.hasAttribute(“name”); //返回布尔值（T,F）

6、如何获取/修改多个类名的值（扩展）

【CSS操作】
1、对节点添加样式
格式：节点.style.CSS属性名 = CSS属性值
例：
h1Ele.style.color=“red”;
//由于在JS中连字符是有特殊含义的所以，不可以用
h1Ele.style.backgrondColor=“black”;

2、元素的尺寸
格式：节点.clientWidth
节点.clientHeight

3、元素的位置
格式：节点.offsetleft
节点.offsetTop

北望你的彦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM

###BOM编程Beowser Object Model 浏览器对象模型window：表示窗口对象navigatorlocationhistoryscreen常用的方法和属性alert（） //系统提示语（弹窗）；使用场景：想要给用户提示信息，待确定的警告框。window.alert(“你认为你是个人？”)confirm （）；//用于一个带有“确定”和“取消”按钮的提示框...
复制链接

扫一扫