javascirpt中的Dom初步整理

Dom

简介

Dom是前端语言中javascript不可缺少的一部分.
Dom是:(document object module)文档对象模块的简写.
用处:Dom可以用来操作xml和html.
Dom把整个html页面抽象成一个Document对象.

1.Dom操作html

1.1获取元素-方法

<div id="div-id">
	<p class="cla-p">
		这是class
	</p>
	<p class="cla-p">这是一段话</p>
	//这是一个注释
	<p id="p-3">这是另一段话</p>
	<p>这是最后一段话</p>
	<input type="text" name="name1">
</div>

//获取元素的方法
//1.1.1:getElementById():通过id值获取标签
//参数:引号包裹的id值
//返回值:id标签
console.log(document.getElementById("div-id"));
//1.1.2:getElementsByClassName():通过类名获取标签
//参数:引号包裹的类名
//返回值:HTMLCollection对象
console.log(document.getElementsByClassName("cla-p"));
//1.1.3:getElementsByTagName():根据标签名获取标签
//参数:引号包裹的标签名
//返回值:HTMLCollection对象
console.log(document.getElementsByTagName("p"));
//1.1.4:getElementsByName():根据name属性的值来获取标签.
//参数:引号包裹的name属性值
//返回值:NodeList对象
console.log(document.getElementsByName("name1"));
//1.1.5:querySelectorAll():根据css选择器选择标签.
//参数:引号包裹的css选择器
//返回值:NodeList对象
console.log(document.querySelectorAll("p"));
//1.1.6:querySelector():根据css选择器获取单个标签
//参数:引号包裹的css选择器
//返回值:第一个获取的p标签
console.log(document.querySelector('p'));

1.2获取元素-属性

//获取元素的属性
//1.2.1:elem.childNodes获取elem的所有子节点,包括文本节点,元素结缔娜,甚至是注释
//返回值:NodeList对象
let id = document.getElementById("div-id");
console.log(id.childNodes);
//1.2.2:elem.parentNode:元素elem的父节点,为元素节点
let p = document.getElementsByTagName("p")[0];
console.log(p.parentNode);
//1.2.3:elem.firstChild:元素elem第一个子节点,可能会显示text
//返回值标签
console.log(id.firstChild);
//1.2.4:elem.lastChild:元素elem最后一个子节点,可能会显示text
//返回值标签
console.log(id.lastChild);
//1.2.4:elem.nextSibling:元素elem同一树中的下一个节点
//elem.nextElementSibling:元素elem同一树下的下一个元素不会获取text
//参数:无
//返回值:相邻的下一个元素,可能为text
let p3 =document.getElementById("p-3");
console.log(p3.nextSibling.nextSibling);
console.log(p3.nextElementSibling);
//elem.previousSibling:元素elem同一树的上一个节点
//elem.previousElementSibling:元素elem同一树下的上一个元素不会获取text
//参数:无
//返回值:同一树下的上一个元素,可能为text
console.log(p3.previousSibling.previousSibling);
console.log(p3.previousElementSibling);

1.3添加移除元素

<div id="div-id">
<p class="cla-p">移除我</p>
</div>

//添加元素必须添加一次创建一次
//document.createElement("标签名")
//用处:创建元素节点
//参数:节点名
//返回值:节点值
let p = document.createElement("p");
console.log(p);
//document.createTextNode("")
//用处:创建文本值
//参数:文本值
//返回值:文本值
let p_text = document.createTextNode("我要添加进去");
console.log(p_text);
//elem1.appendChild(elem2)
//用处:将elem2添加进去elem1中.
//参数:添加的值
//返回值:文本值
p.appendChild(p_text);
let div = document.getElementById("div-id");
div.appendChild(p);
//elem.remove()
//用处:移除elem元素
//参数:无
//返回值:无
let cla_p = document.getElementsByClassName("cla-p")[0];
cla_p.remove();
//elem.removeChild(elem2)
//移除elem的子节点elem2
div.removeChild(cla_p);

1.4更改/获取元素属性

<input type="text" name="text">

//获取元素属性
//1.elem.属性名
let input = document.getElementsByTagName("input")[0];
console.log(input.name);
//2.elem.getAttribute("属性名")
console.log(input.getAttribute("name"));
//更改元素属性
//1.elem.属性名=属性值
input.name="text1";
console.log(input.name);
//2.elem.setAttribute("属性名","属性值");
input.setAttribute("name","text2");
console.log(input.getAttribute("name"));
//移除属性
//elem.removeAttribute("属性名");
input.removeAttribute("name");
console.log(input.name);
//className设置class的值
div.className="cla";

1.5更改/获取文本值

<div id="box">
	<p>我是一个p</p>
</div>

let div = document.querySelectorAll("#box")[0];
console.log(div);
//elem.innerHTML
//获取或修改元素的html内容
//获取
console.log(div.innerHTML);
//修改
div.innerHTML="we are family";

//elem.outerHTML
//获取或修改元素的html内容包括父级标签
//获取
console.log(div.outerHTML);
//修改
div.outerHTML="我们是朋友";

//elem.innterText
//获取或修改元素的纯文本
let p = document.querySelectorAll("p")[0];
console.log(p);
p.innerText="你好";

2.Dom操作css

<div id="div-id">
</div>

#div-id{
	width:200px;
	height:200px;
	border:1px solid;
}

// 单个设置
//js对象.style.样式名="样式值"
//样式名不能有-用驼峰命名法
let div=document.querySelector("div");
console.log(div);
// div.style.backgroundColor="blue";
//设置多个样式
//js对象.style.cssText="css样式字符串"
div.style.cssText="background-color:blue;width:800px;"