您的位置:68399皇家赌场 > 服务器租用 > DOM操作

DOM操作

发布时间:2019-11-15 19:22编辑:服务器租用浏览(73)

    2、HTML 元素


    抱有 HTML 成分都由 HTMLElement 类型表示,不是直接通过这些连串,也是由此它的子类型来代表。 HTMLElement 类型间接接轨自 Element 并增加了部分性质。每一种 HTML 成分中都存在下列标准属性:

    1. id 成分在文书档案中的唯意气风发标志符
    2. title 有关因素的增大表明新闻,日常通过工具提示条显示出来
    3. lang 成分内容的言语代码,少之甚少使用
    4. dir 语言的大势,值为 ltr 或者 rtl,也比非常少使用
    5. className 与成分的 class 天性对应
    function loadScriptString(code) {
     var script = document.createElement('script');
     script.type = 'text/javascript';
     try{
      script.appendChild(document.createTextNode(code));
     }catch(e){
      script.text = code;
     }
     document.body.appendChild(script);
    }
    loadScriptString("function sayHi(){alert(1);} sayHi()");
    

    document方法:

    • document.getElementById()
      getElementById方法重返相配钦命id属性的因高商点。若无发觉相配的节点,则赶回null。
      其生机勃勃法子只可以在document对象上行使,不能够在其余因晚秋点上采纳。
    • document.getElementsByTagName()
      document.getElementsByTagName方法重回全部内定HTML标签的成分,重回值是二个看似数组的HTMLCollection对象,能够实时反映HTML文书档案的成形。若无其它相配的要素,就赶回一个空集。不只好在document对象上调用,也能够在别的因素秋点上调用。
    • docuemnt.getElementsByClassName()
      document.getElementsByClassName方法重返叁个近乎数组的指标(HTMLCollection实例对象卡塔尔国,富含了全部class名字切合钦点条件的成分,成分的变型实时反映在回来结果中。不只可以够在document对象上调用,也得以在此外因白藏点上调用。
    • document.getElementsByName()
      document.getElementsByName方法用于采用具备name属性的HTML成分(例如<form>、<radio>、<img>、<frame>、<embed>和<object>等卡塔尔国,再次回到一个相近数组的的指标(NodeList对象的实例卡塔尔国,因为name属性相通的成分可能不断三个。
    • document.elementFromPoint
      document.elementFromPoint方法重返位于页面钦点地方最上层的Element子节点。

    DOM成分的attribute和property超轻易混倄在联合签字,分不清楚,两个是例外的事物,不过两岸又联系紧密。超级多新手朋友,也席卷以前的笔者,经常会搞不清楚。

    至于作者:韩子迟

    图片 1

    a JavaScript beginner 个人主页 · 作者的稿子 · 9 ·    

    图片 2

    <div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>

    3.查询成分有两种管见所及的章程?ES5的成分采用格局是怎么样?

    复制代码 代码如下:

    3、性格的收获和设置


    各类成分都有三个或多个特征,那一个特征的用处是交给相应元素或其内容的叠合音信。操作个性的 DOM 方法重要有多个,分别是getAttribute() setAttribute() removeAttribute()

    注意,传递给 getAttribute() 的性情名与事实上的特色名相符,因而要想赢得 class 性情值,应该传入 class 而不是 className,后面一个只有在经过对象属性(property卡塔 尔(阿拉伯语:قطر‎访谈性虎时才用。若是给定称号的特色不设有,getAttribute() 返回 null。

    <div id='myDiv' title='hanzichi'> </div> <script> var myDiv = document.querySelector('div'); // attribute console.log(myDiv.getAttribute('id')); // myDiv console.log(myDiv.getAttribute('class')); // null console.log(myDiv.getAttribute('title')); // hanzichi console.log(myDiv.getAttribute('lang')); // null console.log(myDiv.getAttribute('dir')); // null // property console.log(myDiv.id); // myDiv console.log(myDiv.className); // '' console.log(myDiv.title); // hanzichi console.log(myDiv.lang); // '' console.log(myDiv.dir); // '' </script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div id='myDiv' title='hanzichi'> </div>
    <script>
      var myDiv = document.querySelector('div');
     
      // attribute
      console.log(myDiv.getAttribute('id')); // myDiv
      console.log(myDiv.getAttribute('class')); // null
      console.log(myDiv.getAttribute('title')); // hanzichi
      console.log(myDiv.getAttribute('lang')); // null
      console.log(myDiv.getAttribute('dir')); // null
     
      // property
      console.log(myDiv.id); // myDiv
      console.log(myDiv.className); // ''
      console.log(myDiv.title); // hanzichi
      console.log(myDiv.lang); // ''
      console.log(myDiv.dir); // ''
    </script>

    因此 getAttribute() 方法也足以拿到自定义特性。

    在骨子里支出中,开辟职员有的时候用 getAttribute(),而是只行使对象的品质(property卡塔 尔(英语:State of Qatar)。独有在赢得自定义天性值的境况下,才使用getAttribute() 方法。为啥吗?举个例子说 style,在通过 getAttribute() 访问时,返回的 style 个性值蕴含的是 css 文本,而透过属性来访谈会回去二个对象。再比方说 onclick 那样的事件管理程序,当在要素上运用时,onclick 特性蕴涵的是 Javascript 代码,就算因而 getAttribute() 访谈,将会回到相应代码的字符串,而在拜候 onclick 属性时,则会回去 Javascript 函数。

    与 getAttribute() 对应的是 setAttribute(),这几个情势接纳多个参数:要安装的风味名和值。假若性子已经存在,setAttribute()会以内定的值替换现成的值;假使性子不设有,setAttribute() 则制造该属性并设置相应的值。

    而 removeAttitude() 方法用于透顶删除成分的特点。调用这么些主意不但会去掉性子的值,况且也会从要素中全然除去天性。

    JavaScript

    div.setAttribute('id', 'someOtherId'); div.setAttribute('title', 'some other text'); div.removeAttribute('class')

    1
    2
    3
    4
    div.setAttribute('id', 'someOtherId');
    div.setAttribute('title', 'some other text');
     
    div.removeAttribute('class')
    function loadScript(url) {
     var script = document.createElement("script");
     script.type = "text/javascript";
     script.src = url;
     document.body.appendChild(script);
    }
    loadScript("a.js");
    

    5.如何给页面成分增加子成分?怎么样删除页面成分下的子成分?

    <body>
          <div id="div1" class='test'>div1</div>
          <div id="div2">div2</div>
          <div id="div3">div3</div>
          <div id="div4">div4</div>
          <div id="div5">div5</div>
          <script charset="utf-8">
            var body = document.getElementsByTagName('body')
            var newDiv = document.createElement('div')
            newDiv.setAttribute('id','xxx')
            var newContent = document.createTextNode('hello world') 
            body[0].appendChild(newDiv)//页面元素添加子元素
            newDiv.appendChild(newContent)     
            document.getElementById('div1').removeAttribute('id')
            body[0].removeChild(document.getElementById('div4'))//删除页面元素下的子元素
            document.getElementById('div2').remove()//删除元素本身
          </script>
        </body>```
    # 6.element.classList有哪些方法?如何判断一个元素的 class 列表中是包含某个 class?如何添加一个class?如何删除一个class?
    - className属性用来读写当前元素节点的class属性。它的值是一个字符串,每个class之间用空格分割。
    - classList属性则返回一个类似数组的对象,当前元素节点的每个class就是这个对象的一个成员。
    #### classList对象有下列方法。
    
    >add():增加一个class。
    remove():移除一个class。
    contains():检查当前元素是否包含某个class。
    toggle():将某个class移入或移出当前元素。
    item():返回指定索引位置的class。
    toString():将class的列表转为字符串。
    

    myDiv.classList.add('myCssClass');//增多多少个class
    myDiv.classList.add('foo', 'bar');//增添多个class
    myDiv.classList.remove('myCssClass');//删除叁个class
    myDiv.classList.toggle('myCssClass'); // 如若myCssClass不设有就加盟,存在就移除
    myDiv.classList.contains('myCssClass'); // 返回 true 或者 false
    myDiv.classList.item(0); // 再次来到首个Class
    myDiv.classList.toString();//将classList对象调换为字符串与.className效果等同

    # 7.如何选中如下代码所有的li元素? 如何选中btn元素?
    

    <div class="mod-tabs">
    <ul>
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
    </ul>
    <button class="btn">点我</button>
    </div>
    <script>
    var liAll = document.getElementsByTagName('li')//选中保有li成分分娩类数组对象
    var btn = document.getElementsByClassName('btn')//选中btn元素
    </script>

    唯独IE6-7将洋洋事物都寄放在attributes中,下面包车型大巴拜候方法和正式浏览器的回来结果又不相同。常常要获取三个attribute节点直接用getAttribute方法:

    DOM Element节点类型详整

    2015/09/21 · HTML5 · DOM

    正文小编: 伯乐在线 - 韩子迟 。未经小编许可,禁绝转发!
    接待参预伯乐在线 专栏编辑者。

    上文中大家上课了 DOM 中最关键的节点类型之大器晚成的 Document 节点类型,本文大家继承浓郁,谈谈另叁个首要的节点类型 Element 。

    console.log(document.title);

    1.dom指标的innerText和innerHTML有怎么样界别?

    • innerText:文本格式插入
    • innerHTML:支持HTML插入,解析HTML标签

    console.log( elem.getAttribute('gameid') ); // 880

    打赏援助本人写出越来越多好小说,谢谢!

    图片 3

    1 赞 1 收藏 评论

    JS如下:

    ES5的方法:

    • document.querySelector()
      document.querySelector方法采取二个CSS选取器作为参数,重返相称该接纳器的因晚秋点。假设有多少个节点满意相配原则,则赶回第一个门户相当的节点。若无发掘相配的节点,则赶回null
    • document.querySelectorAll()
      document.querySelectorAll方法与querySelector用法相仿,差距是回到叁个NodeList对象,富含全体相配给定选取器的节点。

    复制代码 代码如下:

    1、概况


    Element 类型用于表现 HTML 或 XML 成分,提供了对元素标签字、子节点及特色的访谈。 Element 节点有所以下特征:

    1. nodeType 的值为 1
    2. nodeName 的值为要素的标具名
    3. nodeValue 的值为null
    4. parentNode 可能是 Document 或者 Element
    5. 其子节点恐怕是 ElementTextCommentProcessingInstructionCDATASection 或者 EntityReference

    要拜候成分的标签字,能够用 nodeName 属性,也得以用 tagName 属性;那八个属性会再次来到相像的值。在 HTML 中,标具名始终都是一切大写表示,而在 XML(不时候也满含XHTML卡塔 尔(阿拉伯语:قطر‎中,标签字始终和源代码中保持生机勃勃致。假定你不分明本身的脚本将会在 HTML 依然 XML 文书档案中实行,最佳依然在可比前面将标具名调换来相通的分寸写情势:

    JavaScript

    var myDiv = document.querySelector('div'); console.log(myDiv.tagName); // DIV console.log(myDiv.nodeName); // DIV if (myDiv.tagName.toLowerCase() === 'div') { // 那样最棒,适用于此外文书档案 // ... }

    1
    2
    3
    4
    5
    6
    7
    var myDiv = document.querySelector('div');
    console.log(myDiv.tagName);  // DIV
    console.log(myDiv.nodeName);  // DIV
     
    if (myDiv.tagName.toLowerCase() === 'div') { // 这样最好,适用于任何文档
      // ...
    }

    我们此前在地方讲过,在专门的学问浏览器下(IE9 ,firefox,chrome)下,打字与印刷的长度是7个,因为她俩把空格也蕴涵上去,在IE8-及以下的浏览器重临的是3个子成分,那是显现的常规情况下,不过生龙活虎旦本人以往把html成分的空格都去掉的话,那么富有的浏览器都会回到3个子元素,如下代码:

    4.怎么创设多少个要素?怎样给成分设置属性?怎么着删除属性

    • document.createElement()
      document.createElement方法用来生成网页成分节点。
    var newDiv = document.createElement('div');```
    createElement方法的参数为元素的标签名,即元素节点的tagName属性,对于 HTML 网页大小写不敏感,即参数为div或DIV返回的是同一种节点。如果参数里面包含尖括号(即<和>)会报错。
    

    <body>
    <div id="div1" class='test'>ss</div>
    <script charset="utf-8">
    var body = document.getElementsByTagName('body')//获取节点
    var newDiv = document.createElement('div')//成立成分
    newDiv.setAttribute('id','xxx')//设置属性
    var newContent = document.createTextNode('hello world') //创设文本节点
    body[0].appendChild(newDiv)//插入节点
    newDiv.appendChild(newContent) //插入文本节点
    document.getElementById('div1').removeAttribute('class')//删除属性
    </script>
    </body>```

    var elem = document.getElementById( 'box' );
    console.log( elem.attributes[0].name ); // class
    console.log( elem.attributes[0].value ); // box

    4、attributes 属性


    Element 类型是运用 attributes 属性的唯生龙活虎叁个 DOM 节点类型。 attributes 属性中包涵一个 NamedNodeMap,与 NodeList 相同,也是一个“动态”的集纳。成分的各个特点都由三个 Attr 节点表示,每一种节点都保留在 NamedNodeMap 对象中。NamedNodeMap 对象具备下列情势:

    1. getNamedItem(name): 返回 nodeName 属性等于 name 的节点
    2. removeNamedItem(name): 从列表移除 nodeName 属性等于 name 的节点
    3. setNamedItem(node): 向列表中增加节点,以节点的 nodeName 属性为索引
    4. item(pos): 再次来到位于数字 pos 地方处的节点

    attributes 属性中富含生龙活虎层层的节点,每一个节点的 nodeName 正是特点的名称,而节点的 nodeValue 便是特点的值。

    JavaScript

    // 拿到成分的性状值 var id = element.attributes.getNamedItem('id').nodeValue; var id = element.attributes['id'].nodeValue; // getAttribute() 也能落到实处平等效率var id = element.getAttribute('id'); // 与removeAttribute() 方法相比较,唯风流洒脱的区分是能重返表示被剔除性情的节点 var oldAttr = element.attributes.removeNamedItem('id'); // 增多新特性 // 要求传入二个性子节点 element.attributes.setNamedItem(newAttr);

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // 取得元素的特性值
    var id = element.attributes.getNamedItem('id').nodeValue;
    var id = element.attributes['id'].nodeValue;
     
    // getAttribute() 也能实现一样功能
    var id = element.getAttribute('id');
     
    // 与removeAttribute() 方法相比,唯一的区别是能返回表示被删除特性的节点
    var oldAttr = element.attributes.removeNamedItem('id');
     
    // 添加新特性
    // 需要传入一个特性节点
    element.attributes.setNamedItem(newAttr);

    日常的话,由于后边介绍的 attributes 方法相当不够便利,由此开荒人士越来越多的会使用 getAttribute() removeAttribute() 以及setAttribute() 方法。

    可是只要想要遍历成分的风味,attributes 属性倒是能够派上用途:

    <div id='myDiv' title='hanzichi' class='fish'> </div> <script> var myDiv = document.querySelector('div'); for (var i = 0, len = myDiv.attributes.length; i < len; i ) { var attrName = myDiv.attributes[i].nodeName , attrValue = myDiv.attributes[i].nodeValue; console.log(attrName, attrValue); } // id myDiv // title hanzichi // class fish </script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <div id='myDiv' title='hanzichi' class='fish'> </div>
    <script>
      var myDiv = document.querySelector('div');
      for (var i = 0, len = myDiv.attributes.length; i < len; i ) {
        var attrName = myDiv.attributes[i].nodeName
          , attrValue = myDiv.attributes[i].nodeValue;
     
        console.log(attrName, attrValue);
      }
     
      // id myDiv
      // title hanzichi
      // class fish
    </script>

    var test = document.getElementById("test");
    console.log(test.hasChildNodes());

    2.elem.children和elem.childNodes的区别?

    • element.children 获取的是近来元素的享有子节点成分(不包括文件成分卡塔尔国,children重返的是HTMLCollection类型
    • element.childNodes 获取的是时下因素的有所子成分(节点成分和文书成分卡塔 尔(阿拉伯语:قطر‎,childNodes重回的是NodeList类型

    elem.setAttribute('testAttr', 'testVal');
    console.log( elem.removeAttribute('gameid') ); // undefined

    5、成分的子节点


    <ul id='myUl'> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> </ul> <script> var myUl = document.getElementById('myUl'); console.log(myUl.childNodes.length); // IE: 3 别的浏览器: 7 </script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <ul id='myUl'>
      <li> Item 1 </li>
      <li> Item 2 </li>
      <li> Item 3 </li>
    </ul>
     
    <script>
      var myUl = document.getElementById('myUl');
      console.log(myUl.childNodes.length); // IE: 3   其他浏览器: 7
    </script>

    以上代码,假使是 IE 来分析,那么 <ul> 成分会有 3 个子节点,分别是 3 个 <li> 成分;而风姿浪漫旦是其余浏览器深入剖判,则会有 7 个子节点,饱含 3 个 <li> 成分 和 4 个公文节点。

    若果像上面那样将元素之间的空白符删除,那么全部浏览器都会回到相似数量的子节点:

    <ul id='myUl'><li> Item 1 </li><li> Item 2 </li><li> Item 3 </li></ul> <script> var myUl = document.getElementById('myUl'); console.log(myUl.childNodes.length); // 全部浏览器: 3 </script>

    1
    2
    3
    4
    5
    6
    <ul id='myUl'><li> Item 1 </li><li> Item 2 </li><li> Item 3 </li></ul>
     
    <script>
      var myUl = document.getElementById('myUl');
      console.log(myUl.childNodes.length); // 所有浏览器: 3
    </script>

     

    打赏补助本人写出更加的多好随笔,多谢!

    打赏小编

    //本例中使用的方法仅用于演示
    var div = document.getElementById("myDiv");
    console.log(div.dataset); // DOMStringMap {value: "12345", name: "Nicholas"}
    //取得自定义属性的值
    var value1 = div.dataset.value;
    console.log(value1); // 12345
    var name1 = div.dataset.name;
    console.log(name1); // Nicholas
    //设置值
    div.dataset.value = 23456;
    div.dataset.name = "Michael";
    //有没有"myname"值呢?
    if (div.dataset.name){
     console.log("Hello, "   div.dataset.name); // Hello, Michael
    }
    

    复制代码 代码如下:

    略知风流罗曼蒂克二动态加载css样式

    复制代码 代码如下:

    var test = document.getElementById("test");
    var newNode = document.createElement("div");
    // 替换第一个节点
    var returnNode = test.replaceChild(newNode,test.firstChild);
    console.log(returnNode); // <p class="a">11</p>
    

    要设置二个attribute节点使用setAttribute方法,要刨除就用removeAttribute:

    JS代码如下:

    无数新手朋友揣度都超级轻松掉进这一个坑中。
    DOM成分一些暗中认可经常见到的attribute节点都有与之对应的property属性,相比较特别的是有的值为Boolean类型的property,如一些表单成分:

    IE7及以下删除类名必要使用className;

    attributes是会趁机增进或删除attribute节点动态更新的。
    property正是贰个属性,假如把DOM成分看成是三个事不关己的Object对象,那么property便是二个以名值对(name=”value”)的花样寄存在Object中的属性。要抬高和删除property也大约多了,和经常的对象没啥分别:

    如下所示代码:

    复制代码 代码如下:

    var test = document.getElementById("test");
    var newNode = document.createElement("div");
    var returnNode = test.insertBefore(newNode,test.childNodes[0]);
    console.log(returnNode); // <div></div>
    console.log(returnNode === newNode); // true
    

    复制代码 代码如下:

    var inputs = document.getElementsByTagName("input");
    console.log(inputs.namedItem("aa")); // <input name="aa"/>

    attribute翻译成汉语术语为“天性”,property翻译成中文术语为“属性”,从汉语的字面意思来看,确实是有一点分别了,先来讲说attribute。

    JS代码如下:

    复制代码 代码如下:

    结果打印如下:

    能够那样来拜望attribute节点:

    被移除的节点将改为再次来到值,如下代码:

    console.log( elem.getAttribute('gameid') ); // 880
    console.log( elem.gameid ); // undefined
    elem.areaid = '900';
    console.log( elem.getAttribute('areaid') ) // null

    3. matchesSelector()方法

    最终为了越来越好的界别attribute和property,基本得以计算为attribute节点皆以在HTML代码中可以见到的,而property只是一个比比皆已的名值对品质。

    console.log(test.firstChild === test.childNodes[0]); // true
    console.log(test.lastChild === test.childNodes[test.childNodes.length - 1]); // true
    

    attribute是多少个特点节点,每一个DOM成分都有三个一呼百诺的attributes属性来寄存全体的attribute节点,attributes是二个类数组的容器,说得正确点便是NameNodeMap,总来讲之就是贰个近乎数组但又和数组不太后生可畏致的容器。attributes的每一种数字索引以名值对(name=”value”)的方式寄存了壹个attribute节点。

    自家想透过先得到div中的testParent,然后再次拿到得p成分(通过querySelector方法);如下代码:

    [ class="box", id="box", gameid="880" ]

    <div id="test"><p>aaaaaa</p><p>bbbbbb</p><p>cccccc</p></div>

    <input type="radio" checked="checked" id="raido">
    var radio = document.getElementById( 'radio' );
    console.log( radio.getAttribute('checked') ); // checked
    console.log( radio.checked ); // true

    JS代码如下:

    上面包车型大巴div成分的HTML代码中有class、id还会有自定义的gameid,那些特点都存放在attributes中,类似下边包车型客车样式:

    要想赢得文档中具有的因素,能够向getElementsByTagName()中传播”*”; 星号表示一切的意趣;

    console.log( elem.getAttribute('id') ); // box
    console.log( elem.id ); // box
    elem.id = 'hello';
    console.log( elem.getAttribute('id') ); // hello

    5. classList属性

    <input type="radio" checked="anything" id="raido">
    var radio = document.getElementById( 'radio' );
    console.log( radio.getAttribute('checked') ); // anything
    console.log( radio.checked ); // true

    移除后的代码结构形成如下:

    复制代码 代码如下:

    理解readystatechange事件

    <div class="box" id="box" gameid="880">hello</div>

    Element节点有以下特征:

    // gameid和id都是attribute节点
    // id同有的时候候又能够透过property来访问和矫正
    <div gameid="880" id="box">hello</div>
    // areaid仅仅是property
    elem.areaid = 900;

    <div class="aa bb cc" id="div">aaa</div>

    对此IE6-7来讲,未有不一样attribute和property:

    浏览器扶植程度:IE8 ,firefox,chrome,safari3.1 ,opera10

    elem.gameid = 880; // 添加
    console.log( elem.gameid ) // 获取
    delete elem.gameid // 删除

    那些主意接受二个参数,即css选拔符,若是调用成分与该选取符相配,再次回到true,不然,再次回到false;

    复制代码 代码如下:

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.appendChild(document.createTextNode("function sayHi(){alert(1);} sayHi()"));
    document.body.appendChild(script);

    复制代码 代码如下:

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.text = "function sayHi(){alert(1);} sayHi()";
    document.body.appendChild(script);
    

    ...

    <div id="test">
     <em class="selected">11111</em>
     <em class="selected">22222</em>
     <em>33333</em>
     <em>44444</em>
    </div>
    

    复制代码 代码如下:

    <div id="test"><p class="a">11</p><div></div></div>removeChild():移除节点,该格局选取叁个参数,即要移除的节点;

    对此那么些特种的attribute节点,只有存在该节点,对应的property的值就为true,如:

    console.log(document.URL); //

    不过对于自定义的attribute节点,或然自定义property,两者就从未有过涉及了。

    document.title = “作者是龙恩”;

    之所以attribute和property轻便混倄在一块的来头是,超多attribute节点还会有一个相对应的property属性,例如上边包车型大巴div元素的id和class既是attribute,也会有对应的property,不管选择哪个种类格局都可以访问和改变。

    var test = document.getElementById("test");
    // 下面的所有的浏览器都支持
    if(test.nodeType == 1) { 
      alert(1)
    }
    

    复制代码 代码如下:

    复制代码 代码如下:

    console.log( elem.getAttribute('gameid') ); // 880
    console.log( elem.gameid ); // 880
    elem.areaid = '900';
    console.log( elem.getAttribute('areaid') ) // 900

    咱俩也足以因此中括号的语法来赢得的,如下代码:

    <ul id="list"><li>11</li><li>22</li><li>33</li></ul>

    轮番最后二个节点代码如下:

    清楚动态加载行内JS方式

    如上代码就可以动态生成css样式;

    var test = document.getElementById("test");
    var newNode = document.createElement("div");
    // 插入后成为最后一个节点
    var returnNode = test.insertBefore(newNode,null);
    console.log(returnNode === test.lastChild); // true 
    // 插入后成为第一个节点
    var returnNode = test.insertBefore(newNode,test.firstChild);
    console.log(returnNode === newNode); // true
    console.log(newNode === test.firstChild); // true
    // 插入到最后一个子节点的前面
    var returnNode = test.insertBefore(newNode,test.lastChild);
    console.log(returnNode === test.childNodes[test.childNodes.length - 2]); // true
    

    // true但是在IE8及此前不见到效果;由于IE8及更早版本将NodeList完成为叁个COM对象,而大家不可能像使用JScript对象那样接收对象,要想在IE低版本中改造为Array的格局,我们能够像上面同样包裹七个格局就能够;

    域名也可以安装的,比方大面积的跨子域的事态下,我们需求设置同意气风发的父域就能够产生跨域;

    appendChild(): 用于向childNodes列表的尾声增添多个节点;重返的是新扩展的节点;如下代码:

    <input name="aa"/>
    <input name="bb"/>

    与动态脚本肖似,所谓动态样式是指在页面刚载入时不设有的样式,动态样式是在页面加载成功后动态拉长到页面中的;

    移除最后一个节点的代码如下:

    [text, p, text, p, text, p, text, item: function]

    JS代码如下:

    明亮节点关系

    浏览器辅助的品位有IE,firefox,chrome都协助;

    <div class="testParent">
    <p>1111</p>
    <p>2222</p>
    </div>

    <div id="test">
    <p class="a">11</p>
    </div>

    var style = document.createElement("style");
    style.type = "text/css";
    try{
     style.appendChild(document.createTextNode("body{background-color:red}"));
    } catch (ex){
     style.styleSheet.cssText = "body{background-color:red}";
    }
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
    

    正如代码:

    <div id="test">test</div>
    <div class="cls">1111</div>
    <div class="cls">2222</div>
    <div class="cls">2222</div>

    attributes属性

    浏览器扶助程度:IE8 ,firefox,chrome,safari3.1 ,opera10

    <!doctype html>
    <html lang="en">
     <head>
     <meta charset="UTF-8">
     <title>Document</title>
     </head>
     <body>
    </body>
    </html>
    

    咱们还足以经过方括号的语法来做客,如下代码:

    <div id="test"><p class="b">22</p></div>

    var test = document.getElementById("test");
    var deeplist = test.cloneNode(true);
    console.log(deeplist);
    // <div id="test"><p class="a">11</p><p class="b">22</p></div>
    如果是浅复制的如下代码:
    var test = document.getElementById("test");
    var deeplist = test.cloneNode(false);
    console.log(deeplist);// <div id="test"></div>
    

    该方法也会重回一个HTMLCollection.

    var test = document.getElementById("test");
    if(test.nodeType == 1) { 
     console.log(test.firstChild); // <p class="a">aaaaaa</p>
     console.log(test.lastChild); // <p class="c">cccccc</p>
    }
    

    复制代码 代码如下:

    <div id="test" class="testName" title="aa" data-value="test1"></div>

    querySelector()方法采取三个css选用符,再次回到与该方式匹配的第多少个因素,若无找到相称元素,则赶回null;如下代码:

    hasChildNodes():倘若须求判别该父节点有未有子节点的话,能够行使该办法剖断,重临的是二个布尔型,有再次来到true,未有回到false,如下代码:

    <ul id="list">
     <li>11</li>
     <li>22</li>
     <li>33</li>
    </ul>
    

    理解nodeName与nodeValue

    var div = document.getElementById("test");
    var id = div.attributes.getNamedItem("id").nodeValue;
    console.log(id);  // test

    本条主题素材稍后在言之有序思谋,大家今后来寻访怎么着获取子成分,大家得以行使2种办法,第大器晚成种是选拔中括号[index]目录,第三种是使用item[index]目录,如下代码:

    var test = document.getElementById("test");
    test.removeAttribute("id");
    test.removeAttribute("class");
    test.removeAttribute("title");
    test.removeAttribute("data-value");
    

    <div id="test"><p class="a">aaaaaa</p><p class="b">bbbbbb</p><p class="c">cccccc</p></div>

    小编们也足以像Javascript相通,为了判定全数的浏览器下辅助能够打包四个兼有都帮助的代码;当然除safari浏览器除此而外,好像safari浏览器未有奏效;

    console.log(document.getElementsByClassName("p1")); // 返回NodeList

    console.log(document.domain); // 127.0.0.1

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:DOM操作

    关键词: 68399皇家赌场 HTML5 随笔