DOM

DOM

document object module文档对象模型

            NodeType       nodeValue       nodeName
element       1              null          元素的标签名
attribute     2              属性的值       属性的名称
text           3            所包含的文本     #text
document       9              null         #document
fragment      11            

获取DOM中指定元素

getElementById()

document.getElementById("元素id");

getElementsByName()

返回的是一个数组对象,所以使用时要用数组下标

document.getElementsByName("表单元素name值");
alert(document.getElementsByName("web")[0].value);

getElementsByTagName()

返回的是一个数组对象,所以使用时要用数组下标

console.log(document.getElementsByTagName('div')[0].innerHTML);

在DOM中，每一个元素节点都被看成一个对象。既然是对象，那肯定有相关属性和方法

getElementsByClassName(‘类名’)

返回带有指定类的所有元素的NodeList

节点属性(用于查找)

parentNode	获取当前节点的父节点
childNodes	获取当前节点的子节点集合
firstChild	获取当前节点的第一个子节点 包含文本
lastChild	获取当前节点的最后一个子节点 包含文本
previousSibling	获取当前节点的前一个兄弟节点
nextSibling	获取当前节点的后一个兄弟节点
attributes	元素的属性列表
firstElementChild	只包含节点不包含文本
lastElementChild	只包含节点不包含文本
children	获取当前节点的元素子节点集合，只包含节点不包含文本

nextElementSibling     只包含节点不包含文本 
previousElementSibling   只包含节点不包含文本
childElementCount       返回子元素的个数

元素里面的文本值会给查找产生很大的影响

 <script type="text/javascript">
        var e = document.getElementById("list");
        if (e.parentNode) {
            alert("该节点有父节点");
        }
    </script>

节点常用的属性

tagName 标签名

innerHTML 内部html

id 标签的id

style 标签的style

className 标签的class

value

DOM节点常用操作

创建节点

createElement(‘标签名’)

创建元素节点

createTextNode(‘内容’)

创建文本节点

window.onload=function() {
        var e = document.createElement("h1");    
        var txt = document.createTextNode("hujaing");
        e.appendChild(txt);    //把元素内容插入元素中去
        document.body.appendChild(e);
        }

 <script type="text/javascript">
        var e = document.createElement("input");
        e.id = "submit";
        e.type = "button";
        e.value = "提交";
        document.body.appendChild(e);
    </script>

createAttribute(‘属性名’)

创建属性节点

           //1.创建一个img元素节点
            var img = document.createElement('img');
            //2.添加节点到页面中指定元素节点（父节点）下
            var root = document.getElementById('imgdiv');
            root.appendChild(img);
            //属性节点的设置
           //img.src = 'images/1.jpg';            添加图片方式一
          // img.setAttribute('src','images/1.jpg');    //添加图片方式二，推荐使用
            var src = document.createAttribute('src');
            src.value = 'images/1.jpg';
            img.attributes.setNamedItem(src);//添加图片方式一
            //文本节点的设置
            var p = document.getElementById('p');
            p.innerHTML = '我是文本'        //添加文本方式

插入节点

appenChild()

把新的节点插入到当前节点的“内部”,在父节点的末尾添加

父节点.appendChild(新的子节点)

insertBefore()

将新的子节点添加到当前指定节点的前面

父节点.insertBefore(新的子节点,在这个节点前插入新的节点)

appendChild()和insertBefore()这2种插入节点方式都需要获取父节点才能进行操作

删除节点

removeChild()

删除当前父节点下的某个子节点

父节点.removeChild(子节点)

 document.getElementById('div').removeChild(document.getElementById('div02'))

克隆节点

cloneNode()

cloneNode()方法来实现复制节点

obj.cloneNode(bool)

参数obj表示被复制的节点，而参数bool是一个布尔值，取值如下：
（1）1或true：表示复制节点本身以及复制该节点下的所有子节点；
（2）0或false：表示仅仅复制节点本身，不复制该节点下的子节点；

var e=document.getElementById('div').cloneNode(1);
            document.body.appendChild(e);

替换节点

replaceChild()

被替换节点的父节点.replaceChild(替换后的新节点,需要被替换的旧节点)

innerHTML属性声明了元素含有的HTML文本，不包括元素本身的开始标记和结束标记。包括文字和里面的元素标签

innerText属性与inerHTML属性的功能类似，只是该属性只能声明元素包含的文本内容。

    <div id="lvye"><strong>绿叶学习网</strong></div>
    innerHTML内容是：<input id="txt1" type="text"><br/>
    innerText内容是：<input id="txt2" type="text">
    <script type="text/javascript">
        var e = document.getElementById("lvye");
        document.getElementById("txt1").value = e.innerHTML;     //<strong>绿叶学习网</strong>
        document.getElementById("txt2").value = e.innerText;       //      绿叶学习网    
    </script>

HTML代码	innerHTML返回值	innerText返回值
绿叶学习网	“绿叶学习网”	“绿叶学习网”
绿叶学习网	“绿叶学习网”	“绿叶学习网”
	““	“”（空字符串）

<script type="text/javascript">
        var e = document.getElementById("lvye");
        e.innerHTML="<span style='color:red;font-weight:bold;'>绿叶学习网</span><span     style='color:blue;font-weight:bold;'>JavaScript入门教程</span>";
    </script>

属性节点

nodeType节点类型

• 元素节点的nodeType 为1
• 属性节点的nodeType为2
• 文本节点的nodeType为3

nodeName 属性规定节点的名称。

• nodeName 是只读的
• 元素节点的 nodeName 与标签名相同
• 属性节点的 nodeName 与属性名相同
• 文本节点的 nodeName 始终是 #text
• 文档节点的 nodeName 始终是 #document

nodeValue 属性

nodeValue 属性规定节点的值。

• 元素节点的 nodeValue 是 undefined 或 null
• 文本节点的 nodeValue 是文本本身
• 属性节点的 nodeValue 是属性值

获取属性节点

attributes[‘属性名’]

查看和修改属性节点

getAttribute(‘属性名’)	返回指定的属性值。
setAttribute(‘属性名’，‘属性值’)	把指定属性设置或修改为指定的值。

            //.1先获取元素节点
            var d1 = document.getElementById('d1');
            //2.获取属性节点
            var attr1 = d1.attributes['id'];
            alert(attr1.nodeName)              //id
            alert(attr1.nodeValue)             //dl
            alert(attr1.nodeType)              //2
            //修改属性值
           d1.style.color = 'blue;   //'方法一
            d1.setAttribute('style','color:blue'); //方法二 

           <div id="d1" class="mydiv" style="color:red">hello</div>

JS操作CSS样式

DOM对象.style.属性名;
var e = document.getElementById("contain");
            e.style.color = "red";
            e.style.border = "1px solid gray";

DOM对象.style['属性名']
var e = document.getElementById("contain");
            e.style['color']= "red";
            e.style['border'] = "1px solid gray";

DOM对象.className='类名'  
var e = document.getElementById("contain");
e.className='mydiv'  //给id为contain的元素添加class为mydiv的样式