JavaScript DOM 基础操作

一、获取元素的六方式

document.getElementById('id名称')   //根据id名称获取

document.getElementsByclassName('元素类名') //根据元素类名获取   返回值：伪数组

document.getElementsByTagName('元素类名')   //根据元素标签获取   返回值：伪数组

document.querySelector('选择器')   //根据选择器获取第一个元素

document.querySelectorAll('选择器') //根据选择器获取所有元素      返回值：伪数组

二、操作元素内容

1.获取元素文本内容

格式：

获取内容：元素 . innrtText

修改内容：元素 . innerText="修改的内容"

//点击div盒子改变里面的文本

<div Style="background:red" id="JD">我是旧的内容</div>

//获取元素(通过标签选择器来获取内容)

var ele=document.querySelector('div')

//获取元素(通过id获取元素)

var btn=document.getElementById('JD')

//获取元素文本内容并输出

console.log(ele.innerText)

//给div一个点击事件(这里用的是id获取到的div元素)

btn.onclick=function(){

    //重新为div设置新的内容

    ele.innerText="我重生了"

}

2.操作元素超文本内容（直接修改代码）

格式：

获取内容：元素 . innrtHTML

修改内容：元素 . innerHTML="新的标签"

//点击div盒子把div变成p标签

<div style="background:red" id="JD">我是div盒子</div>

//获取元素(通过标签选择器来获取内容)

var ele=document.querySelector('div')

//获取元素(通过id获取元素)

var btn=document.getElementById('JD')

//获取元素的标签里的内容以文本的方式并输出

console.log(ele.innerHTML)

//给div一个点击事件(这里用的是id获取到的div元素)

 btn.onclick=function(){

    //把div盒子变成p标签

    ele.innerHTML="<p>我变成了p标签了，嘤嘤嘤！</p>"

}

三、操作元素属性

1.原生属性（type、id、src）

格式：

获取属性：元素 . 属性名

设置属性：元素 . 属性名=”属性值“

//点击图片改变图片背景链接达到来回切换背景的效果

      //html

<img scr="../img/bg1.jpg" id="bg">

      //JavaScript

//获取元素(通过id获取元素)

var btn=document.getElementById('bg')

//获取元素scr的路径并输出

console.log(btn.src)

var tes=0    //控制切换的图片

//给img一个点击事件(这里用的是id获取到的img元素)

 btn.onclick=function(){

     if(tes===0){

     btn.src="../img/bg2.jpg"

      tes=1

     }else{

      btn.src="../img/bg1.jpg"

         tes=0

}

2.定义和操作自定义属性

（1）定义属性

定义格式：data-*

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

</head>

<body>

<div style="wight:500px;height:500px;background:black"  data-a="p1" id="ab"> p1

  <div style="wight:150px;height:150px;background:green" data-a="p2">p2</div>

  <div  style="wight:150px;height:150px;background:blue" data-a="p3">p3</div>

</div>

<script>

		//获取到父的div元素

		var divab=document.getElementById("ab")

		//点击点击子元素父元素的事件也会被触发

		divab.onclick=function(e){

			//用自定义属性来判断点的是子元素，还是父元素。

         if(e.target.dataset.a==="p1"){

	     console.log("p1")

       }

            if(e.target.dataset.a==="p2"){

	      console.log("p2")

       }

            if(e.target.dataset.a==="p3"){

	     console.log("p3")

       }

     }

    </script>

</body>

</html>

（2）操作自定义属性

操作自定义属性格式：

获取属性：元素 . getAttribute("属性名")

设置属性：元素 . setAttribute("属性名"，”属性值“)

删除属性：元素 . removeAttribute("属性名")

//html

<div id="tes" data-cs="Hello Wrold">自定义属性测试</div>

//JavaScript

//获取元素

var ter=document.getElmentById("tes")

//获取自定义属性并输出

console.log(ter.getAttribute(CS))

//重新给自定义属性CS赋值

ter.setAttribute("CS","Hello man")

//删除自定义属性

ter.removeAttribute("CS")

四、操作元素类名

格式：

获取类名：元素 . className

设置类名：元素 . className="新类名"

//点击div盒子和实现改变背景颜色

//设置类名改变div的背景色

.divBgRed{

background:red;

}

.divBgBlue{

background:blue;

}

<div class="divBgRed" id="divid">我是可以变颜色的盒子</div>

//获取div的元素

var divid=document.getElementById("divid")

divid.onclick=function(){

    divid.className="divBgBlue"

}

五、操作元素行内样式

格式：

获取行内样式：元素 .style . 样式名

设置行内样式：元素 . style.样式名="样式值"

//输出和修改行内样式

<div style="background-color:red;width=100px" id="divid">我是红色的div盒子</div>

var tre=document.getElementById("divid")

console.log(tre.style.backgroundColor)    //当行内样式有短横线时，把短横线去掉变成驼峰写法

tre.onclick=function(){

    tre.style.background="blue"

    tre.style.width="500px"

}

六、获取非行内样式

格式：window . getComputedStyle(元素) . 样式名

注意：行内样式和非行内样式都可以获取

七、节点操作(标签)

1.创建结点（标签）

格式：document.creatElement("标签名称")

var div=document.creatElement("div")

var p=document.creartElement("p")

2.插入结点（标签）

格式：

**父节点的元素 . appendChild(子节点) ** //默认在最后插入

父节点元素 . insertBefore(要插入的节点，哪一个你节点的前面)

<<body>

	<div>

		<span>我是span标签</span>

	     <ul>我是ul标签</ul>

	</div>

<script>

//问题1：在ul标签里面的最后位置插入li标签

	//获取ul标签的元素

var ul=document.querySelector("ul")

//创建li标签

var li=document.createElement("li")

//在ul标签里插入li标签

ul.appendChild(li)

//问题2：在div里的span标签前面插入入一个p标签

	//获取div父元素

	var div=document.querySelector("div")

	//获取要插入位置的后一个标签的元素

	var span=document.querySelector("span")

	//创建要插入的p标签

	var p=document.createElement("p")

	//在相应位置插入p标签

	div.insertBefore(p,span)

</script>

</body>

3.删除节点（标签）

格式：

父节点元素 . removeChild(子节点)

想删除节点元素 . remove()

<body>

 <div>

    <span>标签</span>

 </div>

</body>

<script>

    //获取父标签的元素

  var div=document.querySelector("div")

  //删除span标签

  div.removeChild(span)

    //获取要删除span标签的元素

   var span=ocument.querySelector("span")

   //删除span标签

   span.remove()

</script>

4.替换节点（标签）

格式：

父节点元素 . replaceChild(换上节点，换下节点)

<body>

 <div>

    <span>标签</span>

 </div>

</body>

<script>

    //获取span标签的父元素

    var div=document.querySelector("div")

    //创建p标签

    var p=document.creartElement("p")

    //获取span标签的元素

    var span=document.querySelector("span")

    //把span标签替换成p标签，里面的内容不变

    div.replaceChild(p,span)

</script>

5.克隆节点（标签）

说明：就是把想要的标签复制一份，需要结合插入标签才能有用（相对于复制和粘贴）

格式：

想要克隆标签的元素 . cloneNode(是否克隆后代节点)

//问题：把div标签复制一份，并复制里面的子元素

<body>

 <div>

    <span>标签</span>

 </div>

</body>

<script>

    //获取div标签的元素

   var div=document.querySelector("div")

  //克隆div标签并克隆里面的子元素

   var cle=div.cloneNode(true)

   //把复制的div标签插入到原来div后面

       //获取body标签的元素

    var body=document.querySelector("body")

        //插入div标签

    body.appendChild(cle)

</script>