当前位置 : 主页 > 编程语言 > java >

08JavaScript之JavaScript操作DOM对象方法

来源:互联网 收集:自由互联 发布时间:2023-02-04
通过元素类型的方法来操作: document.getElementById();//id名,在实际开发中较少使用,选择器中多用class id一般只用在顶级层存在 不能太过依赖id document.getElementsByTagName();//标签名 document.

通过元素类型的方法来操作:

  • document.getElementById();//id名,在实际开发中较少使用,选择器中多用class id一般只用在顶级层存在 不能太过依赖id
  • document.getElementsByTagName();//标签名
  • document.getElementsByClassName();//类名
  • document.getElementsByName();//name属性值,一般不用
  • document.querySelector();//css选择符模式,返回与该模式匹配的第一个元素,结果为一个元素;如果没找到匹配的元素,则返回null
  • document.querySelectorAll()//css选择符模式,返回与该模式匹配的所有元素,结果为一个类数组
  • 所有节点都有nodeType属性,代表节点的不同类型,通过nodeType属性可以来判断节点的类型。经常使用的节点主要有以下几种类型:

  • Element类型(元素节点):nodeType值为 1
  • Text类型(文本节点):nodeType值为 3
  • Comment类型(注释节点):nodeType值为 8
  • Document类型(document节点):nodeType值为 9;其规定的一些常用的属性有
  • document.body document.head 分别为HTML中的 ​​<body><head>​​
  • document.documentElement为标签
  • 所有的节点都有 hasChildNodes()方法 判断有无子节点 有一个或多个子节点时返回true】
  • 通过一些属性可以来遍历节点树:

  • parentNode//获取所选节点的父节点,最顶层的节点为#document
  • childNodes //获取所选节点的子节点们
  • firstChild //获取所选节点的第一个子节点
  • lastChild //获取所选节点的最后一个子节点
  • nextSibling //获取所选节点的后一个兄弟节点 列表中最后一个节点的nextSibling属性值为null
  • previousSibling //获取所选节点的前一兄弟节点 列表中第一个节点的previousSibling属性值为null
  • 基于元素节点树的遍历(遍历元素节点树):

  • parentElement //返回当前元素的父元素节点(IE9以下不兼容)
  • children // 返回当前元素的元素子节点
  • firstElementChild //返回的是第一个元素子节点(IE9以下不兼容)
  • lastElementChild //返回的是最后一个元素子节点(IE9以下不兼容)
  • nextElementSibling //返回的是后一个兄弟元素节点(IE9以下不兼容)
  • previousElementSibling //返回的是前一个兄弟元素节点(IE9以下不兼容)
  • 示例:

    1、DOM节点

    <img src="images/fruit.jpg" alt="水果" id="fruit"/> <h1>喜欢的水果</h1> <p>DOM应用</p>节点还包括文本节点,例如空格或换行 <script type="text/javascript"> var img = document.getElementById("fruit"); alert(img.parentNode.innerHTML);//alert(img.parentNode.innerText); var body = document.getElementsByTagName("body")[0]; //alert(body.childNodes[3].innerHTML); //alert(body.firstChild.nextSibling.nextSibling.nextSibling.innerHTML);body.childNodes:body下面的所有子节点for (var i = 0; i < body.childNodes.length; i++) { if (body.childNodes[i].nodeType == 1) { alert(body.childNodes[i].innerHTML+"111111"); } else if (body.childNodes[i].nodeType == 3) { alert(body.childNodes[i].nodeValue+"33333"); }} //alert(body.firstElementChild.nextElementSibling.nextElementSibling.innerHTML); </script>

    2、访问节点

    <section id="news"> <header>京东快报<a href="#">更多 > </a></header> <ul> <li><a href="#">志玲姐姐:墨镜300减30</a></li> <li><a href="#">京东无锡馆正式启动</a></li> <li><a href="#">99元抢平板!品牌配件199-100</a></li> <li><a href="#">节能领跑京东先行</a></li> <li><a href="#">高洁丝实力撩货,领券五折</a></li> </ul> </section><script> var obj = document.getElementById("news"); //var str = obj.lastChild.firstChild.innerHTML; //var str=obj.lastChild.lastChild.previousSibling.previousSibling.innerHTML; //var str=obj.lastElementChild.firstElementChild.innerHTML||obj.lastChild.firstChild.innerHTML; //var str=obj.lastElementChild.lastElementChild.innerHTML; alert(str);</script>

    3、节点信息

    <ul id="nodeList"><li>nodeName</li><li>nodeValue</li><li>nodeType</li></ul><p></p><script> var nodes=document.getElementById("nodeList"); var type1=nodes.firstChild.nodeType; //1 var type2=nodes.firstChild.firstChild.nodeType; //3 var name1=nodes.firstChild.firstChild.nodeName; //#text var str=nodes.firstChild.firstChild.nodeValue; //nodeName var con="type1:"+type1+"<br/>type2:"+type2+"<br/>name1:"+name1+"<br/>str:"+str; document.getElementById("nodeList").nextSibling.innerHTML=con;</script>

    要分清元素的value属性和nodeValue 不一样,nodeValue适用于“文本节点”和“属性节点”;对应“文档节点”和“标签节点”不起作用

    上一篇:使用注解配置springmvc案例
    下一篇:没有了
    网友评论