DOM基础01

来源：互联网发布：最难的网络游戏知乎编辑：程序博客网时间：2024/05/16 14:34

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<title>DOM基础01</title>

<styletype="text/css">

#p1{

visibility:hidden;

}

#div1{

width:200px;

height:100px;

background: red;

}

</style>

</head>

<body>

<!--

JS的组成部分:

1.js基础

2.DOM

3.BOM

DOM : Document Object Model 文档对象模型,提供了访问html文档的方法,允许我们对html里的元素做增删改查.

DOM树: 当html文档加载完毕之后,浏览器就会创建一个树状结构.DOM树中有很多节点.

节点的类型:

1.元素节点: <div></div> <html></html> <body></body>

2.文本节点: 内容 "DOM基础01"

3.注释节点:

<!-- 4.文档节点: document

5.声明节点 <!DOCTYPE html>

节点与节点的关系:

1.父节点

2.子节点

3.兄弟节点

-->

这是一段内容<span></span>

<imgsrc="" alt=""/>

这是一个p标签!

</p>

<uiid="fruit">

苹果��

西瓜��

</ui>

<scripttype="text/javascript">

//查找元素节点

//1.通过id查找元素节点,返回的是一个节点.

varp = document.getElementById("p1");

//2.通过类查找节点,返回的是一个或多个节点的数组.

varboxes = document.getElementsByClassName("box");

//3.通过标签名查找节点,返回的是一个或多个节点的数组.

vardivs = document.getElementsByTagName("div");

//4.通过选择器查找元素,查找到匹配的第一个

vardiv = document.querySelector("div");

//5.通过选择器查找元素,查找匹配的所有元素

varelements = document.querySelectorAll("*");

* 一.特殊节点:

// 1.文档节点

// console.log(document);

//2.documentElement html节点

// console.log(document.documentElement);

//3.body节点

// console.log(document.body);

//4.head节点

// console.log(document.head);

//5.声明节点

// console.log(document.doctype);

* 二.通过节点关系获取节点

//1.childNodes 获取到某个节点的子节点(只允许为父子关系),返回的是一个数组

// console.log(document.childNodes);

//children

//2.parentNode 获取到某个节点的父节点(只有一个)

// console.log(document.head.parentNode);

//3.firstChild 获取某个节点的第一个子节点(任何节点都包含,包括空格);

// console.log(document.head.firstChild);

//4.firstElementChild 获取某个节点的第一个子元素节点;

// console.log(document.head.firstElementChild);

//5.lastChild 获取某个节点的最后一个子节点(任何节点都包含);

// console.log(document.head.lastChild);

//6.lastElementChild 获取某个节点的最后一个子元素节点;

// console.log(document.head.lastElementChild);

//7.previousSibling 获取某个元素上一个兄弟节点(任何节点都包含);

// console.log(p.previousSibling);

//8.previousElementSibling 获取某个元素上一个兄弟元素节点

// console.log(p.previousElementSibling);

//9.nextSibling 获取某个元素下个兄弟节点(任何节点都包含);

//10.nextElementSibling 获取某个元素下一个兄弟元素节点

// console.log(p.nextElementSibling);

* 三.节点的属性

//1.nodeValue 节点的值

//获取元素节点

varp = document.getElementById("p1");

// console.log(p.nodeValue);

//文本节点

vartext = p.previousElementSibling.previousSibling;

// console.log(texts.nodeValue);

//注释节点

varcommentNode = document.body.childNodes[1];

// console.log(commentNode.nodeValue);

//文档节点

// console.log(document.nodeValue);

//声明节点

// console.log(document.doctype.nodeValue);

* 文本节点和注释节点的nodeValue值是其对应的内容,其他类型的节点打印结果是null.

//2.nodeType 节点的类型

console.log(p.nodeType);//1 代表元素节点

console.log(text.nodeType);//3 文本节点

console.log(commentNode.nodeType);//8 注释节点

console.log(document.nodeType);//9 文档节点

console.log(document.doctype.nodeType);//10 声明节点

* 3.nodeName 节点的名字

console.log(div.nodeName);

console.log(text.nodeName);

console.log(commentNode.nodeName);

console.log(document.nodeName);

console.log(document.doctype.nodeName);

* 元素节点: 元素的标签名(全大写)

* 文本节点: #text

* 注释节点: #comment

* 文档节点: #document

* 声明节点: html

* 4.获取"元素节点"里的内容(开始标签和结束标签里的信息)

//a.innerHTML 取到对应节点里所有的内容,包括文本节点,元素节点,注释节点.

console.log(p.innerHTML);

//b.innerText 获取对应节点里的文本节点,忽略多余的空格;不会显示被隐藏的内容

console.log(p.innerText);

//c.textContent 获取对应节点里的文本节点,保留多余的空格,会显示被隐藏的元素的文本内容.

console.log(p.textContent);

varfruit = document.getElementById("fruit");

console.log(fruit.firstChild);

console.log(fruit.firstElementChild.innerHTML);

console.log(fruit.lastElementChild.innerHTML);

console.log(fruit.lastChild);

* 5.元素属性的操作

varinputs = document.querySelector("input");

//a. 设置一个属性 setAttribute(属性名, 属性值)

inputs.setAttribute("placeholder","请输入用户名");

//b. 获取对应的属性值 getAttribute(属性名)

console.log(inputs.getAttribute("placeholder"));

//c. 删除对应的属性名 removeAtrribute(属性名)

inputs.removeAttribute("placeholder");

* 6.元素节点的样式

//a. style 是对对应元素的行间样式进行设置或获取;

//b. getComputedStyle(元素, 伪类)

// console.log(getComputedStyle(div1))

//获取所有的样式中指定的样式值(两种方法)

//(1) getComputedStyle(元素).样式名

//(2) getComputedStyle(元素)["样式名"]

console.log(getComputedStyle(div1).width)

console.log(getComputedStyle(div1)["backgroundColor"]);

//c.仅仅适用与ie浏览器的获取所有样式的方法 currentStyle

console.log(div1.currentStyle);

* 7.创建节点

//a.创建元素节点 createElement("标签名"),会返回创建好的元素;

varimg = document.createElement("img");

img.src= "img/01.jpg";

//img.style.width = "200px";//样式

img.width= 500;//属性

//b.创建文本节点 createTextNode("文本内容")

vart = document.createTextNode("这是创建出来的一段文本");

//c.创建注释节点 createComment("对应的注释");

varc = document.createComment("这是创建出来的注释");

* 8.将创建好的节点插入到文档中

//a. appendChild() 将创建好的节点追加到最后面.

//想把节点追加到谁里面,就用谁去调用该方法

document.body.appendChild(img);

document.body.appendChild(t);

console.log(document.body.appendChild(c));

//b.insertBefore(a1,a2) 在a2节点之前插入a1节点

varimg2 = document.createElement("img");

img2.src= "img/02.jpg";

img2.width= 200;

document.body.insertBefore(img2,img);

//c.替换节点 replaceChild(a1, a2) 用a1节点替换a2节点

varimg3 = document.createElement("img");

img3.src= "img/03.jpg";

img3.width= 200;

document.body.replaceChild(img3,img2);

//d.删除节点 removeChild() 删除对应的节点

document.body.removeChild(img3);

</script>

</body>

</html>

0 0