DOM关于元素的获取

DOM(document object model),文档对象模型

DOM把html文档分为一个个节点

1、元素，叫做元素节点

2、属性，叫做属性节点

3、文本，叫做文本节点

4、注释，叫做注释节点

一、document对象

当html文档载入浏览器的时候，会把html文档自动添加到document对象下。

方法和属性

//输出内容到html文档中
document.write("1233");
//writeln之间有空格，writeln后面会添加一个换行符
document.writeln("3556");
document.writeln("3556");

<div class="test">我是div1</div>
<div class="test" id="two">我是div2</div>
<div class="test1" name="div3">我是div3</div>

1、document.querySelector(n);

n:代表css的选择器

用来获取到具有该选择器的第一元素

如果选择有多个同样选择器的元素时，只能获取到第一个具有该选择器的元素。

var test = document.querySelector("div");
console.log(test);

2、document.querySelectorAll(n);

n:代表css的选择器

用来获取到所有具有该选择器的元素，返回一个节点列表（类数组）。

要获取节点列表里面的元素，可以通过数组获取元素的方法

var alltest = document.querySelectorAll("div");
console.log(alltest);

3、document.getElementsByTagName(elementName);

elementName：代表标签名

可以通过标签名来获取到所有具有该标签名的元素，返回值是一个html集合(类数组)。

要获取节点列表里面的元素，可以通过数组获取元素的方法

var allarget= document.getElementsByTagName("div");
console.log(allarget);

4、document.getElementsByClassName(className);

className:代表类名

获取到所有具有该类名的元素，返回值是一个html集合

var ele = document.getElementsByClassName("test");
console.log(ele);
console.log(ele[0]);

5、document.getElementById(idName);

			var div3=document.getElementsByName("div3");
			console.log(div3);

idName：代表id名

用来获取具有该id名的元素，返回值就是该元素。

var two=document.getElementById("two");
console.log(two);

<div class="test1" name="div3">我是div3</div>
var div3=document.getElementsByName("div3");
console.log(div3);

用querySelector和get~方法来获取元素的区别

1、性能不一样

get_{方法比query}方法好

2、query_{静态获取元素；get}动态获取元素

添加监听事件(添加事件句柄)

document.addEventListener(event，callback)；

event：代表我们需要添加的事件类型，比如单击事件(click)，双击事件(dblclick)…

callback：代表一个回调函数，就是我们做的事情都定义在该函数里面。

var div3=document.querySelector(".test1");
div3.addEventListener("click",function(){
	alert("未成年人请在父母陪同下观看");
})

创建元素

document.createElement(elName);

elName:代表需要创建的标签名

添加元素

parent.appendChild(child);

parent:代表需要添加元素的父级元素

child：代表我们创建的元素/文本

创建一个文本节点

document.createTexNode(str);

str：代表我们需要填入的内容

var p = document.createElement("p");
two.appendChild(p);
var txt1 = document.createTextNode("我是通过文本节点创建出来的内容");
var txt2 = document.createTextNode("我是另一个文本");
var isclick = true;
//p.appendChild(txt);
two.addEventListener("click",function(){
				if(isclick){
					p.appendChild(txt1);
				}else{
					p.appendChild(txt2);
				}
				isclick=!isclick;//取反，意思是把我们原来正确的变为错误的，把错误的变为正确的;结果为布尔值
			})
			var str="";
			console.log(!str);

innerText,innerHTML

向元素添加文本内容，再次添加的时候会覆盖掉原来的内容。

区别

innerText不能识别标签

innerHTML可以识别标签

			var h1=document.createElement("h1");
			h1.innerText="我是通过innertext添加的文本";
			console.log(document.body);
			document.body.appendChild(h1);
			h1.addEventListener("click",function(){
				if(isclick){
					h1.innerText="我是点击进来的内容";
				}else{
					h1.innerText="我是通过innertext添加的文本";
				}
				isclick=!isclick;
			})
			
			var h2=document.createElement("h2");
			document.body.appendChild(h2);
			h2.innerHTML="我是通过innerHTML添加进来的";
			h2.innerHTML="<a>再次添加内容</a>";

创建属性节点

document.createAttribute(attr);

attr：代表我们要创建的属性名

给属性节点赋值

通过value给属性节点赋值，例如：clName.value=“h2”；

给元素添加属性节点

setAttributeNode(attrrName);

attrName:代表我们创建的属性节点名。

			var clName=document.createAttribute("class");
			clName.value="h2";
			h2.setAttributeNode(clName);
			
			h2.addEventListener("click",function(){
				clName.value="col";
			})
			
			//document.documentElement返回文档根节点
			console.log(document.documentElement);

获取所以img标签

document.image

			var imgs = document.images;
			console.log(imgs[0].src);
			//点击切换图片
			imgs[0].addEventListener("click",function(){
				if(isclick){
					imgs[0].src="img/dongtai-5.png";
				}else{
					imgs[0].src="img/dongtai-4.png";
				}
				isclick=!isclick;
			})

移除事件句柄

document.removeEventlistener(event,callback);

和添加事件句柄的参数一样

			document.addEventListener("click",myFun);
			function myFun(){
				console.log("添加事件监听");
			}
			document.removeEventListener("click",myFun);