一个节点对象初始就有很多属性和方法,这些属性和方法是JavaScript原本就赋予给这个对象的,我们要做的就是操作这些属性或者方法,那操作就分读取和写
一.JavaScript标签属性
标签属性是我们学过的一些标签属性 id class name type等等的
1.标签属性(合法标签属性) id class name...
1.操作方式通过链式 点操作
<div id="wrap" class="content"></div>
<script>
let oDiv = document.getElementsByTagName("div")[0]
oDiv.id = "list" //更改元素的ID名
</script>
2.特殊属性 class 操作的时候是 className
src属性不能拿来做判断
color不能做判断
<div id="wrap" class="content"></div>
<img src=""></img>
<script>
let oDiv = document.getElementsByTagName("div")[0]
oDiv.className = "list" //更改元素的class类名
let oImg = document.getElementsByTagName("img")[0]
console.log(oImg.src)//我们添加的是一个相对路径,打印的却是一个绝对路径
</script>
3.变量被赋值这个对象节点之后,这个节点对象其他属性发生改变,这个变量还是代表这个获取的对象
<div id="wrap" class="content"></div>
<script>
let oWrap = document.getElementById("wrap")
oWrap.className = "list" //更改元素的class类名
oWrap.innerHTML = 123
let aContent = document.getElementsByClassName("content")
aContent.id = "text"
aContent.innerHTML = 456
</script>
4.变量被赋值这个对象节点之后,这个节点对象此属性发生改变
（1）静态获取 getElementById querySelector querySerletorAll
改变此对象属性值之后,获取该对象的变量依然可以使用,不会因为改变赋值对象节点对应属性而无法使用
<div id="wrap" class="content"></div>
<script>
let oWrap = document.getElementById("wrap")
oWrap.id = "list"
oWrap.innerHTML = 123
</script>
（2）动态获取 getElementsByClassName getElementsByTagName getElementsByName
改变此对象属性值之后,获取该对象的变量不可以使用,会因为改变赋值对象节点对应属性而无法使用
<div id="wrap" class="content"></div>
<script>
let oContent = document.getElementsByClassName("content")[0]
oWrap.className = "text"
oWrap.innerHTML = 123//不会生效
</script>
动态获取解决办法：
转换地址 单独处理放在一个变量中
<ul>
<li class="list"></li>
<li class="list"></li>
</ul>
<script>
let aList = document.getElementsByClassName("list")
let x = aList[0]
aList[0].className = "text"
aList[0].innerHTML = 123
x.innerHTML = 456
</script>
2.标签自定义属性（不合法属性）
标签不具有的属性,程序员人为添加的属性
<div id="wrap" class="content" marray="no"></div>
<script>
let oContent = document.getElementsByClassName("content")[0]
oContent.age = "18"
console.log(oContent.marray) //undefind
</script>
（1）添加自定义属性 setAttribute("属性名","值")
<div id="wrap" class="content"></div>
<script>
let oContent = document.getElementsByClassName("content")[0]
oContent.setAttribute("age",18)
</script>
（2）得到自定义属性 getAttribute("属性名")
<div id="wrap" class="content" marray="no"></div>
<script>
let oContent = document.getElementsByClassName("content")[0]
console.log(oContent.getAttribute("marray"))
</script>
（3）移除属性名 removeAttribute("属性名")
<div id="wrap" class="content" marray="no"></div>
<script>
let oContent = document.getElementsByClassName("content")[0]
oContent.removeAttribute("marray")
</script>
二、JavaScript对象属性
对象属性是我们JavaScript内置的一些属性,像我们的 innerHTML 各种事件等等
1.对象自带属性
console.dir() 查看对象自带的js属性
<div></div>
<script>
let oDiv = document.getLementsByTagName('div')[0]
console.dir(oDiv)//查看对象自带的JS属性
</script>
2.对象自定义属性
内置的JS对象上不具有的,我们自己添加的,通过console.dir也是能打印出来的
对象.属性名 = 值
<div></div>
<script>
let oDiv = document.getLementsByTagName('div')[0]
oDiv.love = "dajia"
console.dir(oDiv)//查看对象自带的JS属性
</script>
三.+号的初步认识
+号
1.数字相加还是数字（number）
2.字符串相加叫拼接
3.+= X=X+1
X+=1
4.变量在已经赋值使用时 不能加引号包裹(字符串)
5.字符串和变量拼接 引号一定要前后配对 变量前后是加号作为分割点
ES6：
模板字符串
`内容${变量}内容`
<style>
#wrap{
width: 100px;
height: 100px;
background-color:pink;
}
</style>
<div id="wrap"></div>
<script>
let x = '1'
let y = 2
console.log(x+y)
let oWrap = document.getElementById("wrap")
oWrap.onclick = function() {
//oWrap.innerHTML += 123
//oWrap.innerHTML += "<p></p>"
//oWrap.innerHTML += "<p>" + y + "</p>"
//oWrap.innerHTML += "<p style= 'width:200px;background-color:red;'>" + y + "</p>"
oWrap.innerHTML += `<p style= "width:200px;background-color:red;">${y}</p>`
}
</script>
四.css样式操作
1.改变元素样式方法外部样式 内部样式 行内样式
外部样式:单纯的JS不能操作外部样式
内部样式:JS可以操作HTML页面任何元素,可以操作style标签
行内样式:JS操作元素样式最常用方法,标签的自带属性style 通过点操作 元素.style.css属性 = "属性值"
<div id="wrap">123</div>
<script>
let oWrap = document.getElementById("wrap")
oWrap.style.color = "red"//单个属性
oWrap.style.cssText = "font-size:25px;font-weight:bold;"//多个属性
</script>
注意:
1.分样式用驼峰写法
<script>
oWrap.backgroundColor = "blue"
</script>
2.个别样式有兼容以及保留字css属性
<script>
oWrap.style.cssFloat = "right"
</script>
2.通过添加类名改变样式
可以在内部样式把css样式写好,通过添加类名的方式
<style>
#wrap{
width: 100px;
height: 100px;
background-color:pink;
}
</style>
<div id="wrap"></div>
<script>
// oWrap.onclick=function(){
// oWrap.className="content"
// }
==
oWrap['onclick']=function(){
oWrap.className="content"
}
</script>
