js中的dom：文档对象模型

JavaScript分三部分
dom：文档对象模型
bom：浏览器对象模型
ECMAScript：主要指的是语法，比如声明变量，函数，条件判断，循环等等。

dom:每个html标签都在dom中表示为一个节点（node），节点之间存在父子关系，通过dom，可以使用js编码，来修改网页的结构，内存，样式。

获取dom

获取id：

const div1=document.getElementById("div1")

获取 tag name：
const lis = document.getElementsByTagName('li')

获取class name：
const dans = document.getElementsByClassName('dan')

下面两种方式的性能低下，不建议使用。

const divX=document.querySelector('#div1')
console.log(divX)
const divY=document.querySelector('.dan')
console.log(divY)
const divZ=document.querySelectorAll('.dan')
console.log(divZ)
/*************************************************************************************************************/

访问和修改元素（标签）属性

访问属性

const img=document.getElementById('img')
console.log(img.getAttribute('abc'))
img.src='https://gw.alicdn.com/tfs/TB176rg4VP7gK0jSZFjXXc5aXXa-286-118.png'
console.log(img.src)

html语言里，原先具有的属性，可以被这样获取，如上面的abc这种程序员自拟的属性，要用getAttribute

设置自定义属性

img.setAttribute('abc','cba')

获取/设置文本节点textContent

console.log(dans[1].textContent)
dans[1].textContent='700'

获取/设置标签的html内容（包括标签等，所有） innerHTML

const ul=document.getElementsByTagName('ul')[0]
//console.log(ul.innerHTML)
dans[0].innerHTML='<p>我是p标签</p>'

创建和添加元素

const li=document.createElement('li')

用innerHTML往里添加内容

li.innerHTML='009'
console.log(li)

把li添加到ul里面的最后面

ul.appendChild(li)

在004和005之间，添加一个li，li里面有一个img标签，这个li标签具有id名为div4

const li2=document.createElement('li')
li2.id='div4'
li2.setAttribute('id','div4')//上面方法好，这个麻烦

添加图片方法1:

const img1=document.createElement('img')
img1.src='https://gw.alicdn.com/tfs/TB176rg4VP7gK0jSZFjXXc5aXXa-286-118.png'
li2.appendChild(img1)
console.log(li2)*/

添加图片的方法2：

li2.innerHTML='<img src="https://gw.alicdn.com/tfs/TB176rg4VP7gK0jSZFjXXc5aXXa-286-118.png" width="100" alt=""/>'
console.log(li2)
ul.insertBefore(li2,lis[4])//父级点。insertBefore（新节点，参考节点插入到他前面）