HTML基础之DOM操作
什么是DOM?
Document Object Modle 文档对象模型
DOM只为操作HTML代码
***************************************************************************************************************
1、获取整个页面元素
document：把我们看到的html页面代码变成一个对象模型
2、直接获取标签
根据ID获取元素是最精确的定位方式，返回结果是唯一的，需要理清层级关系
document.getElementByID('inner') //获取id为i1的标签
根据以下方法获取标签数组，返回结果是一个list，并不唯一，在标签元素少的时候使用
document.getElementsByTagName('input') //根据标签名称获得标签数组
document.getElementsByClassName('inner') //根据class属性获取标签的数组
document.getElementsByName('username') //根据name属性获取标签数组
3、间接获取标签
document.getElementByID('inner').children; //所有子标签
document.getElementByID('inner').children[1];
document.getElementByID('inner').children[1].value='123123' //修改值
document.getElementByID('inner').parentElement; // 父节点标签元素
document.getElementByID('inner').parentElement.nextElementSibling.children[2]
document.getElementByID('inner').parentElement.nextElementSibling.children[2].value='321321'//修改值
document.getElementByID('inner').firstElementChild; //第一个子标签元素
document.getElementByID('inner').lastElementChild; //最后一个子标签元素
document.getElementByID('inner').nextElementSibling; //下一个兄弟标签元素
document.getElementByID('inner').previousElementSibling; //上一个兄弟标签元素
***************************************************************************************************************
4、定义一个变量接收定位到的内容，方便后边操作使用
var demo =document.getElementByID('s1')
5、文本内容操作：innerText / innerHTML
1）、修改
demo.innerText //获取标签内容
demo.innerText='innertext修改' //获取标签内容
demo.innerHTML //获取标签内容
demo.innerHTML='<input>' //获取标签内容
demo.innerText='<input>' //获取标签内容
以上二者的区别：
innerText：修改的是标签中的文本内容，将含有HTML代码的字符串以文本形式进行上传展示
innerHTML：可以对标签中的所有内容，包含HTML代码，进行修改，可以将含有HTML代码的字符串变成一个可见的标签进行展示
2)、修改select：value属性
var demo =document.getElementByID('s1')
通过value操作一定是option中value属性对应的值
demo.value //获取input、textarea参数
demo.value='beijing' // 对input、textarea的内容进行赋值
3)、通过角标进行定位
demo.selectedIndex // 获取select标签的选项下标，展开select标签：从上到下，依次定位0，......,n。
demo.selectedIndex=1 // 通过下标更改select的选项
***************************************************************************************************************
6、操作样式
var demo =document.getElementByID('clst')
通过'标签class属性定位，格式是字符串类型，修改时通过空格间隔css选择器'
demo.className='inner tmp1' //通过已知属性名inner定位元素，通过已给的tmp1属性添加样式。
以'列表形式展示所有样式'
demo.classList //获取标签所有属性，以列表形式展示
demo.classList.remove('tmp1') //删除属性
demo.classList.add('tmp2') //增加属性
以'style操作样式'
操作样式的粒度更加细化，操作单个样式属性，相当于在标签中增加一个style属性，
demo.style.backgroundColor='pink'
****************************************************************************************************************
7、操作属性
var demo =document.getElementByID('r1')
demo.removeAttribute('value')--删除内容
demo.setAttribute('placeholder','请输入用户名')--修改属性值
demo.removeAttribute('placeholder')--删除属性
demo.placeholder='请输入用户名'--修改属性值
****************************************************************************************************************
8、创建标签
方法1：添加一个子标签
var input =document.createElement('input') //动态的创建标签
input.setAttribute('type','text') //添加属性值
input.setAttribute('value','默认值') //添加属性值
var div =document.getElementByID('create')
div.appendChild(input) //给div添加一个子标签
方法2：以字符串创建标签
var str='<input type="text">'
var div =document.getElementByID('create')
div.insertAdjacentHTML('beforeEnd',create) //插入到获取到标签的子标签的后面
div.insertAdjacentHTML('afterBegin',create) //插入到获取到标签的子标签的前面
div.insertAdjacentHTML('afterEnd',create) //插入到获取到标签的后面
div.insertAdjacentHTML('beforeBegin',create) //插入到获取到标签的前面
删除操作2中方法
innerHTML
div.removerChild(div.lastElementChild) //删除div中最后一个子元素，形参接受子对象
******************************************************************************************************************
9、其他操作
location.href //获取当前的url
location.reload() //刷新
location.href = location.href //刷新
******************************************************************************************************************
