标签：text 修改 查询 info ast main 识别 alt where
DOM（Document Object Model）
概念：一个WEB页面的展示，是由html标签组合成的一个页面，dom对象实际就是将html标签转换成了一个文档对象，可以通过dom中提供的api方法，找到html的各个标签，通过找到标签就可以操作标签使页面动起来，让页面动起来。
一：查找元素
在一个页面中，如何拿到整体的页面，从而当作一个对象来进行操作呢？
页面右击-检查-console-输入：document-当前页面即可被当作一个对象进行操作
在document中的几种定位方式：
第一种：通过元素的ID进行定位；这种定位方式的前提是需要获取到元素的id
document.getElementById(‘这里是div的id这里是div的id这里是div的id‘)
返回信息：
<div class=?"inner" id=?"inner1">?<span>?input: ?</span>?<input type=?"text" placeholder=?"div的id是inner1">?</div>?
第二种： 通过class进行定位；
document.getElementsByClassName("这里是class的值这里是class的值这里是class的值")
第三种：通过div标签进行定位
document.getElementsByTagName("div")
找元素
step01：可以先把通过定位元素的某种方法赋予一个变量
var demo = document.getElementById(‘inner1‘)
step02:此时demo即是获取到的div信息；可通过变量赋予的方法去进行相应的操作，按照查看列表的方式去看有哪些元素
输入：demo.children
输出：HTMLCollection(2) [span, input]
0: span
1: input
length: 2
__proto__: HTMLCollection
可以通过查询列表元素的方法去获取，比如获取span的信息，我们知道span在这里的角标是0，那么就是输入：
输入：demo.children[0] 获取到的span的信息：<span>?input: ?</span>?
也可以利用变量方法去获取知晓第一个和最后一个元素是什么
demo.firstElementChild
<span>?input: ?</span>?
demo.lastElementChild <input type=?"text" placeholder=?"div的id是inner1">?
通过当前的标签去获取兄弟标签的值，前提：假如当前的标签已经赋予了一个变量demo
获取当前标签的下一个兄弟标签：
获取下一个兄弟标签的div值：demo.nextElementSibling 输出：<div class=?"inner" id=?"inner2">?<span>?多行文本: ?</span>?<textarea onfocus id=?"t1" placeholder=?"id是t1">?</textarea>?</div>?
获取当前标签的上一个兄弟标签的div值：
demo.previousElementSibling <h5>?value: 对input、textarea标签的内容进行获取或修改?</h5>?
查找当前标签的父级标签，也就是上级标签：
demo.parentElement
二：操作元素
输入利用innerText的方法：demo.innerText = "<input>" "<input>" demo 输出：<div class=?"inner" id=?"inner1">?<input>?</div>? 输入利用innerHTML的方法：demo.innerHTML = "<input>" "<input>" demo 输出：<div class=?"inner" id=?"inner1">?<input>?</div>?
区别：使用innerHTML和innerText的时候，如果负值的是符合浏览器能够识别的标签规则的话，那么HTML就会直接渲染成标签，而Text一 Iran会当成字符串
实现的效果如下，在框内被浏览器渲染成input的标签：
进行框内参数的获取：
demo.lastElementChild.value
进行框内参数值的修改或者填写：
demo.lastElementChild.value = "这里是框内的内容"
2 textarea标签
var textarea = document.getElementById("t1") 通过id获取到定位，赋予变量 textarea.value = ‘123‘ 给textarea负值：123
textarea.value 查询textarea的值
3 select下拉框标签
var select = document.getElementById("s1") 定义变量
select.value 查看当前下拉框里面的值
select.value = "shenzhen" 修改框内值，如果修改的是不存在的，那么就是空
select.selectedIndex = 2 根据Index修改里面的值，如果是没有的index返回空
三 操作样式表-两种方法
前提：两个样式表，tmp1:红色；tmp2:黄色；默认有inner的样式 id=clst
第一种：通过更改标签class属性
var clst = document.getElementById("clst") 定义变量
clst.className = "inner tmp1" 操作更改已知属性样式
第二种：通过修改style标签进行内容的重写
clst.classList 拿到所有的属性，是一个列表
clst.classList.remove("tmp1") 操作列表里的样式：tmp1
clst.classList.add("tmp2") 通过列表进行添加样式
clst.style 获取到当前元素对应的css样式
clst.style.backgroundColor = "black" 通过style属性进行修改
clst.style.width = "100px"
clst.removeAttribute("style") 删除赋予的属性
四：创建标签
利用字符串的方法进行定义变量 var inputstr = ‘<input type ="text" value="郭等等通过字符串创建的标签" >‘ 定位到当前创建标签的creat creat = document.getElementById("create") 父级标签内添加一个子标签字符串 create.insertAdjacentHTML("beforeEnd",inputstr) insertAdjacentHTML(where,tagStr): 父级标签内添加一个子标签字符串 beforeBegin: 插入到获取到标签的前面 afterBegin: 插入到获取到标签的子标签的前面 beforeEnd: 插入到获取到标签的子标签的后面 afterEnd: 插入到获取到标签的后面
标签：text 修改 查询 info ast main 识别 alt where
原文地址：https://www.cnblogs.com/guodengdeng/p/11438553.html
