DOM元素对象的属性和方法(2)

11、contentEditable

  作用:设置或返回元素内容可否编辑布尔值,HTML5新增属性

<!DOCTYPE html>
<html>
<head>
    <title>cloneNode</title>
    <meta charset="utf-8">
</head>
<body>
    <ul id="one">
        <li>可编辑</li>
        <li>不可编辑</li>
    </ul>
    <script>
        var one=document.getElementById("one");
        var lis=one.getElementsByTagName("li");
        lis[0].contentEditable=true;
        console.log(lis[0].contentEditable);
        console.log(lis[1].contentEditable);
    </script>
</body>
</html>

结果:

12、dir

  作用:设置或者返回元素文本方向,默认为空

<!DOCTYPE html>
<html>
<head>
    <title>cloneNode</title>
    <meta charset="utf-8">

</head>
<body id="one">
    <p dir="rtl">文本</p>
    <p dir="ltr">文本</p>
    <p>文本</p>
    <script>
        var p=document.getElementsByTagName("p");
        console.log(p[0].dir);
        console.log(p[1].dir);
        console.log(p[2].dir);
    </script>
</body>
</html>

结果:

13、firstChild

  作用:返回元素的第一个子节点(注意是节点,不是元素)

<!DOCTYPE html>
<html>
<head>
    <title>cloneNode</title>
    <meta charset="utf-8">
</head>
<body>
<div id="one">
    文本节点
    <p>文本</p>
</div>
    <script>
        var one=document.getElementById("one");
        var first=one.firstChild;
        console.log(first.nodeValue);
    </script>
</body>
</html>

结果:

14、getAttribute

  作用:返回指定的属性名的值

15、getAttributeNode

  作用:返回指定的属性节点

16、getElementsByTagName

  作用:返回指定标签名的后代元素集合

<!DOCTYPE html>
<html>
<head>
    <title>firstChild</title>
    <meta charset="utf-8">
</head>
<body>
<div id="one">
    <ul>
        <li>第一个li</li>
        <ul>
            <li>第二个li</li>
        </ul>
    </ul>
</div>
    <script>
        var one=document.getElementById("one");
        var lis=one.getElementsByTagName("li");
        console.log(lis.length);
    </script>
</body>
</html>

结果:

17、getFeature

  作用:返回指定特征的执行APIs对象

18、getUserData

  作用:返回一个元素中关联键值的对象

19、hasAttribute

  作用:判断元素是否有指定属性,存在返回true,否则返回false

20、hasAttributes

  作用:判断元素是否有属性,有返回true,否则返回false

21、hasChildNodes

  作用:判断元素是否具有任何子节点(不只是元素),有返回true,否则返回false

<!DOCTYPE html>
<html>
<head>
    <title>hasChildNodes</title>
    <meta charset="utf-8">
</head>
<body>
<div id="one">
    文本
</div>
<div id="two"></div>
    <script>
        var one=document.getElementById("one");
        var two=document.getElementById("two");
        console.log("第一个DIV是否有子元素"+one.hasChildNodes());
        console.log("第二个DIV是否有子元素"+two.hasChildNodes());
    </script>
</body>
</html>

结果:

22、id

  作用:设置或返回元素的id属性

时间: 2024-10-11 05:53:52

DOM元素对象的属性和方法(2)的相关文章

DOM元素对象的属性和方法(1)

一.accessKey() 作用:获取元素焦点快捷键:设置快捷键后,使用Alt+快捷键,让元素快速获得焦点, <!DOCTYPE html> <html> <head> <title>element.accesskey</title> <meta charset="utf-8"> </head> <body> <input type="text" id="

DOM 元素对象的属性方法

在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个    文档节点 . 所有的HTML元素都是    元素节点 所有 HTML 属性都是    属性节点 文本插入到 HTML 元素是    文本节点 注释是    注释节点. 最基本的节点类型是Node类型,其他所有类型都继承自Node,DOM操作往往是js中开销最大的部分,因而NodeList导致的问题最多.要注意:NodeList是‘动态的’,

HTML DOM对象的属性和方法

HTML DOM对象的属性和方法 HTML DOM 对象有几种类型: 1.Document 类型 在浏览器中,Document 对象表示整个 HTML 文档. 1.1属性 引用文档的子节点 documentElement var html = document.documentElement; //取得对<html>元素的引用 body var body = document.body; //取得对<body>元素的引用 获取文档信息 title 通过 title 属性可以访问当前

HTML DOM对象的属性和方法介绍(原生JS方法)

HTML DOM对象的属性和方法介绍 DOM 是 Document Object Model(文档对象模型)的缩写. DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口),它允许程序和脚本动态地访问和更新文档的内容,结构和样式. W3C DOM 标准被分为 3 个不同的部分: 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型 HTML DOM 定义了所有 HTML 元

研究 Table DOM对象的属性和方法

[课程]web2.0程序设计[作业要求]建立一个网页,放置一个 table 元素和一个 Input 按钮,研究 Table DOM对象的属性和方法,用 JavaScript 实现 Table 插入行.删除行.交换两行内容.(仅使用 DOM 原生对象,且适用 IE 和 Chrome)[参考文档]table dom 参考手册 1.首先按照要求,建立一个网页 Test Table Dom(a table about fruits),假设功能是用来储存一家水果店的账单吧,存有水果店的水果和相应价钱,老板

DOM访问HTML元素的方式,DOM访问表单控件的常用属性和方法,DOM访问列表框、下拉菜单的常用属性,DOM访问表格子元素的常用属性和方法,DOM对HTML元素的增删改操作

DOM访问HTML元素的方式 为了动态地修改HTML元素,须先访问HTML元素.DOM主要提供了两种方式来访问HTML元素: 根据ID访问HTML元素:通过document对象调用getElementById()方法来查找具有唯一id属性值的元素. 利用节点关系访问HTML元素.常用的属性和方法如下: parentNode 返回当前节点的父节点 previousSibling 返回当前节点的前一个兄弟节点 nextSibling 返回当前节点的后一个兄弟节点 childNodes 返回当前节点的

JavaScript中的window对象的属性和方法;JavaScript中如何选取文档元素

一.window对象的属性和方法 ①setTimeout()方法用来实现一个函数在指定毫秒之后运行,该方法返回一个值,这个值可以传递给clearTimeout()用于取消这个函数的执行. ②setInterval()用来实现一个在指定毫毛数的时间里重复调用,返回一个值,这               个值可以传递给clearInterval()用于取消后续函数的调用. ③Document对象的location属性也引用到Location对象: window.location === docume

[ jquery 方法 get(index) ] 可以将取得的相应jquery对象和DOM元素对象进行转化

取得其中一个匹配的元素:index表示取得第几个匹配的元素,这能够让你选择一个实际的DOM 元素并且对他直接操作,而不是通过 jQuery 函数.$(this).get(0)与$(this)[0]等价, 这段话的意思就是可以将jquery对象和DOM元素对象进行转化 实例: <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta htt

jQuery事件对象的属性和方法

jQuery事件对象的属性和方法 事件对象的属于与方法有很多,但是我们经常用的只有那么几个,这里我主要说下作用与区别 event.type:获取事件的类型 触发元素的事件类型 $("a").click(function(event) { alert(event.type); // "click"事件 }); event.pageX 和 event.pageY:获取鼠标当前相对于页面的坐标 通过这2个属性,可以确定元素在当前页面的坐标值,鼠标相对于文档的左边缘的位置(