**innerText：**修改元素内容
<body>
<div></div>
<p>
我是文字
<span>123</span>
</p>
<script>
// innerText 和 inner HTML 的区别
// 1. inner Text 不识别html 标签 非标准 去除空格 和换行
var div = document.querySelector("div")
div.innerText = '今天是：2020';
**inner HTML：**修改元素内容
// 2. inner HTML 识别 HTML 标签 W3C标准 保留空格和换行
div.innerHTML = "<strong>今天是</strong>：2020";
// 这俩个属性是可读写的 可以获取元素里面的内容
var p = document.querySelector("p");
console.log(p.innerHTML);
**修改的元素名字.属性： **修改元素属性``
// 2.注册事件
zxy.onclick = function(){
img.src = "images/u=2637309453,136156531&fm=26&gp=0.jpg" // 修改元素属性
img.title= "张学友" // 修改元素属性
}
修改元素的名字.style.需要修改的样式: 修改元素样式属性
// 获取元素
var div = document.querySelector("div");
// 绑定事件 操作元素
div.onclick = function(){
// div.style.backgroundColor = "bule" div.style 里面的属性 采取驼峰命名法
this.style.backgroundColor = "purple" // 修改元素样式
this.style.width = "250px"; // 修改元素样式
// js 里面的样式采取驼峰命名法 比如 fontSize backgroundColor
// js 修改 style 样式操作 产生的是行内样式 css权重比较高
}
（特殊） 表单元素的属性操作
<body>
<button>按钮</button>
<input type="text" value="输入内容" >
<script>
// 1.获取元素
var btn = document.querySelector("button");
var input = document.querySelector("input");
// 2.注册事件 处理程序
btn.onclick = function(){
// input.innerHTML = "点击了" 这个是普通盒子 比如 div 标签里面的内容
// 表单里面的值 是通过 value 来修改的
input.value = "被点击了"
// 如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮被禁用
btn.disabled = "true" //禁用
this.disabled - "true" // this是指向事件函数的调用者 btn
}
</script>
</body>
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)