JavaScript （常用的选择器和查询元素以及各种实例）

最新推荐文章于 2024-05-24 00:34:26 发布

HeartIsland

最新推荐文章于 2024-05-24 00:34:26 发布

阅读量1.5k

点赞数

分类专栏： JavaScript 文章标签： JavaScript JS基础 JS入门常用的选择器查询元素

本文链接：https://blog.csdn.net/HeartIsland/article/details/47177607

版权

JavaScript 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

var usernameDOM = document.getElementById('username');
console.info(usernameDOM.value);
usernameDOM.value = '...';

//可以理解成document.getElementById('username')的简写方式，它必须要求id按照js的命名规范！
username.value = '!!!';

// 2、通过name
通常是用来选择radio、checkbox等相同name的元素

var usernameDOM = document.getElementsByName('username')[0];
console.info(usernameDOM);

// 3、通过tagName

var usernameDOM = document.getElementsByTagName('input')[0];
console.info(usernameDOM);

// 4、通过className，getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。

var usernameDOM = document.getElementsByClassName('username')[0];
console.info(usernameDOM);

//5、组合使用（类似于CSS的后代选择器）

var areaLi = document.getElementById('area').getElementsByTagName('li');
var areaArray = ['天津', '东莞', '海南'];
var areaLength = areaLi.length;
for (var i = 0; i < areaLength; i++) {
areaLi[i].innerHTML = areaArray[i];
}
var numberLi = document.getElementById('number').getElementsByTagName('li');
var numberArray = [1, 2, 3];
var numberLength = numberLi.length;//获取numberLi的长度
for (var i = 0; i < numberLength; i++) {
numberLi[i].innerHTML = numberArray[i];//在表格中逐个添加areaArray数组中的内容
}

/**
* 查询元素
*/
// 1、元素的添加

var divDOM = document.getElementById('div');
// 给p的前面添加一个b标签
var b1Tag = document.createElement('b');
var p = document.getElementById('p');
b1Tag.innerHTML = 'b1 tag';
divDOM.insertBefore(b1Tag, p);
// 给p的后面添加一个b标签
var b2Tag = document.createElement('b');
b2Tag.innerHTML = 'b2 tag';
divDOM.appendChild(b2Tag);

// 2、元素的删除

divDOM.removeChild(b2Tag);

// 3、节点查找

// 父节点
console.info(p.parentNode);
// 兄弟节点
// 前一个节点
console.info(p.previousSibling);
// 后一个节点：p.nextSibling
// 子节点 
// console.info(document.getElementsByTagName('html')[0].firstChild);
console.info(divDOM.childNodes);

/**
* 选择器的各种实例
*/
// 6、表单的特殊选择方式（现在已经不常用了，原因它没有直接getElementXXX的寻找方式快！）

var usernameDOM = document.myform.username;
console.info(usernameDOM.value);
usernameDOM.value = '...';

//.innerHTML 
function innerHTMLDemo() {
test_id1.innerHTML = "<i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i>";
}


//.innerText 存在兼容性问题，所以无法添加样式<i><u>
function innerTextDemo() {
test_id2.innerText = "<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>";
}


//.outerHTML 
function outerHTMLDemo() {
test_id3.outerHTML = "<i><u>设置或获取对象及其内容的 HTML 形式.</u></i>";
}


//.outerText 
function outerTextDemo() {
test_id4.outerText = "<i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>";
}

// 1、利用style属性，在行内添加样式！

var divDOM = document.getElementsByTagName('div')[0];
// 此种方式只能获取行内设置的宽、高
//console.info(divDOM.style.width, divDOM.style.height);
divDOM.style.width = '632px';
// 此种方式可以获取内嵌样式里的宽高，但不能修改宽高！！！
// console.info(divDOM.offsetWidth, divDOM.offsetHeight);
// 2、使用className改变样式！
divDOM.innerHTML = '你好，世界！';
var oldClassName = divDOM.className;
divDOM.className = oldClassName + " fontSize";

/**
* 查询元素的各种实例
*/
//访问子节点

function myDOMInspector(){
var oUl = document.getElementById("myList");//获取<ul>标记
var DOMString = "";
if(oUl.hasChildNodes()){//判断是否有子节点
var oCh = oUl.childNodes;
for(var i=0;i<oCh.length;i++)//逐一查找
DOMString += oCh[i].nodeName + "\n";
}
alert(DOMString);
}

//访问父节点

//nodeName 如果为文本节点，则返回#text
//tagName如果为文本节点，则返回undefined


function myDOMInspector(){
var myItem = document.getElementById("myDearFood");
alert(myItem.parentNode.tagName);
}


function myDOMInspector(){
var myItem = document.getElementById("myDearFood");
var parentElm = myItem.parentNode;
while(parentElm.className != "colorful" && parentElm != document.body)
parentElm = parentElm.parentNode;//一路往上找
alert(parentElm.tagName);
}
<body οnlοad="myDOMInspector()">
<div class="colorful">
   <ul>
<li>糖醋排骨</li>
<li>圆笼粉蒸肉</li>
<li>泡菜鱼</li>
<li id="myDearFood">板栗烧鸡</li>
<li>麻婆豆腐</li>
</ul>
</div>
</body>

