码迷,mamicode.com
首页 > 编程语言 > 详细

从零开始学习前端JAVASCRIPT — 6、JavaScript基础DOM

时间:2018-01-25 20:40:05      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:ted   添加   sts   html   兼容   否则   页面   exists   obj   

1:DOM(Document  Object  Model)的概念和作用

document对象是DOM核心对象:对html中的内容,属性,样式进行操作。

节点树中节点之间的关系:父子,兄弟。


 

2:DOM常用属性

title:返回或设置当前文档的标题。

all:返回所有元素的集合。

forms:返回对文档中所有form对象的引用。

通过集合来访问相应的对象:

1.通过下标的形式。

2.通过name形式。


 

3:DOM查询方法

1.getElementById(id):返回拥有指定id的(第一个)对象的引用。

2.getElementsByTagName(tagName):返回有指定标签名的对象集合。

注:上面两个方法没有兼容性问题。

3.getElementsByName(name):返回带有指定name指定名称的对象的集合。有兼容性问题。

在IE9及其以下,如果该对象的标准属性包含有name,(比如说input,在input中name是input的默认属性,所以可以正常使用,但是在div中name并不是div的默认属性,所以不能正常显示),那么可以正确的使用。否则不可以使用。在火狐中,该方法可以适用于任何情况。

结论: getElementsByName(name)主要是适用于表单。

4.write:输出内容到页面。(注:网页加载完成后进行输出,则覆盖整个网页,使用时需注意)

5.getElementsByClassName():返回带有指定className指定名称的对象的集合。有兼容性问题,适用于火狐浏览器,在IE浏览器中不可用(IE8及以下不可用)。

封装获取className值的DOM节点的兼容性的函数。


 

4:操作内容

1.innerHTML:用来设置或获取对象起始和结束标签内(例如div框架,它只会获取div里面的内容,而不会获取div)的内容(识别html标签) 。

2.innerText:用来设置或获取对象起始和结束标签内的内容 (只是获取文字内容)(适用于IE,最新版火狐已支持)。

  textContent用来设置或获取对象起始和结束标签内的内容 (只是获取文字内容)(适用于火狐,IE8及其以下不支持)。

3.outerHTML  用来设置或获取包括本对象在内的起始和结束标签内(例如div框架,不仅会获取div里面的内容,也会获取div自身的内容)的内容(识别html标签) 。

4.outerText  用来设置或获取包括本对象在内的起始和结束标签内的内容(只是获取文字内容)(火狐不支持)。


 

5:操作属性

1.直接操作

      对象.属性。   // 获取属性。某些属性有兼容性问题,例如name(如果不是标签特有的属性,在chrome/firfox访问不到,在IE8及其以下浏览器能获取的到)。

      对象.属性=值  // 设置、添加属性(属性值)。

2.通过方法

      getAttribute(“属性”)。                // 获取给定的属性的值。

      setAttribute(“属性”,“值”)。  // 设置或是添加属性。

   removeAttribute(“属性”)。       // 删除属性。


 

6:操作样式

1.行内样式

     对象.style.属性       // 获取样式属性

     对象.style.属性=值  // 设置、添加样式属性。

     注: 遇到属性是“-”链接的,要将“-”去掉,后面的单词的首字母大写。

2.行内样式和css层叠样式通用的方式

     对象.currentStyle.属性                IE   用来获得实际的样式属性。

     getComputedStyle((对象,null).属性)   火狐  用来获得实际的样式属性。

注:只能获取不能设置。


 

7:DOM增删改

一:创建节点(注释和文档节点一般不需要创建)

    1:创建元素节点

        document.createElement("元素标签名");

    2:创建属性节点

        var oAttr = document.createAttribute(“属性名”);(不常用)

           oAttr.value = "attr-name";

           oDiv.setAttributeNode(oAttr);

        对象.属性=属性值;(常用)

    3:创建文本节点

        对象.innerHTML = "";

        var oText = document.createTextNode(“文本”);  // 文本中的HTML标签实体化

           oDiv.appendChild(oText);

二:追加到页面当中

    父对象.appendChild(newNode)  // 插入到父对象最后。

    父对象.insertBefore(newNode, existsNode)   // 插入到什么对象之前。

三:修改(替换)节点

    父对象.replaceChild(newNode,existsNode);  // 前面的替换后面的

四:删除节点

    父对象.removeChild(oldNode);

     如果确定要删除节点,最好也清空内存  对象=null;

五:表格操作

     table.tBodies[0].rows[0].cells[0].innerHTML;

     var oNewRow = table.insertRow(“行位置”);

   oNewRow.insertCell(“列位置”);

从零开始学习前端JAVASCRIPT — 6、JavaScript基础DOM

标签:ted   添加   sts   html   兼容   否则   页面   exists   obj   

原文地址:https://www.cnblogs.com/witkeydu/p/8352894.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!