Dom基础1

作者: Monee121 | 来源:发表于2018-03-30 12:43 被阅读0次

Dom基础1
DOM基础1
HTML DOM基础解析
JavaScript--DOM基础
jQuery基础(2)
19.DOM 进阶
DOM基础知识
per-courseDOM介绍
DOM基础整理 - 1
Vue3+TS Day19 - Vue源码理论、编译器、渲染器、

DOM基础

DOM简介、DOM标准、DOM节点
获取元素的子节点：childNodes、兼容性问题
火狐不兼容，可以配合nodeType使用；nodeType=1元素节点

ul的子元素变红色；获取ul的子元素li，并且nodetype=1是元素节点
<script type="text/javascript">
window.onload=function ()
{
    var oUl=document.getElementById('ul1');
    var i=0;
    
    for(i=0;i<oUl.childNodes.length;i++)
    {
        if(oUl.childNodes[i].nodeType==1)
        {
            oUl.childNodes[i].style.background='red';
        }
    }
}

</script>
</head>

<body>
<ul id="ul1">
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>

节点类型：nodeType、文本节点、元素节点
children的使用
children是childNodes的兼容版，获取子节点可以用这个

<script type="text/javascript">
window.onload=function ()
{
    var oUl=document.getElementById('ul1');
    
    alert(oUl.children.length);
}
</script>
</head>

<body>
<ul id="ul1">
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>

获取元素父节点parentNode

点击隐藏把li隐藏
<script type="text/javascript">
window.onload=function ()
{
    var aA=document.getElementsByTagName('a');
    var i=0;
    
    for(i=0;i<aA.length;i++)
    {
        aA[i].onclick=function ()
        {
            this.parentNode.style.display='none';
        }
    }
}
</script>
</head>
<body>
<ul>
    <li>aass <a href="javascript:;">隐藏</a></li>
    <li>5453 <a href="javascript:;">隐藏</a></li>
    <li>cvxc <a href="javascript:;">隐藏</a></li>
    <li>ertert <a href="javascript:;">隐藏</a></li>
</ul>
</body>

获取定位元素的父节点offsetParent
onclick="alert(this.offsetParent.tagName)" 寻找当前元素定位的东西
获取首尾子元素：firstChild、firstElementChild、lastChild、lastElementChild

<script type="text/javascript">
window.onload=function ()
{
    var oUl=document.getElementById('ul1');
    
    //IE
    //oUl.firstChild.style.background='red';
    
    //FF
    //oUl.firstElementChild.style.background='red';
    
    var oFirst=oUl.firstElementChild||oUl.firstChild;
    
    oFirst.style.background='red';
}
</script>
</head>

<body>
<ul id="ul1">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>

获取兄弟节点：nextSibling、nextElemnetSibling、previousSibling、previousElementSibling
同上
元素属性操作：“.”与“[]”回顾、setAttribute、getAttribute、removeAttribute

<script type="text/javascript">
window.onload=function ()
{
    var oTxt=document.getElementById('txt1');
    
    //1
    //oTxt.value='123';
    
    //2
    //oTxt['value']='abc';
    
    //3
    //oTxt.setAttribute('value', 'rtertw');
    
    alert(oTxt.getAttribute('id'));
}
</script>
</head>

<body>
<input type="text" id="txt1"/>
</body>

通过className获取元素、封装getByClass函数

<script type="text/javascript">
window.onload=function ()
{
    var oUl=document.getElementById('ul1');
    var aLi=oUl.getElementsByTagName('li');
    var i=0;
    
    for(i=0;i<aLi.length;i++)
    {
        if(aLi[i].className=='box')
        {
            aLi[i].style.background='red';
        }
    }
}
</script>
</head>

<body>
<ul id="ul1">
    <li></li>
    <li></li>
    <li></li>
    <li class="box"></li>
    <li></li>
    <li class="box"></li>
    <li class="box"></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>

封装函数
<script type="text/javascript">
function getByClass(oParent, sClass)
{
    var aEle=oParent.getElementsByTagName('*');
    var aResult=[];
    var i=0;
    
    for(i=0;i<aEle.length;i++)
    {
        if(aEle[i].className==sClass)
        {
            aResult.push(aEle[i]);
        }
    }
    
    return aResult;
}

window.onload=function ()
{
    var oUl=document.getElementById('ul1');
    var aBox=getByClass(oUl, 'box');
    var i=0;
    
    for(i=0;i<aBox.length;i++)
    {
        aBox[i].style.background='yellow';
    }
}
</script>
</head>

<body>
<ul id="ul1">
    <li></li>
    <li></li>
    <li></li>
    <li class="box"></li>
    <li></li>
    <li class="box"></li>
    <li class="box"></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>