javascript结点,javascript重点

javascript中怎样区分元素和节点?

1、所谓元素,即html文档里面,所有的标签都可以称之为元素,比如说p、tr等,也就是说元素是个统称,一个文档里面有很多的元素。

创新互联公司主营鹰潭网站建设的网络公司,主营网站建设方案,App定制开发,鹰潭h5成都小程序开发搭建,鹰潭网站营销推广欢迎鹰潭等地区企业咨询

2、所谓节点,是js为了对html文档进行操作,而开发的,即DOM,文档对象模型。即每个元素都可以称之为一个节点,节点是唯一的。

比方来说,《p》标签,肯定是一个p标签元素,那如果通过js对它进行样式控制的时候,就必须获取(找到)到这个元素,称之为节点,如果有好多元素,可以获得第1个、第2个或者第n个。

总之,元素是统称,节点是具有唯一性的。

javascript节点

插入节点可用以下几个方法:

inode.insertBefore()

node.insertAdjacentElement()

node.replaceAdjacentText()

具体用法:

inode.insertBefore()

语法:

oElement = object . insertBefore ( oNewNode , oChildNode )

参数:

oNewNode : 必选项。对象(Element)。要被插入文档结构的对象。

oChildNode : 可选项。对象(Element)。定位插入点。 oNewNode 被插入到紧贴这个子对象的前面。

返回值:

oElement : 对象(Element)。返回插入的对象的引用。

说明:

将 oNewNode 插入文档结构作为 object 的子对象。即对象的 childNodes 集合的最后一项。

oNewNode 被添加前,必须先被建立。

object 没有子对象时使用此方法插入 oNewNode 不要使用 oChildNode 参数。

对于已有子对象的 object 而言,如果忽略 oChildNode 参数, oNewNode 将被插入为 object 的最后一个子对象。即 object 的 childNodes 集合的最后一项。

在运行时使用此方法是可以的。在对象的关闭标签被解析之前移除对象,则文档空间可能未被呈递。

node.insertAdjacentElement()

语法:

oElement = object . insertAdjacentElement ( sWhere , oElement )

参数:

oElement : 必选项。对象(Element)。要插入到 object 邻近的对象。

sWhere : 必选项。字符串(String)。beforeBegin | afterBegin | beforeEnd | afterEnd beforeBegin : 将 oElement 插到 object 的开始标签之前。

afterBegin : 将 oElement 插到 object 的开始标签之后。但是在 object 的所有原有内容之前。

beforeEnd : 将 oElement 插到 object 的结束标签之前。但是在 object 的所有原有内容之后。

afterEnd : 将 oElement 插到 object 的结束标签之后。

返回值:

oElement : 对象(Element)。返回插入的对象的引用。

说明:

将 oElement 依据 object 定位插入文档结构。

当文档正在载入时,不可以尝试此方法。必须在 onload 事件触发以后。

假如你尝试插入一个已经在文档结构中存在定位的对象,该对象将被移动到你指定的插入位置,而不会有新对象被创建。

其他的可以上 看看语法

JavaScript中节点和结点到底指的是什么 最好有点例子。

1、JavaScript原生函数没有提供判断DOM节点是否存在方法,我们通常获取DOM节点几乎都是document.getElement..方法,会返回一个object数组合集,我们可以通过object[0],object[1]这样来访问这个合集的每一个对象。既然返回的是数组合集,那么就有length属性,而length大于等于1即表示DOM节点存在页面中

代码:

Object.prototype.exist = function(){

if(typeof this !='undefined' this.length=1){

return true;

}

return false;

};

使用:

假设页面有如下节点

div这里是DIV节点/div

div这里是DIV节点/div

span这里是span节点/span

判断节点是否在页面:

var is_exist = document.getElementsByTagName('div').exist();

alert(is_exist); // true

var is_exist = document.getElementsByTagName('span').exist();

alert(is_exist); // true

var is_exist = document.getElementsByTagName('p').exist();

alert(is_exist); // false

