目录
1、创建节点
(1)创建元素
JavcaScript创建元素的方法通过document.createElement("tagName")方法实现,若要把创建的元素添加到文档中,还要调用appendChild()方法实现。
window.onload=function(){ //页面初始化函数
var div=document.createElement("div");//创建div元素
document.body.appendChild(div);//把创建的div元素添加到DOM文档树中
}
jquery使用构造函数$()创建元素对象,然后使用append()方法将创建的元素添加到文档中。
$(function(){ //页面初始化函数
var $div=$("<div></div>");//创建div对象
$("body").append($div);//把创建的div对象添加到文档中
})
(2)创建文本
JavcaScript创建文本节点的方法通过document.createTextNode(data)方法实现,若要把创建的元素添加到文档中,还要调用appendChild()方法实现。
jquery创建文本节点直接把文字字符串添加到元素标记字符串中,然后用append()等方法把它们添加到DOM文档中。
应用举例:JavcaScript实现创建元素节点和文本
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript">
window.onload=function()
{
var div=document.createElement("div");//创建div元素
var txt=document.createTextNode("DOM");//创建文本节点
div.appendChild(txt);//将文本节点添加到元素节点
document.body.appendChild(div);//将元素节点添加到DOM文档
};
</script>
</head>
<body>
</body>
jquery实现创建元素节点和文本:
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面始化函数
var $div=$("<div>DOM</div>");//创建元素节点,同时插入文本
$("body").append($div);//将元素节点插入到DOM文档中
}
)
</script>
</head>
<body>
</body>
(3)创建属性
JavaScript实现需要单独为元素设置属性,而jQuery能够直接把元素、文本和属性混在一起以HTML字符串的形式进行传递。
应用举例:
JavaScript方式:
<script type="text/javascript">
window.onload=function()
{
var div=document.createElement("div");//创建div元素
var txt=document.createTextNode("DOM");//创建文本节点
div.appendChild(txt);//将文本节点添加到元素节点
document.body.appendChild(div);//将元素节点添加到DOM文档
div.style.color="red";//设置div属性
};
</script>
jquery实现方式:
<script type="text/javascript">
$(
function(){ //界面始化函数
var $div=$("<div style='color:#F00'>DOM</div>");//创建元素节点,同时插入文本 注意属性里面用单引号
$("body").append($div);//将元素节点插入到DOM文档中
}
)
</script>
2、插入节点-内部插入
(1)JavaScript方式:使用appendChild()和insertBefore()在元素内插入节点内容。
将指定元素插入到节点的尾部。
nodeObject.appendChild(newchild)
nodeObject为节点对象,newchild表示要插入的子节点。
将指定元素插入到节点前面。
insertBefore(newchild,refchild)
(2)jquery定义了4个方法
1)append()用法
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面始化函数
$(".test").append('<p>参数四</p>');//append()方法把参数指定的内容插入到最后面
}
)
</script>
</head>
<body>
<div class="test">
<p>参数一</p>
<p>参数二</p>
<p>参数三</p>
</div>
</body>
2)appendTo()用法将匹配的元素插入到目标元素的最后面。
<script type="text/javascript">
$(
function(){ //界面始化函数
$('<p>参数四</p>').appendTo(".test");
}
)
</script>
3)prepend()方法将参数指定的内容插入到指定节点最前面。
<script type="text/javascript">
$(
function(){ //界面始化函数
$(".test").prepend('<p>参数四</p>');
}
)
</script>
3、插入节点-外部插入
(1)after()
该方法能够根据设置参数在每一个匹配的元素后面插入内容。
after(content)
content表示一个元素、HTML字符串或jquery对象。
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面始化函数
$("li img").after($("li img").attr("src"));//获取每个图片的src值,并追加到元素之后
}
)
</script>
<style>
li{float: left;}
li img{height: 200px}
</style>
</head>
<body>
<ul class="mytest">
<li><img src="image/表情.jpg"</li>
<li><img src="image/小兔子.jpg"</li>
</ul>
</body>
(2)insertAfter()
该方法与after()方法功能相同,用法相反。
(3)before()该方法为每个匹配的元素之前插入内容。
4、删除节点
(1)JavaScript方式:使用removeChild()方法删除指定的节点及其所包含的所有子节点。
(2)jquery
5、操作属性
(1)设置属性
JavaScript方式:使用setAttibute()方法设置属性
elementNode.setAttribute(name,value)
elementNode表示元素节点,name表示设置的属性名,value表示要设置的属性值。
jquery方式
1)prop()
该方法能够为匹配的元素设置一个或更多属性。
prop(propertyName,value)
应用举例:设置checked属性
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面始化函数
$("input[checked='checked']").prop({disable:true});
}
)
</script>
</head>
<body>
<input type="checkbox" checked="checked">
<input type="checkbox">
<input type="checkbox">
</body>
(2)访问属性
JavaScript方式:使用getAttibute()方法访问属性。
elementNode.getAttribute(name)
elementNode表示元节点对象,name表示属性的名称。
jquery方式:prop()方法
prop(propertyName)
propertyName为要读取的属性名称。
(3)删除属性
JavaScript方式:使用removeAttribute()方法删除指定属性。
elementNode.removeAttribute(name)
jquery方式:removeProp()方法删除prop()方法设置的属性
removeProp(propertyName)