长沙web培训
达内长沙侯家塘中心

15017569023

热门课程

js中元素操作的内容和对比

  • 时间:2016-11-07 11:41
  • 发布:长沙web培训
  • 来源:web教程

长沙HTML5培训的老师今天给大家讲js中元素操作的有关内容与对比。

以下A:代表原生js B:代表jQuery

1创建元素/节点

A: 

元素节点- createElement( )  

文本节点- createTextNode()

例如:

var a = document.createElement("a");

a.href = http://baidu.com;

a.innerHTML = "go to baidu";

B:

$(HTML代码)

例如:

$li = $("<a href="http://baidu.com">go to baidu</a>);

2追加新元素节点

A:

parentelement.appendChild(elem);

例如:

var para=document.createElement("p");

var node=document.createTextNode("这是新段落。");

para.appendChild(node);

B:

append(content)

appendTo()

3删除节点

A:

parentelement.removeChild(子节点)

B:

remove()【删除自身以及后代节点】

eg:$(“#bj”).remove();

empty()【删除后代节点,保留自身节点】

4获取属性

A:

element.getAttribute()方法返回指定属性名的属性值。

例如:

document.getElementsByTagName("a")[0].getAttribute("target");

B:

attr(“属性名”)

5设置属性

A:

setAttribute(“属性名”,”属性值”)  

B:

attr(“属性名”,”属性值”) 

6删除属性

A:

removeAttribute(“属性名”) 

B:

removeAttr(“属性名”)

7获取/设置元素内容

A:

innerHTML、textContent、innerText

例如:

document.getElementsByTagName("BUTTON")[0].textContent; //获得第一个button元素的文本内容:

B:

html()、text()  

8获取/设置元素样式

A:

获取:

elem.style.属性名

设置:

elem.style.属性名=”值”;

【仅针对内联样式】

B:

获取: css(attrName)

设置:(一个或多个)

css(attrName,attrValue)

css({

attrName : attrValue,

attrName : attrValue

})"

9返回元素父节点

A:

父节点- parentNode 

子节点

所有子节点- childNodes

第一个子节点- firstChild

最后一个子节点- lastChild

兄弟节点

上一个兄弟节点-previousSibling

下一个兄弟节点- nextSibling

B:

父元素- parent()

祖先元素- parents()

子元素- children()

兄弟元素

上一个兄弟元素- prev()

下一个兄弟元素- next()

所有兄弟元素- siblings()

了解详情请登陆长沙达内Web前端培训官网(cs.web.tedu.cn)!

上一篇:Js对数组进行分组户数
下一篇:CSS元素类型

马上预约三天免费体验课

姓名:

电话:

CSS padding margin border属性详解

CSS元素类型

js中元素操作的内容和对比

Js对数组进行分组户数

选择城市和中心
贵州省

广西省

海南省