2、注意:如果使用是使用document.getElementById()方法获取对象的就不能使用exist()方法,因为根据ID取节点对象的方法在取不到节点的情况下会返回一个空对象,不会集成原型exist()函数,所以会报错!所以如果是根据ID取对象的可以直接if(obj)这样既可判断DOM节点是否存在页面中

jQuery判断DOM节点是否存在页面中

可以这么干

添加原型:

(function($) {

$.fn.exist = function(){

if($(this).length=1){

return true;

}

return false;

};

})(jQuery);

3、使用方法:

假如页面有如下DOM节点

div id="a"这里是id=a节点/div

div这里是DIV节点/div

div这里是DIV节点/div

span这里是span节点/span

判断:

alert($('#aaa').exist()); // false

alert($('#a').exist()); // true

alert($('div').exist()); // true

alert($('p').exist()); // false

以上两种方法其实都是根据对象集合的length属性判断对象是否存在。

JavaScript中如何添加文本节点?

最简单的方法就是用元素的innerHTML属性赋值,如:myNewElement.innerHTML = “我是文本”;但这样不能清晰的体现DOM中新增加了一个文本节点。

然后另一种添加文本节点的方式,可分为两步:

1、创建节点:文本节点的创建使用createTextNode方法,如:var myText = document.createTextNode(“我是文本”);

2、将创建的节点用appendChild方法添加某个元素下。如:myNewElement.appendChild(myText);这样myNewElement就有myText的文本节点,文本节点的内容是“我是文本”即可。

获取属性节点

第一种方法:获取官方定义的属性节点(获取元素的对应属性值)。

格式:元素节点,属性名。

注意:不能获取自定义属性的值。

代码如下:

console.log(jsInput.placeholder);

alert("是时候展现真正的技术");

设置属性节点的值

公式:元素节点 . 属性名 = 新的属性值

代码如下:

//设置元素对应属性的值

//元素节点.属性名 = 新的属性值

jsInput.placeholder = "sunck good";

第二种方法

公式:元素节点 . getAttribute(属性名);

注意:还可以获取自定义属性的值。

代码:

console.log(jsInput.getAttribute("my"));

设置自定属性的值

公式:元素节点 . setAttribute(属性名, 新属性值);

注意:当属性不存在时,变为添加属性

代码:

//设置

//元素节点.setAttribute(属性名, 新属性值);

jsInput.setAttribute("my", "sunck");

//注意:当属性不存在时,变为添加属性

jsInput.setAttribute("other", "sunck");

删除属性节点

公式:元素节点.removeAttribute(属性名);

注意:某些低版本浏览器不支持

代码:

jsInput.removeAttribute("other");

console.log(jsInput);

javascript dom中有几种节点类型

一般地,节点至少拥有nodeType、nodeName和nodeValue这三个基本属性。

节点类型不同,这三个属性的值也不相同

nodeType

nodeType属性返回节点类型的常数值。不同的类型对应不同的常数值,12种类型分别对应1到12的常数值

元素节点 Node.ELEMENT_NODE(1)

属性节点 Node.ATTRIBUTE_NODE(2)

文本节点 Node.TEXT_NODE(3)

CDATA节点 Node.CDATA_SECTION_NODE(4)

实体引用名称节点   Node.ENTRY_REFERENCE_NODE(5)

实体名称节点 Node.ENTITY_NODE(6)

处理指令节点 Node.PROCESSING_INSTRUCTION_NODE(7)

注释节点   Node.COMMENT_NODE(8)

文档节点   Node.DOCUMENT_NODE(9)

文档类型节点 Node.DOCUMENT_TYPE_NODE(10)

文档片段节点 Node.DOCUMENT_FRAGMENT_NODE(11)

DTD声明节点 Node.NOTATION_NODE(12)

DOM定义了一个Node接口,这个接口在javascript中是作为Node类型实现的,而在IE8-浏览器中的所有DOM对象都是以COM对象的形式实现的。所以,IE8-浏览器并不支持Node对象的写法


当前标题:javascript结点,javascript重点
浏览路径:http://cdiso.cn/article/dsdodps.html

其他资讯