原生JavaScript操作DOM

原生js操作DOM

网页加载时，浏览器会创建页面的文档对象模型 Document Object Model

通过js操作html元素，查找html元素：

• 通过id查找

var doc = document.getElementById('idName')

• 通过class 类名查找

var doc = document.getElementsByClassName('className')

• 通过标签名查找

var doc = document.getElementByTagName('tagName')

通过js改变html元素的内容

• 改变HTML输出流

document.write()可直接向html输出流直接写内容

不要在文档加载之后使用document.write(). 会覆盖该文档

document.write()

• 改变html内容

document.getElementById('idName').innerHTML = "html内容"

• 改变html属性

document.getElementById(id).attribute='new value'
//例如：
document.getElementById('idNmame').src = 'location.png'

通过js改变html元素样式

document.getElementById(id).style.property = new style
//例如
document.getElementById('idName').style.color="red"

通过js对html事件做出反应

<button class="btn">button</button>

document.getElementsByClassName('btn').onclick=function(){
    // do something
}

通过js添加或删除html节点

要想添加一个新元素，就得先添加元素节点，再给元素追加内容

var p = document.createElement("p");
var node = documnet.createTextNode("这是一个段落")  //p.innerText = "这是一个段落"
p.appendChild(node)
var ele = document.getElementById("div")
ele.appendChild(p)

1. 创建新的<p>元素
2. 给p元素添加文本/创建文本节点
3. 向已有得元素追加新元素