JS DOM 标记变化

 js前端开发 最重要的操作就是让前端界面产生变化 
1.找到需要产生变化的标记
2.修改标记的相关属性或调用相关方法 产生变化

获取DOM对象常用方法

1. document.getElementById() 通过元素的ID属性获取DOM对象，获取的是一个DOM对象。

        <button onclick="byid()">id</button>
		<h1 id="h">我有id属性,来改变我</h1>

		function byid(){
			//1.找标记  标记名需要加引号
			//getElementById() 返回值是标记对象
			 let x = document.getElementById('h')
			 //2.修改属性 或调用方法
			  x .innerText = '改变了'
		}
		

2.  document.getElementByTagName()  通过元素的标签名获取DOM对象，获取的是一组DOM对象

返回数据是数组 要写遍历 需要变化成的属性名都要加引号

3.getElementsByClassName() 通过元素的class属性获取DOM对象，获取的是一组DOM对象。

4.getElementsByName() 通过元素的name属性获取DOM对象，获取的是一组DOM对象。

 5.document.querySelector('div p')  找到一个父标记里面的第一个某子标记 括号里是后代选择器 必须加引号 意为查找div里面的第一个p标签   

6.document.querySelectorAll(div p) 括号里是后代选择器 必须加引号 意为查找div里面的所有p标签 

value

        <!-- value 代表的是输入框里默认内容  -->
		<input type="text" name="n" value="王一博">
		<input type="text" name="n" value="四字弟弟">

 操作DOM对象属性

1. 获得属性

1.1 对象名.属性名

        <button onclick="f1()">获得属性值</button>
		<hr >
		<input type="text" id="a">

            function f1(){
			let h = document.getElementById('a');
			//获得属性
			//1.对象名.属性名
			//获得value属性的值
			let v = h.value;
			
			if(v.length>=6){
				alert('输入正确')
			}else{
				alert('输入非法')
			}

1.2 对象名.getAttribute('属性名')

使用getAttribute()方式无法获得value属性值

            function f1(){
			let h = document.getElementById('a');
			//2.对象名.getAttribute('属性名')
			//特别注意 使用getAttribute()方式无法获得value属性值
			let t = h.getAttribute('type')
			console.log(t);
			

2. 修改属性

2.1 对象名.属性名 = '属性值'

        <button onclick="f2()">修改属性值</button>
		<hr >
		<input type="text" id="b">

        function f2(){
			let h = document.getElementById('b');
			//修改属性
			//1.对象名.属性名 = '属性值'
			h.style.borderColor = 'blue'}

2.2 对象名.setAttribute('属性名','属性值')

        function f2(){
			let h = document.getElementById('b');
			//2.对象名.setAttribute('属性名','属性值')
			h.setAttribute('style','border-color: blue;')
		}
		//此时输入框边框颜色变为蓝色

3. 删除属性

 对象名.removeAttribute('属性名')

        <button onclick="f3()">删除属性值</button>
		<hr >
		<input type="text" id="c" value="我" readonly="readonly">

        function f3(){
			let h = document.getElementById('c');
			//删除属性 对象名.removeAttribute('属性名')
			h.removeAttribute('readonly')
		}//此时输入框只读属性被删除 可以输入

DOM对象中的常用属性

1.innerText属性：纯文本

<button onclick="f1()">innerText</button>
<div class="d1" id="d">
			
		</div>

        function f1(){
			let h = document.getElementById('d')
			//innerText = '纯文本'
			h.innerText = '谁赞成谁反对'
		}//输出结果为文本的'谁赞成谁反对'

2.innerHTML属性:html标签及内容

<button onclick="f2()">innerHtml</button>
<div class="d1" id="d">
			
		</div>

        function f2(){
			let h = document.getElementById('d')
			//innerHTML = 'html代码'
			h.innerHTML = '<b>浩哥反对</b>'
		}//此时输出结果为加粗的浩哥反对

3.className属性：css里class的名字 

<button onclick="f3()">class</button>
<div class="d1" id="d">
			
		</div>

        function f3(){
			let h = document.getElementById('d');
			//h.className = 'd2'
			h.setAttribute('class','d2')
		}//此时div的属性由class d1 变为 class d2

4.style属性:修改或增加属性

        <button onclick="f4()">style</button>
		<div class="d1" id="d">
			
		</div>

        function f4(){
			let h = document.getElementById('d');
			//h.style = 'color:red;font-size:100px'
			h.setAttribute('Style','color:red;font-size:100px')
		}//此时文本变为红色 字符大小变为100px