HTML基础之DOM

DOM（Document Object Model 文档对象模型）

一个web页面的展示，是由html标签组合成的一个页面，js是一门语言，dom对象实际就是将html标签转换成了一个文档对象。可以通过dom对象中js提供的方法，找到html的各个标签。通过找到标签就可以操作标签使页面动起来，让页面动起来；对于ui自动化来说我们可以用次方法来定位元素。

dom可以直接在浏览器的开发者工具的console中操作

获取标签

// 直接获取标签

document.getElementById('i1'); //获取id为i1的标签

document.getElementsByTagName('div'); //根据标签名称获得标签数组

document.getElementsByClassName('c1'); //根据class属性获取标签的数组

document.getElementsByName('dsx'); //根据name属性获取标签数组

 

//如果不能直接获取可以通过操作js间接获取标签

 

var tmp=document.getElementById('h-test');

tmp.parentElement; // 父节点标签元素

tmp.children; //所有子标签

tmp.firstElementChild; //第一个子标签元素

tmp.lastElementChild; // 最后一个子标签元素

tmp.nextElementSibling; //下一个兄弟标签元素

tmp.previousElementSibling; //上一个兄弟标签元素

 

操作标签

一、文本内容操作

innerHTMl和innertext

innerText 获取到标签中的主动闭合标签的中间的那个文案

tmp.innerText='老铁双击666'; //更改标签内文本内容

tmp.innerHTML; // 获取标签中的所有html代码，把可以将含有HTML代码的字符串变为标签-->

eg:

<!--tmp.innerHTML="<input type='button' value='提交'>"-->

input/textarea标签操作

tmp.value  //获取input和textarea参数值

tmp.value='XXXXXX'对input和textarea的值进行赋值

select标签

tmp.value; //获取select标签的选定的value参数

tmp.value = '选项' // 修改select选中的选项，通过value修改更改必须预制value属性

tmp.selectedIndex; // 获取当前select标签的选中的选项下标

tmp.selectedIndex = 1 // 通过下标更改select的选项

绑定事件

直接绑定和间接绑定：

直接绑定：

eg.1:

<input  type='button' value = '提交' style='float:left;margin-top: 50px' onclick='click1()';>

<script>

    function click1() {
        alert('click事件！！！');  //弹窗
    }
</script>

间接绑定：
eg.2

<input type="button" id="i1" value="提交">

<input type="text" id="i2" placeholder="switch">

<script>

var target = document.getElementById('i1');//必须有分号

//    target.onclick=function () {
//        var tmp = document.getElementById('i2').value
//            if (tmp==1){
//                alert("tmp==1")
//
//            }else if (tmp==2){
//                alert('tmp==2')
//            }else{
//                alert('none')
//            }
//</script>

onfocus() //获取光标时操作
onblur() //失去焦点做操作
onclick()//单击时操作
ondblclick()//双击时操作
onmouseover()//鼠标悬浮触发操作
onmouseout()//鼠标离开悬浮触发操作
=== 三个等号代表必须类型相同，是强类型判断；两个等号只判断值相等

操作样式

<!--tmp.className = 'c1'; // 更改标签class属性 只能有一个class属性-->
<!--tmp.classList;// 获取样式数组-->
<!--tmp.classList.add('aaa'); //添加样式 数组-->
<!--tmp.classList.remove('aaa'); //删除样式-->
tmp.checked; //获取checkbox的状态 true为勾选<!--操作单独样式-->

<!--style.xxx //操作任意样式属性，相当于在标签中增加一个style属性-->
<!--tmp.style.display='none'样式隐藏      操作单个样式属性，相当于在标签中增加一个style属性-->
<!--tmp.style.display=''相当于没有display属性-->
<!--tmp.style.backgroundColor='blue'-->
<!--js中不能使用“-”会把“-”后第一个字母变成大写来转义-->

创建标签：

通过对象方式创建标签
createElement(tagName)   //通过DOM创建一个标签对象
appendChild(tagObj)      //在父级标签内添加一个子标签对象
字符串方式创建标签

insertAdjacentHTML(where, tagStr) //父级标签内或外添加一个子、兄标签

beforeBegin //插入到获取到标签的前面

afterBegin //插入到获取到标签的子标签的前面

beforeEnd //插入到获取到标签的子标签的后面

afterEnd //插入到获取到标签的后面

 

其他操作;

console.log(msg)   //打印数据

alert()  //弹框提示

confirm()//确认弹框，返回true  or  false

location.href  //获取当前的url

location.href='http://www.baidu.com'

location.reload() //刷新

location.href = location.href   //刷新