day24_原生js操作

1.DOM操作
DOM(document object mode的缩写) - 文本对象模型
a.documrnt：js会将整个当前网页转换成一个js对象叫document
如果想要通过js获取网页中的内容，必须通过document来获取
(这个系统是系统创建的，会使用就行)
b.document结构：是一个树结构，树下面就是各种节点(Node，是js中element对象指向的html中的标签)；
Element对象有哪些属性，就看Element对应的标签有哪些html属性
(节点即标签)
2.BOM操作

3.事件

DOM节点操作

这是段落




这是div
这是段落2


...


标题1
标题2

1.获取节点

1.1直接获取节点

a)通过id值来获取节点
补充：HTML标签在js中全部都是对象，标签的属性就是对象的属性；
双标签的内容对应的是innerText和innerHtml属性
innerHtml指向的是内容的文本和标签；innerText指向内容中的文本(自己和所有子标签的文本)

pNode = document.getElementById('p1')
console.log(pNode, typeof(pNode), pNode.id, pNode.innerText, pNode.innerHTML)

divNode = document.getElementById('div1')
console.log('html:',divNode.innerHTML)
console.log('text:',divNode.innerText)

//divNode.innerHTML = '这是超链接'
//divNode.innerText = '这是超链接'

b) 通过class值获取节点：document.getElementsByclassName(class属性) - 返回一个数组

c1NodeArray = document.getElementsByClassName('c1')
console.log(c1NodeArray, typeof(c1NodeArray))

//根据下标获取元素
imgNode = c1NodeArray[1]
imgNode.title = '路飞'

c) 通过标签名获取节点：document.getElemensByTagName（标签名) - 返回一个数组

pNode = document.getElementsByTagName('P')
console.log(pNode)

d)通过name属性获取节点(被淘汰)：document.getElementsByName(name属性值)

// document.getElementsByName()

1.2获取父节点

// 子节点.parentElement - 获取指定节点对应的父节点
bodyNode = pNode.parentElement
console.log(bodyNode)

1.3获取子节点(所有的) - 返回数组

a) 获取所有的子节点：节点.children - 获取所有的子节点(不会获取孙子节点)

children1 = bodyNode.children
console.log(children1)

// children2 = bodyNode.childNodes
// console.log(children2)

b) 获取第一个子节点：节点.firstElementChild

firstNode = bodyNode.firstElementChild
console.log(firstNode)

c) 获取最后一个子节点

lastNode = bodyNode.lastElementChild
console.log(lastNode)

2.创建节点

document.createElement(标签名) - 创建指定标签对象的节点对象
注意：创建的节点在添加到网页中之前是不会显示的

inputNode = document.createElement('input')

3.添加节点

div2Node = document.getElementById('div2')
// 节点1.appendChild(节点2) - 在节点1的最后添加节点2
div2Node.appendChild(inputNode)

// 节点1.insertBefore(插入节点, 节点3) - 在节点1中的节点3前插入节点
div2Node.insertBefore(inputNode, div2Node.firstElementChild)

/*上面添加节点添加了两次，但是实际上只能添加一次节点，因为节点只有一个*/

4.拷贝节点
节点.cloneNode() - 赋值指定节点，产生一个新的节点

inputNode2 = inputNode.cloneNode()
inputNode2.placeholder = '新节点'
div2Node.appendChild(inputNode2)

5.删除节点
a) 节点1.removeChild(节点2) - 删除节点1中的子节点节点2

div2Node.removeChild(div2Node.firstElementChild)

b) 节点.remove() - 删除指定节点(节点里面的子节点也会被删除)

div2Node.remove()

练习

用js将table的背景色设置为随机颜色
将第一列的文字颜色全部变成红色
在最后插入一行表格，内容分别是41,42,43

BOM操作

定时事件

自动跳转

5秒后自动跳转

11	12	13
21	22	23
31	32	33