//访问兄弟节点
function myDOMInspector(){
var myItem = document.getElementById("myDearFood");
//访问兄弟节点
var nextListItem = myItem.nextSibling;
var preListItem = myItem.previousSibling;
alert(nextListItem.tagName +" "+ preListItem.tagName);
}


//在Firefox中不支持，但是IE中却是支持的。

//访问第一个和最后一个的子节点 
function nextSib(node){
var tempLast = node.parentNode.lastChild;

//判断是否是最后一个节点，如果是则返回null
if(node == tempLast)
return null;
var tempObj = node.nextSibling;

//逐一搜索后面的兄弟节点，直到发现元素节点为止
while(tempObj.nodeType!=1 && tempObj.nextSibling!=null)
tempObj = tempObj.nextSibling;

/三目运算符，如果是元素节点则返回节点本身，否则返回null
return (tempObj.nodeType==1)?tempObj:null;
}
function prevSib(node){
var tempFirst = node.parentNode.firstChild;

//判断是否是第一个节点，如果是则返回null
if(node == tempFirst)
return null;
var tempObj = node.previousSibling;

//逐一搜索前面的兄弟节点，直到发现元素节点为止
while(tempObj.nodeType!=1 && tempObj.previousSibling!=null)
tempObj = tempObj.previousSibling;
return (tempObj.nodeType==1)?tempObj:null;
}
function myDOMInspector(){
var myItem = document.getElementById("myDearFood");

//获取后一个元素兄弟节点
var nextListItem = nextSib(myItem);
//获取前一个元素兄弟节点
var preListItem = prevSib(myItem);
alert("后一项:" + ((nextListItem!=null)?nextListItem.firstChild.nodeValue:null) + " 前一项:" + ((preListItem!=null)?preListItem.firstChild.nodeValue:null) );
}

// getAttribute和setAttribute的使用

function myDOMInspector(){
//获取图片
var myImg = document.getElementsByTagName("img")[0];
//获取图片title属性
alert(myImg.getAttribute("title"));
}

function changePic(){
//获取图片
var myImg = document.getElementsByTagName("img")[0];
//设置图片src和title属性
myImg.setAttribute("src","02.jpg");
myImg.setAttribute("title","公寓");
}

//创建新节点

function createP(){
var op = document.createElement("p");
var otext = document.createTextNode("HHHHH");
op.appendChild(otext);
op.setAttribute("style","text-align:center");
document.body.appendChild(op);

//创建完节点，就马上会影响到下面的操作，比如P的数量就会多1个
}

//删除节点
//需要注意的是标签之间的父子关系！！！

function deleteP(){
var oP = document.getElementsByTagName("p")[0];
oP.parentNode.removeChild(oP);//删除节点
}

//替换节点

function replaceP(){
var oOldP = document.getElementsByTagName("p")[0];
var oNewP = document.createElement("p");//新建节点
var oText = document.createTextNode("这是一个感人肺腑的故事");
oNewP.appendChild(oText);
oOldP.parentNode.replaceChild(oNewP,oOldP);//替换节点
}

//插入节点

function insertP(){
var oOldP = document.getElementsByTagName("p")[0];
var oNewP = document.createElement("p");//新建节点
var oText = document.createTextNode("这是一个感人肺腑的故事");
oNewP.appendChild(oText);
oOldP.parentNode.insertBefore(oNewP,oOldP);//插入节点
}

//没有insertAfter，但是可以自己写一个

function insertAfter(newElement, targetElement){
var oParent = targetElement.parentNode;//首先找到目标元素的父元素
if(oParent.lastChild == targetElement)//如果目标元素已经是最后一个子元素了
oParent.appendChild(newElement);//则直接用appendChild()加到子元素列表的最后
else //否则用insertBefore()插入到目标元素的下一个兄弟元素之前
oParent.insertBefore(newElement,targetElement.nextSibling);
}
function insertP(){
var oOldP = document.getElementById("myTarget");
var oNewP = document.createElement("p");//新建节点
var oText = document.createTextNode("这是一个感人肺腑的故事");
oNewP.appendChild(oText);
insertAfter(oNewP,oOldP);//插入节点
}

//其实这个也是通过insertBefore原理来实现的

//cloneNode(deepBoolean)
/*复制并返回当前节点的复制节点，这个复制得到的节点是一个孤立的节点，不在document树中。复制原来节点的属性值，包括ID属性，所以在把这个新节点加到document之前，一定要修改ID属性，以便使它保持唯一。当然如果ID的唯一性不重要可以不做处理。
这个方法支持一个布尔参数，当deepBoolean设置true时，复制 当前节点的所有子节点，包括该节点内的文本。*/
<p id=”mypara”>11111</p>
p=document.getElementById("mypara")
pclone = p.cloneNode(true);
p.parentNode.appendChild(pclone

</script>

HeartIsland

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript （常用的选择器和查询元素以及各种实例）

/***常用的选择器*///1、通过idvar usernameDOM = document.getElementById('username');console.info(usernameDOM.value);usernameDOM.value = '...';//可以理解成document.getElementById('username')的简写方式，它必须
复制链接

扫一扫