一、前言

1、元素和节点的区别

2、总结获取元素的方式

3、总结获取节点的方式

二、主要内容

1、结点和元素的区别

(1)一些常见基本概念:

    文档:document

    元素:页面中所有的标签

    结点:页面中所有的内容包括(标签,属性,文本(文字,空格,换行,回车))

    根元素:html标签

 (2)节点属性

    nodeType:表示节的类型:  1-------表示是标签, 2-------属性, 3-------文本

nodeName:节点的名字: 标签------大写的标签名字, 属性-----小写的属性名, 文本-----#text

    nodeValue: 节点的值:标签节点----null,  属性节点-----属性值, 文本节点------文本内容

 (3)获取节点和元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="dv">哦哦
<span>这是div中的第一个span标签</span>
<p>这是div中的第二个元素,第一个p标签</p>
<ul id="uu">
<li>1</li>
<li>2</li>
<li id="three">3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script type="text/javascript">
var ulObj=document.getElementById("uu");
var liObj=document.getElementById("three");
//父级节点====><div id='dv'>
console.log(ulObj.parentNode)
//父级元素====><div id='dv'>
console.log(ulObj.parentElement)
//子节点====》NodeList(11) [text, li, text, li, text, li#three, text, li, text, li, text]
console.log(ulObj.childNodes)
//子元素===>HTMLCollection(5) [li, li, li#three, li, li, three: li#three]
console.log(ulObj.children) //第一个子节点====>#text----------------------------在IE8中是第一个子元素<li>1</li>
console.log(ulObj.firstChild)
//第一个子元素====>li-------------------------------IE8中不支持
console.log(ulObj.firstElementChild)
//最后一个子节点==>
console.log(ulObj.lastChild);//------------------------IE8中是第一个子元素
//最后一个子元素
console.log(ulObj.lastElementChild);//-----------------IE8中不支持
//获取某个元素前一个兄弟节点
console.log(liObj.previousSibling)
//获取前一个兄弟元素
console.log(liObj.previousElementSibling)
//某个元素的后一个兄弟节点
console.log(my$("three").nextSibling);
//某个元素的后一个兄弟元素
console.log(my$("three").nextElementSibling);
</script>
</body>
</html>

(4)获取元素

/*
*
* (1)根据id属性的值获取元素,返回来的是一个元素对象
* document.getElementById("id属性的值");
*
* (2)根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
* document.getElementsByTagName("标签名字");
*
* 下面的几个,有的浏览器不支持
*
*(3) 根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
* document.getElementsByName("name属性的值")
*(4)根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
* document.getElementsByClassName("类样式的名字")
*(5)根据选择器获取元素,返回来的是一个元素对象-------------IE8以下不支持
* document.querySelector("选择器的名字");
*
*(6)根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
* document.querySelectorAll("选择器的名字")
*
*
* */

(5)获取第一个元素和最后一个的兼容性写法

  function getFirstElementChild(element) {
if(element.firstElementChild){//支持
return element.firstElementChild;
}else{
var node=element.firstChild;//获取第一个节点,万一ie中为第一个元素
while (node&&node.nodeType!=1){//火狐和谷歌中获取到第一个节点是标签,就取他的兄弟节点
node=node.nextSibling;
}
return node;
}
}
//获取任意一个父级元素的最后一个子级元素
function getLastElementChild(element) {
if(element.lastElementChild){//true--->支持
return element.lastElementChild;
}else{
var node=element.lastChild;//第一个节点
while (node&&node.nodeType!=1){
node=node.previousSibling;
}
return node;
}
}

三、总结

JS(基础)_总结获取页面中元素和节点的方式的更多相关文章

  1. JS基础入门篇( 三 )—使用JS获取页面中某个元素的4种方法以及之间的差别( 一 )

    1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...

  2. jQuery基础学习5——JavaScript方法获取页面中的元素

    给网页中的所有<p>元素添加onclick事件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  3. javascript 获取父页面中元素对象方法

    父页面中: <input type="hidden" id="areaID" value="test1"> <iframe ...

  4. 获取页面中任意一个元素距离body的偏移量

    //offSet:等同于jQuery中的offSet方法,获取页面中任意一个元素距离body的偏移量function offSet(curEle) { var totalLeft = null; va ...

  5. javascript 获取iframe里页面中元素值的方法 关于contentWindow和contentDocumen

    javascript 获取iframe里页面中元素值的方法 IE方法:document.frames['myFrame'].document.getElementById('test').value; ...

  6. js获取页面中图片的总数

    查看效果:http://keleyi.com/keleyi/phtml/image/9.htm 下面是完整代码: <html><body><div id="ke ...

  7. flash播放器遮挡页面中元素问题解决

    今天在做一个包含Flash播放器的页面弹出效果时发现Flash播放器总是跑到页面最上层,发现这个问题与Flash的”wmode”属性有关,至于该元素详细此处不做记录,解决办法如下: IE:加入参数:& ...

  8. arcgis js之点击获取featureLayer中的点

    arcgis js之点击获取featureLayer中的点 代码: this.view.on('click', (evt) => { let layer = this.map.findLayer ...

  9. 根据当前设备的宽度,动态计算出rem的换算比例,实现页面中元素的等比缩放

    ~function anonymous(window){ //根据当前设备的宽度,动态计算出rem的换算比例,实现页面中元素的等比缩放 let computedREM = function compu ...

随机推荐

  1. LODOP打印控件进行批量打印

    Lodop打印控件批量打印的方式:1.批量打印每页内容相同的:(1)批量打印相同内容的很多纸张,可以设置打印份数,把该内容打印出多份.2.批量打印每页不同内容的:(1)通过在一个任务中分页,循环添加页 ...

  2. Python学习之路——Day02

    今日内容: 1.编程语言介绍(***) 2.python介绍(***) 3.安装cpython解释器(多个版本)(****) 4.运行python程序的两种方式(****) 4.1 交互式 4.2 命 ...

  3. jQuery 操作Cookie

    一个轻量级的cookie 插件,可以读取.写入.删除 cookie. 下载地址:http://plugins.jquery.com/cookie/ (在实际中可以用这个保存cookie保存用户的习惯, ...

  4. SQL Server 一张图让你秒懂联合表查询

  5. Nginx 针对建立TCP连接优化

    L:124 sysctl -a | grep file-max //通过命令查看系统最大句柄数 [root@3 ~]# sysctl -a | grep file-max fs.file-max = ...

  6. Qt5 入门

    main()函数中第一句是创建一个QApplication类的实例. 对于 Qt 程序来说,main()函数一般以创建 application 对象(GUI 程序是QApplication,非 GUI ...

  7. MySQL参数调优

    目录 连接相关参数 文件相关参数 缓存相关参数 MyISAM参数 InnoDB参数 连接相关参数 max_connections  允许客户端并发连接的最大数量,默认值是151,一般将该参数设置为50 ...

  8. Python图形库Turtle

    画笔绘制状态函数 函数 描述 pendown() 放下画笔 penup() 提起画笔,与pendown()配合使用 pensize(width) 设置画笔线条的粗细为指定大小 画笔运动函数 函数 描述 ...

  9. linux系统版本大全

    Linux系统下载地址:http://www.jb51.net/LINUXjishu/239493.html linux系统教学视频:http://www.uplinux.com/shipin/lin ...

  10. BZOJ3224普通平衡树——旋转treap

    题目: 此为平衡树系列第一道:普通平衡树您需要写一种数据结构,来维护一些数,其中需要提供以下操作:1. 插入x数2. 删除x数(若有多个相同的数,因只删除一个)3. 查询x数的排名(若有多个相同的数, ...