学习记录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

二：操作元素

1 innerHTML与innerText

输入利用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")  删除赋予的属性

style.backgroundColor

在css中样式可以通过【-】进行连接，在JavaScript中，所有的【-】都被去掉，【-】后面的第一个字符大写

四：创建标签

利用字符串的方法进行定义变量
var inputstr = '<input type ="text" value="郭等等通过字符串创建的标签" >'
定位到当前创建标签的creat
creat = document.getElementById("create")  
父级标签内添加一个子标签字符串 
create.insertAdjacentHTML("beforeEnd",inputstr)

insertAdjacentHTML(where,tagStr): 父级标签内添加一个子标签字符串
beforeBegin: 插入到获取到标签的前面
afterBegin: 插入到获取到标签的子标签的前面
beforeEnd: 插入到获取到标签的子标签的后面
afterEnd: 插入到获取到标签的后面

学习记录013-HTML基础dom操作

猜你喜欢