学习记录013-HTML基础dom操作
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: 插入到获取到标签的后面