ajax入门学习篇2

前端之家收集整理的这篇文章主要介绍了ajax入门学习篇2前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1Dom是文档对象模型。是一种属性结构的。在java中一切元素都是对象,html中一切元素的都是节点。

2.<a href=”aaa.html”>sds</a>

A是元素节点,href属性节点,sds是文本节点

3.getElementByid是查找元素节点

4.getElementsByName也是查找元素节点的。

5. getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。

6.hasChildNodes查看是否存在子节点。

7.nodename返回的是每种节点的名称。但是如果是文本节点在返回一个#text

8.取文本节点的方法就是先取元素节点,然后用子节点取。

9,取属性节点,先取元素节点,然后用getAttributeNode(“属性名”)取

10Nodetype如果是元素节点返回1属性节点是2,文本节点3

11.nodevalue如果是元素节点返回为空,属性节点返回属性内容,文本节点也返回内容

12.setattribute(“属性名”,“属性名字”)对节点添加属性

13.createElement()创建元素节点

14.createTextNode()创建文本节点

例子说明

<script type="text/javascript" language="javascript">

var add = new Function('a','b','return a+b;');//这是函数定义的方法,构造方法定义

alert(add(4,4));

function add1(a,b) {

return a + b

};//函数直接定义

alert(add1(5,9));

function message() {

alert(document.getElementById("a1").value);//可以得到value

alert(document.getElementsByName("a2").length);//可以得到这个元素节点的个数

alert(document.getElementsByTagName("input").length);//这里或得这个标签的个数

alert(document.getElementById("a3").firstChild.nodeValue);//可以得到h1的文本节点

alert(document.getElementById("a3").childNodes[0].nodeValue);

和上面的一样。

}

</script>

</head>

<body>

<form action="#" method="get" name="from1">

<input type="text" id="a1" name="a2" value="aa"><input

type="submit" value="提交" onclick="message()">

</form>

<h1 id="a3">你好</h1>

</body>

例题2.节点的替换。

<script type="text/javascript">

window.onload = function() {//加载窗口,执行

document.getElementById("bj").onclick = function() {//点击这个节点触发事件

var biElement = document.getElementById("bj");//获取北京节点

var cqElement = document.getElementById("cq");//获取重庆节点

var pElement = biElement.parentNode;//获得北京节点的父节点

pElement.replaceChild(cqElement,biElement);//用重庆节点把北京节点替换,但是下面的重庆节点会没有

}

}

</script>

</head>

<body>

<input type="button" value="check">

<ul>

<li id="bj">北京</li>

<li>天津</li>

<li>杭州</li>

<li>大连</li>

</ul>

<ul>

<li id='cq'>重庆</li>

<li>南京</li>

<li>云南</li>

<li>连云港</li>

</ul>

</body>

3.对节点的添加

window.onload=function(){

var liElement= document.createElement("li");//创建一个元素节点

liElement.setAttribute("id","fish");//设置该节点的属性

var liTextElement=document.createTextNode("");//创建一个文本节点

var foodElement=document.getElementById("food");//获取一个已经存在的父节点

foodElement.appendChild(liElement);//将创建的元素节点挂到上面

liElement.appendChild(liTextElement);//将创建的文本挂到元素节点上

}

</script>

</head>

<body>

<ul id="food">

</ul>

原文链接:https://www.f2er.com/ajax/166248.html

猜你在找的Ajax相关文章