day10-2 DOM操作
DOM(document object model 文档对象模型) 通过dom获取的元素就一定能修改
一个web页面的展示，是有html标签组合的一个页面，dom对象实际就是将html标签转换成了一个文档对象。可以通过dom对象中js提供的方法，找到html的各个标签。通过找到标签就可以操作标签使页面动起来，让页面动起来。
目的：
操作页面上的任意的一个标签
在网页中 按F12 .找到console 。在里面输入document，然后回车。document下就代表整个页面。
1.直接获取标签
document.getElementById('inner1') 通过id精准定位
document.getElementsByClassName("inner")通过class进行定位，不是唯一，可定位多个
在js中定义一个变量用var 去定义一个变量
文本操作内容
var el =document.getElementById('inner1')
el.innerText el.innerHtml
1.innerText、innerHtml: 只是打印标签内的文本信息，HTML代码会被省略。innerHtml则全部打印。修改时,通过innnerText只会变为一个字符串，通过innerHtml则可以变为一个标签
el.innerText='<a href="http://www.baidu.com">跳转到百度</a>' 传什么进去都是文本展示出来。
el.innerHTML='<a href="http://www.baidu.com">跳转到百度</a>' innerHtm会自动去解析符合html标签规则的。
------------------------------
2.间接获取标签：
el.parentElement //父节点标签元素 el.children //所有子标签 el.children[1] 拿到改标签下的第二个标签el.children[1] .value=123 把输入框的内容写为123.
el.firstElementChild // 第一个子标签元素 el.lastElementChild // 最后一个子标签元素
el.nextElementSibling // 下一个兄弟标签元素 el.previousElementSibling // 上一个兄弟标签元素
3.获取到标签后，可以改变值通过value。对 标签 input select。
innerText innerHtml 去改变标签内的值。
select框的默认值。
-------------------------------------------------------------------
1.操作属性（setAttribute removeAttribute）
2.操作样式表，操作标签的class属性。前提有样式表（className=‘inner tmp1’ classList.add() classList.remove()）
3操作style,实际操作的是标签的style属性，随便弄。（e.style.xxx）
4.创建标签(对象创建 obj=createElemet（‘input’） obj.setAttribute() 添加目标元素中，实际是添加子元素，先定位父元素 父元素.appendChild() 字符串创建 str='<input>' insertAdjacentHTML(where,str))
操作样式
className: 字符串形式的class名
classList: 列表形式的class名
add(): 对列表的样式进行增加
remove(): 对列表的样式进行删除 el.classList.remove('tmp2')
更加细化的去操作样式
el.style.display='none' 代表隐藏某一个元素。复原出来 el.style.display='block'
el.style.backgroundColor='red' el.style.width='20px'
style.xxx: 操作样式的粒度更加细化，操作单个样式属性，相当于在标签中增加一个style属性
--------------------------------------------------
操作标签属性：
setAttribute(key,value): 设置属性，在标签中添加属性或自定义属性
removeAttribute(key): 删除属性，在标签中删除指定属性
attributes: 获取标签的所有属性
-------------------------------------------
创建标签：
createElement(tagName): 通过DOM创建一个标签对象
appendChild(tagObj): 在父级标签内添加一个子标签对象
同时可以直接定义一个字符串去定义为标签,去创建标签
var str="<input type='text' value=123>"
insertAdjacentHTML(where,tagStr): 父级标签内添加一个子标签字符串
beforeBegin: 插入到获取到标签的前面
afterBegin: 插入到获取到标签的子标签的前面
beforeEnd: 插入到获取到标签的子标签的后面
afterEnd: 插入到获取到标签的后面
----------------------------------------------------
js的程序语言
js是脚本语言
script标签主要用来写js代码，或者引入js的文件。 导入script的位置可以在head中也可以在boday中，由于代码从上往下执行，在head中可能会卡在这里，影响用户体验。
导入的script的位置一般都放在</body>的前面
--------------------------------------
写个简单的登录.if..else条件判断。
在js中 1==1和1=='1'是没有区别的，只判断值，不判断类型。要想判断类型得输入1===1.
---------------------
js中的for循环。两种写法。
可以循环数组，也可以 循环字符串 var s='你是以' 也可以循环字典，字典循环只能用第一种方法 var d={'name':'gss','age':18}
while (1==1){} 循环和python一样
swith判断：
----------------------------
匿名函数
基本函数是：function f(){} f()
---------------------------
声明变量
const age=15 ；age=14会报错，常量是不能被修改的,也没有预解析
let age=100 let声明的变量没有预解析
var age=100 var 声明的变量有预解析
------------------------
