精华内容
下载资源
问答
  •  1.文档:DOM中的“D” 当创建了一个网页并把它加载到Web浏览器...只能通过某个特定对象去调用的函数称为这个对象的方法。 js中对象分为三种: (1)用户自定义对象 (2)内建对象:内建在js中的对象。包括
    
    1.文档:DOM中的“D”
    当创建了一个网页并把它加载到Web浏览器中时,DOM就在幕后悄然而生。它把编写的网页转化为一个文档对象。
    2.对象:DOM中的“O”
    对象是是一种自足的数据集合,与某个特定对象相关联的变量被称为这个对象的属性;只能通过某个特定对象去调用的函数称为这个对象的方法。
    js中对象分为三种:
    (1)用户自定义对象
    (2)内建对象:内建在js中的对象。包括Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各种错误对象,包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。
    其中Global和Math这两个对象又被称为“内置对象”,这两个对象在脚本程序初始化时被创建,不必实例化这两个对象。
    (3)宿主对象:由浏览器提供的对象。包括DOM和BOM。
         window对象对应着浏览器窗口本身,这个对象的属性和方法通常统称为BOM。
         DOM对此昂的主要功能是处理网页内容。
    3.模型:DOM中的“M”
    DOM代表加载到浏览器窗口的当前网页,DOM把一份文档表示为一棵家谱树。浏览器提供了网页的模型,而我们可以通过js去读取这个模型。
    4.节点:
    DOM由许多不同的节点构成:元素节点、文本节点、属性节点等
    5.获取元素:
    有4种DOM方法可以获取元素节点:
    (1)getElementById:document对象特有的函数,返回具有给定id的元素节点对应的对象。
    (2)getElementsByTagName:返回一个数组,这个数组中的每个元素都是对象
         允许把通配符(“*”)作为参数,可获取文档中所有元素。
         getElementById和getElementsByTagName可结合起来使用:
         例如:
         var shopping=document.getElementById("purchases");
         var items=shopping.getElementsByTagName("*");
    (3)getElementsByClassName:(html5 DOM新添的方法)返回一个具有相同类名的元素的数组。
         document.getElementsByClassName("inportant sale");类名的顺序与元素中类名的顺序不一致并不重要,就算元素带有更多                 的类名也没有关系。
         getElementsByClassName也可和getElementById结合使用。
         这个方法只有较新的浏览器才支持它,下面这个函数能适用于新老浏览器:
    function getElementsByClassName(node,classname){
         if(node.getElementsByClassName){
              return node.getElementsByClassName("classname");
         }else{
              var result=[];
              var elems=document.getElementsByTagName("*");
              for(var i=0,len=elems.length;i<len;i++){
                   if(elems[i].className.indexOf(classname)!=-1){
                        result[result.length]=elems[i];
                   }
              }
              return result;
         }
    }
    

    (4) document.getElementsByName:通过元素名称来获取元素对象,返回的是一个数组
    6.获取和设置属性
    getAttribute()和setAttriute()方法不属于document对象,所以不能通过document对象调用,它只能通过元素节点对象调用。
    这里有一个细节:通过setAttribute对文档做出修改之后,在通过浏览器查看源代码时看到的仍将是改变前的属性值,也就是说setAttribute做出的修改不会反映在文档本身的源代码里,这种“表里不一”的现象源自DOM的工作模式:先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容。这正是DOM的真正威力:对页面的内容进行刷新却不需要再浏览器里面刷新。
    展开全文
  • js,jquery获取节点以及内容和属性

    千次阅读 2019-07-17 11:07:06
    JS获取DOM元素的方法: document.getElementById('id'); 通过ID获取 document.getElementsByName('name'); 通过name属性 document.getElementsByTagName('div'); 通过标签名 document.getElements...

    JS获取DOM元素的方法:

    document.getElementById('id');                  通过ID获取
    document.getElementsByName('name');             通过name属性
    document.getElementsByTagName('div');           通过标签名
    document.getElementsByClassName('classname');   通过类名
    document.querySelector('.animated');            通过选择器获取一个元素
    document.querySelectorAll('.animated');         通过选择器获取一组元素
    document.documentElement                        获取html的方法document.documentElement是专门获取html这个标签的
    document.body                                   获取body的方法document.body是专门获取body这个标签的。   
    
    • 所有获取DOM对象的方法中,只有getElementById()和querySelector()这两个方法直接返回的DOM对象本身,可直接为其绑定事件。
    • getElementXXX类型的方法,除了通过Id获取元素,其他都返回一个集合,如果需要取到具体的DOM元素,需要加索引,如:document.getElementsByClassName(“box”)[0] =>获取class为box的所有元素中的第一个DOM元素。

    querySelector()与querySelectorAll()两者的联系与区别:

    • 联系: 两者括号中的取值都是选择器
    • 区别: 当有多个class相同的元素时,使用querySelector()方法只能获取到第一个class为box的元素,而querySelectorAll()获取到了所有class为box的元素集合。

    原生javascript方法:

    var a = document.getElementById(“dom”); 通过id获取到该节点
    del_space(a); 清理空格
    var b = a.childNodes; 获取a的全部子节点;
    var c = a.parentNode; 获取a的父节点;
    var d = a.nextSibling; 获取a的下一个兄弟节点
    var e = a.previousSibling; 获取a的上一个兄弟节点
    var f = a.firstChild; 获取a的第一个子节点
    var g = a.lastChild; 获取a的最后一个子节点

    jQuery方法:

    jQuery.parent(expr) ; 找父元素
    jQuery.parents(expr) ; 找到所有祖先元素,不限于父元素
    jQuery.children(expr) ; 查找所有子元素,只会找到直接的孩子节点,不会返回所有子孙
    jQuery.contents() ; 查找下面的所有内容,包括节点和文本.
    jQuery.prev() ; 查找上一个兄弟节点,不是所有的兄弟节点
    jQuery.prevAll() ; 查找所有之前的兄弟节点
    jQuery.next() ; 查找下一个兄弟节点,不是所有的兄弟节
    jQuery.nextAll() ; 查找所有之后的兄弟节点
    jQuery.siblings() ; 查找兄弟节点,不分前后
    jQuery.find(expr);
    $ (“p”).find(“span”)是从元素开始找,等于$(“p span”)
    跟jQuery.filter(expr)完全不一样而jQuery.find()的返回结果,不会有初始集中筛选出一部分,而jQuery.find()的返回结果,不会有初始集合中的内容,
    jQuery.filter(expr); 是从初始的jQuery对象集合中筛选出一部分

    内容和属性值

    js获取text、html、属性值、value的方法

    document.getElementById("test").innerText;
    document.getElementById("test").innerHTML;
    document.getElementById("test").id;
    document.getElementById("test1").value;
    

    jQuery获取text、html、属性值、value的方法

    $("#test").text()或者$("#test").innerText
    $("#test").html()或者$("#test").innerHTML
    $("#test").attr("id")
    $("#test").attr("value")或者$("#test1").val()或者$("#test1").value
    

    结果对比

    html:

        <p id="test">这是段落中的 <b>粗体</b> 文本。</p>
    

    js:

    js与jQuery,text与innerText获取
      $("#btn10").click(function(){
        alert("Text: " + $("#test").text());  
        <!--结果   Text: 这是段落中的 粗体 文本。-->
      });
        $("#btn11").click(function(){
        alert("Text: " + $("#test").innerText); 
         <!--结果   Text: undefined。-->
      });
        $("#btn12").click(function(){
        alert("Text: " + document.getElementById("test").innerTEXT);  
         <!--结果   Text: test-->
        });
    
    js与jQuery,html与innerHTML获取
        $("#btn20").click(function(){
        alert("HTML: " + $("#test").html());  
        <!--结果   HTML: 这是段落中的 <b>粗体</b> 文本。 -->
      });
      $("#btn21").click(function(){
        alert("HTML: " + $("#test").innerHTML); 
         <!--结果   HTML: undefined -->
      });
         $("#btn22").click(function(){
        alert("HTML: " + document.getElementById("test").innerHTML); 
         <!--结果  HTML: 这是段落中的 <b>粗体</b> 文本。 -->
      });
    
    js与jQuery,属性值获取
         $("#btn30").click(function(){
        alert("id: " + document.getElementById("test").id);  
        <!--结果   id: test -->
      });
        $("#btn31").click(function(){
        alert("id: " + $("#test").attr("id"));  
        <!--结果   id: test -->    
      });
    

    html:

       <input id='test1' value='aaa' class='test'>
    
    js与jQuery,value获取
          $("#btn40").click(function(){
        alert("value: " + document.getElementById("test1").value);  
        <!--结果   value: aaa -->
      });
        $("#btn41").click(function(){
        alert("value: " + $("#test1").val());  
        <!--结果   value: aaa --> 
        val()只能用于input元素的value值获取
      });
        $("#btn42").click(function(){
        alert("value: " + $("#test1").attr("value"));  
        <!--结果  value: aaa -->
      });
    
    展开全文
  • 方法获取当前节点的指定标签名孩子节点 appendChild(oChildNode) 方法,可以添加一个子节点,oChildNode是要添加的孩子节点 属性: childNodes 属性获取当前节点的所有子节点 firstChild 属性获取当前节点的第...

    节点就是标签对象

    方法 :

    通过具体的元素节点调用
    getElementsByTagName()
    方法,获取当前节点的指定标签名孩子节点

    appendChild(oChildNode)
    方法,可以添加一个子节点,oChildNode是要添加的孩子节点

    常用属性:

    childNodes
    属性,获取当前节点的所有子节点

    firstChild
    属性,获取当前节点的第一个子节点

    lastChild
    属性,获取当前节点的最后一个子节点

    parentNode
    属性,获取当前节点的父节点

    nextSibling
    属性,获取当前节点的下一个节点

    previousSibling
    属性,获取当前节点的上一个节点

    className
    用于获取或设置标签的class属性值

    innerHTML
    属性,表示获取/设置起始标签和结束标签中的内容

    innerText
    属性,表示获取/设置起始标签和结束标签中的文本

    展开全文
  • 属性节点的特征: 1.nodeType值为11 2.parentNode值为null 3.在HTML中不包含子元素 注意:(1)尽管属性也是节点,但却不认为是DOM文档树的一部分。(2)开发人员常用getAttribute()、setAttribute( )、...

    JavaScript操作属性节点

    属性节点的特征:

    1.nodeType值为11

    2.parentNode值为null

    3.在HTML中不包含子元素

    注意:(1)尽管属性也是节点,但却不认为是DOM文档树的一部分。(2)开发人员常用getAttribute()、setAttribute( )、removeAttribute( )等方法来操作属性。

    1、设置属性值

    方法:

    (1)createAttribute(name)+value+setAttributeNode(属性节点)

    (2)setArrtibute(name,value)  

    (3)点方法 :DOM节点.name="value";《特殊属性为,class->className,for->htmlFor》

    注意:setArrtibute如果用来设置原来已经存在的类时,新的类值将覆盖掉原来的值,尤其在添加class类时,要先看看原来有没有class类存在,如果有的话,那么只能用添加类的操作,不能用设置类的操作。

    实例:

    2.读取属性值 

    方法:

    (1)element.attributes["name"].value

    (2)element.getAttributeNode("name").value

    (3)element.getAttribute("name");      返回的是字符串

    (4)element.name;         返回字符串;<通过点方法访问,特殊属性:class->className,for->htmlFor>

    (5)只能用来读取class的属性值。element.classList;    返回属性列表;

    实例:

     

     注意:通过getAttribute(),点方法得到的属性值是字符串类型,

    当有多个class属性值时,需要利用split()函数进行字符串切割;

    当只有一个class属性值时,element.clsaaList返回值仍旧是数组列表,需要加索引取值:element.classList[0];

    3.删除某个属性

    方法:

    removeAttribute(name);

    实例:

     属性节点---对class类属性的操作:classList

     上面提到的getAttribute()、setAttribute( )、removeAttribute( )方法可以对属性节点中的各种属性(id,class,align,data-*)进行设置,读取,移除的操作.

    这里的classList仅仅针对class属性进行操作

    语法

    (1)element.classList.length;返回类列表中类的数量个数

    (2)element.classList.add("name1","name2",......);向元素中添加一个或多个类,如果已存在则不会再添加

    (3)element.classList.remove("name1","name2",......);删除元素中指定的一个或多个类名,删除不存在的不报错。

    (4)element.classList.toggle("name");切换类名:若有则移除,返回false;若无则添加,返回true;

    (5)element.classList.contains("name");判断是否包含指定的类型名。true包含,false不包含。

    (6)element.classList.item(index);返回指定index值的类名。

    自定义属性(data-*)的操作 

    添加自定义属性方法:

    (1)element.setAttribute("data-*);

    (2)element.dataset.name="value"

    读取自定义属性的方法: 

    (1)element.getAttribute("name");

    (2) element.dataset.name;

     

    JS获取和设置CSS样式的方法 

    这里javascript获取和设置的CSS样式均体现在指定DOM节点的内联style样式;

    注意:回流和重绘的触发,尽量不要一个一个的改变样式属性

    1.设置CSS样式

    (1)element.style.name="value";

     <div id="box" class="wrap demo">javascript操作属性节点</div>
        <script>
            var element=document.querySelector("#box");
            element.style.height="200px";       //样式属性名无“-”连字符;
            element.style.fontSize="20px";      //有连字符“-”,写成驼峰形式;
            element.style["fontWeight"]="700";  //有连字符“-”,用中括号"[]"处理;
            

     

    (2)element.setAttribute("style","name1:value1;name2:value2");

    可以设置一个或多个style样式。当一次设置多个时就能有效避免回流和重绘。

     (3)element.style.setProperty("name","value");   只能设置一个style属性 

            eg:element.style.setProperty("color","blue");  
    (4)使用element.style.cssText = "name1:value1;name2:value2";可以添加一个或多个style样式

              最终使用形式:element.style.cssText  +=  ";name1:value1;name2:value2";

    存在问题及优化:

    1.使用element.style.cssText设置style样式,会把原有的style中的样式覆盖掉。

    解决方法:使用累加style样式的方法。

    2.在IE6/7/8版本下,element.style.cssText读取的style属性值会忽略掉最后的“;”,

    IE6/7/8下cssText值与IE9/Firefox/Safari/Chrome/Opera不同

    解决方法:element.style.cssText  +=  ";name1:value1;name2:value2";加上前置分号“;”,在IE高版本和Chrome等浏览器中会自动去重。

    展开全文
  • 什么是html中的节点:一个html页面加载完成他会...方法:getElenmentsByTagName(tagename)语法:节点.getElenmentsByTagName(tagename)tagname是标签名获取到当前节点的指定标签名的孩子节点createElement()语法对...
  • 今天想聊聊在Web前端开发中经常用到技术:获取元素属性的一系列方法【innerHTML、outerHTML、innerText 、outerText、value、text()、html(),val()】这些方法,大家应该用过,如果让你说出它们一些区别联系,...
  • document object model 文档对象模型:处理网页内容的方法和接口 1. 什么是DOM和节点 - document是文档对象模型的一部分。 - DOM是一个复合的数据类型。 - DOM树:由节点(Node)组成 - ...
  • 节点的常用属性和方法 节点就是标签对象方法: 通过具体的元素节点调用 getElementsByTagName() 方法获取当前节点的指定标签名孩子节点 appendChild( oChildNode ) 方法,可以添加一个子节点,oChildNode 是要添加...
  • BOM的节点方法和属性

    2017-04-16 23:24:00
    》》》》》》》》》》》》》》》》》》》》具体可以参考W3SCHOOL中的讲解,接下来...HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。 换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML ...
  • JS 之Node节点的 属性方法 &获取

    万次阅读 2016-10-22 00:38:59
    (一)通过具体的元素节点调用如下方法和属性 《1》getElementsByTagName() 方法,获取当前节点的指定标签名孩子节点 《2》appendChild(oNode) 方法给标签对象添加子节点。oNode是要添加的子节点。 《3》...
  • python 通过xml获取节点和属性

    千次阅读 2020-05-09 21:26:58
    python获取xml文件方法集合 引入模块处理xml文件 from xml.dom.minidom import parse ...获取节点列表 nodelist = data.getElementsByTagName(大类名称) 获取第一个节点的子节点列表 childlist = nodelist[0].chi
  • 0x01 获取标签节点的方法 0x02 DOM获取子节点 1.childNodes: 2.children 0x03 获取父节点 0x04判断节点类型 0x05 获取子节点兄弟节点 1.获取第一个子节点 2.获取最后一个子节点 3.获取兄弟节点 1.获取...
  • 节点的常用属性和方法【图片在末尾】 方法: 通过具体的元素节点调用 getElementsByTagName() 方法获取当前节点的指定标签名孩子节点 appendChild( oChildNode ) 方法,可以添加一个子节点,oChildNode 是要添加...
  • 元素节点的属性 /* tagName innerHTML 双标签 value单标签(input,textarea(虽然是双标签))既一般为表单标签 */ 节点属性只能获取行间样式 ...
  • childNodes,children,nextSibling nextElementSibling的区别之前,必须对Dom树有一定的了解,在Dom文档结构中,HTML页面每一部分都是由节点组成的,节点的类型一共有3种,元素节点,文本节点,属性节点,从图中...
  • 方法: getElenmentsByTagName(tagename) 语法: 节点.getElenmentsByTagName(tagename) ...获取到当前节点的指定标签名的孩子节点 appendChild(oChildNode) 语法: 节点.appendChild(oChildNode) 可以添加一个子
  • 元素节点的一些属性 innerHTML 获取或修改该元素节点的HTML结构内容 <div> </div> <script> var div = document.getElementsByTagName('div')[0] </script> 追加 innerText(火狐不...
  • 这些方法几乎Javascript一样的方便,轻松一句就能获取到HTML DOM节点的数据。相比于使用正则表达式,这个方法更简单快捷。我就就常用DOMDocumentXPath两个类做一个介绍。假设有这样一个HTML页面(部分),其内容...
  • 5大节点: HTML文档中每个成分都是一个节点. ...注意:换行空格都属于节点,称为"空白节点". DOM树: HTML文档中所有节点组成了一个文档树模型,HTML文档中每个标签,属性,文本等都是树中一...
  • getAttribute 该方法用来获取元素的属性,调用方式如下所示: ...以上面作用相反的是setAttribute,该方法被用来设置元素节点的属性。调用方式如下所示: 代码如下: object.setAttribute(attribute)
  • 1.节点属性的设置 对象.属性名=值;... 注意:前两种设置和获取属性的方法,均需要注意特殊情况 class ---&amp;amp;amp;amp;amp;amp;amp;amp;gt; className for ---&amp;amp;amp;amp;amp
  • 查找节点和创建节点 1.查找节点 1.查找元素节点 查找元素节点非常简单,用 jQuery 择器即可完成。...利用选择器查找到需要元素之后,就可以使用attr()方法获取各种属性值。 var $para = $('p')
  • 什么是html中的节点:一个html页面加载完成他会...方法:getElenmentsByTagName(tagename)语法:节点.getElenmentsByTagName(tagename)tagname是标签名获取到当前节点的指定标签名的孩子节点createElement()语法对...
  • 获取或者设置属性节点的值, 可以传递一个参数, 也可以传递两个参数, 如果传递一个参数, 代表获取属性节点的值; 如果传递两个参数, 代表设置属性节点的值。 注意点:如果设置的属性节点不存在, 那么系统会自动新增...
  • 在JS中设置节点的属性属性值用到setAttribute(),获得节点的属性属性值用到getAttribute(),而在jquery中,只需要用到attr()这个函数就可以了。attr是attribute(属性)的缩写。 语法: 1、attr(“属性名”); /...
  • 一、设置或获取元素对象中(标签中)的属性和自定义属性 对象.属性 对象['属性'] 对象.getAttribute('属性名') 对象.setAttribute('属性名','属性值'); 对象.removeAttribute('属性名') 二、outerHTML : ...
  • 一、访问/获取节点 document.getElementById(id); //返回对拥有指定id第一个对象进行访问 document.getElementsByName(name); //返回带有指定名称节点集合 注意拼写:Elements document.getElementsByTagName...
  • 节点常用属性和方法 getElementsByTagName 获取当前节点的指定标签名孩子节点 gappendChild(oChildNode) 添加一个子节点,oChildNode是要添加的孩子节点 属性: childNodes 获取当前节点的所有子节点 firstChild 获取...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,472
精华内容 588
关键字:

获取节点的方法和属性