DOM

来源：互联网发布：lua和php 编辑：程序博客网时间：2024/06/09 17:57

DOM

document object module文档对象模型

            NodeType       nodeValue       nodeNameelement       1              null          元素的标签名attribute     2              属性的值       属性的名称text           3            所包含的文本     #textdocument       9              null         #documentfragment      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的样式

阅读全文

0 0